|
JavaScript - Passing Radiobutton Value To An Event Tracker
Need help please...new to JS
On Form submission, I am trying to pass a variable (var radioValue, which is the RadioButton selection) as Opt Label in the _gaq.push event tracker (google analytics)as follows onclick="_gaq.push(['_trackEvent', 'Visitor', 'Submit', radioValue]);" However radioValue value is not getting passed Code snippets are attached below. Not sure whether the problem is in the JS function or whether i am calling the var incorrectly in the _gaq.push script...Thank you The radioValue is captured in the overall form validation function as below. Hari ------------------------------------------------------------- (in HTML head) /////other overall form functions var radio_choice = false; for (counter = 0; counter < document.form.RadioGroup.length; counter++) { if (document.form.RadioGroup[counter].checked == true){ radio_choice = true; radioValue=(document.form.RadioGroup[counter].value); } } if (!radio_choice) { alert("Please select again."); return (false); } /////other overall form functions ------------------------------------------------------------ RadioButton Input script (in HTML body) <input name="RadioGroup" value="abc1" type="radio" />abc1</td><td> </td></tr> <input name="RadioGroup" value="abc2" type="radio" />abc1</td><td> </td></tr> <input name="RadioGroup" value="abc3" type="radio" />abc1</td><td> </td></tr> Similar TutorialsI'm having trouble passing an array into an event handler. This does not work: Code: var lightbulb = [1,1,1,0,1,0]
var banana = [0,0,1,1,0,1]
function changetextimage(arr){
for(var i=0;i<5;i++){
var pixel = document.getElementById("text"+i);
if (arr[i]) {
pixel.style.color="#000000";
}
else {
pixel.style.color="#FFFFFF";
}
}
}
$('#lightbulbpicture').mouseover(changetextimage(lightbulb));
$('#bananapicture').mouseover(changetextimage(banana));
This does work: Code: var lightbulb = [1,1,1,0,1,0]
var banana = [0,0,1,1,0,1]
function changetextimage1(){
for(var i=0;i<5;i++){
var pixel = document.getElementById("text"+i);
if (lightbulb[i]) {
pixel.style.color="#000000";
}
else {
pixel.style.color="#FFFFFF";
}
}
}
function changetextimage2(){
for(var i=0;i<5;i++){
var pixel = document.getElementById("text"+i);
if (banana[i]) {
pixel.style.color="#000000";
}
else {
pixel.style.color="#FFFFFF";
}
}
}
$('#lightbulbpicture').mouseover(changetextimage1);
$('#bananapicture').mouseover(changetextimage2);
I have a whole bunch of these arrays (which are much longer) that I want to pass into this function so I just want to pass each as an argument rather than write each function out. I bolded the areas I'm talking about so it's easier to see. HTML CODE BELOW (JAVASCRIPT CODE FOLLOWS); Code: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Text Object value Property</title>
<script type="text/javascript" src="../jsb-global.js"></script>
<script type="text/javascript" src="jsb-11-02.js"></script>
</head>
<body>
<h1>Text Object value Property</h1>
<form id="UCform" action="make-uppercase.php">
<p>
<input type="text" id="converter" name="converter" value="sample">
</p>
</form>
</body>
</html>
This program below switches what is entered into the text filed to caps when hitting the enter button or the tab button. Can someone explain to me why it is not working. The answer would be helpful to a newbie who's trying hard to learn the fundamentals... Code: // initialize when the page has loaded
window.onload = initialize;
var oInput; // (global) input field to make uppercase
// apply behaviors when document has loaded
function initialize()
{
// do this only if the browser can handle DOM methods
if (document.getElementById)
{
// apply event handler to the button
oInput = document.getElementById('converter');
if (oInput){
var event = oInput.onchange;
upperMe(event);
}
// apply event handler to the form
var oForm = document.getElementById('UCform');
if (oForm)
{
var event = oForm.onsubmit;
upperMe(event);
}
}
}
// make the text UPPERCASE
function upperMe(evt)
{ // consolidate event handling
if (!evt) evt = window.event;
// set input field value to the uppercase version of itself
var sUpperCaseValue = oInput.value.toUpperCase();
oInput.value = sUpperCaseValue;
// cancel default behavior (esp. form submission)
// W3C DOM method (hide from IE)
if (evt.preventDefault) evt.preventDefault();
// IE method
return false;
}
Hello! I'm working with nested functions and trying to pass a 'this' value to an anonymous being used in an assignment for an event listener. Here's the basics of my code: Code: <div id='abc'></div>
<script type='text/javascript'>
var abc = function () {
this.myFunction = function() {
var myObj
myObj = document.createElement("input");
myObj.setAttribute("type", "button");
myObj.setAttribute("value", "Click Me");
myObj.addEventListener("click", function () {
this.doDing();
}, false);
document.getElementById('abc').appendChild(myObj);
}
this.doDing = function () { alert('ding'); }
}
var myInstance = new abc();
myInstance.myFunction();
</script>
So, this should plop a button inside our DIV and when clicked I'd like it to run the alert-ding; unfortunately it seems to want to run the function as defined under the buttons object which doesn't work out too well. Any suggestions? Thanks! I have added an event listener to a LI item in the DOM: liNode.addEventListener("mouseover", mouseOn, true); The mouseOn function: function mouseOn(e) { // Test for IE or Firefox var e = (!e)?window.event:e; var yPos; if (e.pageY) { yPos = e.pageY; } else { yPos = e.clientY; } } I would like to pass in another parameter to the mouseOn function in addition to the event that is passed in automatically. Is there a way to do this? Hi I am trying to create a form with radio buttons, when an option is selected and submitted it comes up with a message but i cant get it working. If anyone can help that would be greatly appreciated. If the first radio button is selected I want the message class 1 and if the second class 2 etc Code: <?xml version="1.0" encoding="utf-8"?>
<head><title>Car Insurance</title><script language="javascript" type="text/javascript">
<!--
function get_radio_value()
{
for (var i=0; i < document.insuranceform.insurance.length; i++)
{
if (document.insuranceform.insurance[i].checked)
{
var rad_val = document.insuranceform.insurance[i].value;
}
}
}
-->
</script>
</head>
<body>
<form name="insuranceform">
Please select an option<br>
<input type="radio" name="insurance" value="Class 1" checked="checked"> Age is 30 or above and married<br>
<input type="radio" name="insurance" value="Class 2"> Age is 30 or above and single<br>
<input type="radio" name="insurance" value="Class 3"> Age is below 30 and married<br>
<input type="radio" name="insurance" value="Class 4"> Age is below 30 and single<br>
<input type="submit" onclick="get_radio_value()">
</form>
</body>
</html>
Hi All, I dont know how to display a HTML form when user click on a radio button. I have two forms in a page, when user click on a radio button that correspond to its form, the other form will be hidden. I have the idea to use if...else statement. But I dont know what code to be inserted in an onClick event. I also not sure whether this is logic or not, whether this can be done or not. Pls help me how to accomplish this. I attach the sample of my code here. Thanks in advance. Code: <html>
<head>
<script type="text/javascript" src="funIndex.js">
</script>
</head>
<body>
<h4>CPI</h4>
<!--Choose Single or Multiple Series-->
<form name="choose" action="main.html" method="post">
<input type="radio" name="series" value="single" onClick="what code to insert here"/> Single Serie <br/>
<input type="radio" name="series" value="multiple" onClick="what code to insert here" /> Multiple Series <br/>
</form>
<!--To calculate Single Serie-->
<script type="text/javascript">
if (document.choose.name.value == "single")
{
</script>
<form name="cpi">
<table border="1">
<tr>
<td colspan="2">Single</td>
</tr>
<tr>
<td>Country</td>
<td><select name="country">
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Singapore">Singapore</option>
<option value="Indonesia">Indonesia</option>
</select>
</td>
</tr>
<tr>
<td>Current</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Base</td>
<td><select name="base">
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="Enter" onclick="calIndex(document.cpi.current.options.selectedIndex,document.cpi.base.options.selectedIndex)">
</td>
</tr>
<tr>
<td>Index</td>
<td><input type="text" name="idx" id="idx2" /></td>
</tr>
</table>
</form>
<!--To calculate multiple series-->
<script type="text/javascript">
}
else if (document.choose.name.value == "multiple")
{
</script>
<form name="cpi2">
<table border="1">
<tr>
<td colspan="2">Multiple</td>
</tr>
<tr>
<td>Country</td>
<td><select name="country">
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Singapore">Singapore</option>
<option value="Indonesia">Indonesia</option>
</select>
</td>
</tr>
<tr>
<td>Current From</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Current To</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Base</td>
<td><select name="base">
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="Enter" >
</td>
</tr>
</table>
</form>
<script type="text/javascript">
}
</script>
</body>
</html>
Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks Hello, i'm working on a 3 page survey. When hitting next, previous, or submit it passes the values of all the questions to the next page. I've got the whole thing working correcting except for one thing: When the box is "not" checked it passes no value. I'm needing it to have a value of "1" when checked and a value of "0" when not checked, and currently when its not checked and i pass the info it leaves it blank. I'd post the whole code to one of the pages but it's long , so i'll post the snipits of the code. Code: <script type="text/javascript">
/* <![CDATA[ */
function processQueryString() {
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
//document.writeln(formArray[i] + "<br />");
var sDataName = formArray[i].split("=")
switch (sDataName[0]) {
case ".lib_use":
for (var j=0; j < document.getElementsByName(".lib_use").length; ++j) {
if (document.getElementsByName(".lib_use").item(j).value == sDataName[1]) {
document.getElementsByName(".lib_use").item(j).checked = true;
//alert("lib_use set");
}
}
break;
case ".lib_comp":
if (sDataName[1] == 1) {
document.getElementsByName(".lib_comp").checked = true;
document.getElementsByName(".lib_comp").value= 1;
}
else {
document.getElementsByName(".lib_comp").checked = false;
document.getElementsByName(".lib_comp").value= 0;
}
break;
default:
alert("not caught = " + sDataName[0]);
continue;
}
}
}
/* ]]> */
</script>
<input type="checkbox" name=".lib_comp" id="lib_comp" value="1" />
The first case that i showed in my code is a radio button, and it passes correctly, i just wanted to show the "format" i was using in a working sense. The 2nd case is an example of the check boxes. Thanks for looking at this, and giving any suggestions you might have! I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? Hi, I have what I assume started as a simple error and then trying to fix it I think I have made things so complicated I've become confused. I have two fields, a drop down list and a text field, when someone clicks on a value in a drop down list (I will show the results eventually but at the moment) I just want the result to echo in my getCategory.php and the same for the text field. Both php pages are currently being called. And at the moment contain $_REQUEST['category'] and $_REQUEST['ProductName'] respectively. Nothing is being echoed. I know the below code is wrong, but the more I try to correct it the worse it gets so I thought I would just leave it as is before I made it worse. Code: <script type="text/javascript">
function loadXMLDoc1(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>
<body>
<label>Search by Category: </label>
<select name="category" id="category" onchange='loadXMLDoc1("getCategory.php","txtHint","category")' class="input">
<option value="please select"
selected"selected">Please Select</option>
<option value="Clothes" name="Clothes" id="Clothes">Clothes</option>
<option value="Bags" name="Bags" id="Bags">Bags</option>
<option value="Hats" name="Hats" id="Hats">Hats</option>
</select>
<br />
<br />
<label>Search by name: </label>
<input type="text" class="input" name="ProductName" id="ProductName" value="Search" size="30"/> <input type="button" value="Search" onclick="loadXMLDoc1('getProductName.php','txtHint', ProductName='(this.value)')" />
<br />
<br />
<div id="txtHint"></div>
Dear all, I'm passing the variables myTitle and myLink to form.php using javascript. This is the way I'm doing it: Code: <a href='form.php?title=" + myTitle +"&link="+myLink+">Click me</a> It's working great but sometimes myTitle and myLink contain the plus character (+). When this happens it's not passed. In the case of the title, it's just a problem of looks but in the case of the link, well, the link won't work without the character. As an example if the title is: Laptop + Accessories What is passed is: Laptop Accessories What can I do to pass also the plus character?? Thanks a lot!! when user populate info it will appear like this: ------------------------- chkbox | name | number ------------------------- radbtn | MJ | 234123 radbtn | MD | 343543 radbtn | AB | 453466 Is uncertain that how many info will appear as its from database. I am able to enable the radbtn with chkbox by getting radbtn name. How can i enable only the selected radbtn textbox under name and number in order for user to edit it ? thanks anyone who can solve it! Hi, I've had problems in the past understanding this, however, after reading this tutorial, I understand. In some languages, like VB6, I notice the "byVal" and the "byRef" is specifically used. In javascript, I don't notice those specifics typed in functions. Is the "default" by value when using in a function to change a parameter? If it is, what is the syntax for using by reference, or is that ever used? My question arises from this notation taken from here: Quote: Note that it is the value that a has at the time that it is passed into the function that gets substituted into the argument and not the value that the original variable has at that point in the processing. It is the values in the parameters that the function uses and not the variables. This is called pass by value . In those languages where you can pass the actual variable into the function instead of just passing its value the method used to do so is called pass by reference . Had we been able to pass the variables into the function by reference rather than by value then the final value in b would have been -16 instead of -14. Here is the example (passing by value): Code: function myfunction(y, z) {
a += y;
b -= z;
}
var a = 0;
var b = 10;
var c = 3;
var d = 4;
var e = 2;
myfunction(c, d);
myfunction(d, e);
myfunction(9, 2);
myfunction(b, a);
Results:
myFunction(c, d); output: 0 + 3 = 3(y), 10 - 4 = 6(z)
myFunction(d, e); output: 3 + 4 = 7(y), 6 - 2 = 4(z)
myFunction(9, 2); output: 7 + 9 = 16(y), 4 - 2 = 2(z)
myFunction(b, a); output: 2 + 16 = 18(y), 2 -16 = -14(z)
Thanks! I can't seem to get the event listener to run an event when I focus on the text field with the ID username. JavaScript: Code: function listener_loginForm() {
var fields = Array("username","password");
for ( j = 0; j < fields.length; j++ ) {
var objs = document.getElementById(fields[j]);
for ( var i = 0; i < objs.length; ++i ) {
var elm = objs [ i ];
elm.onblur = function() { display_text_bg(this); };
if (elm.Id = "password") {
elm.onfocus = function() { switch_field(this); };
}
}
}
}
//This function attaches events to elements.
var addEvent = function( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};
addEvent ( window, "load", listener_loginForm );
//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered.
function display_text_bg(obj) {
alert("remove text");
}
function switch_field(obj) {
alert("switch");
}
HTML: Code: <form name="login" class="login">
<label for="username">Username: </label><br />
<input type="text" name="username" id="username" />
<br /><br />
<label for="password">Password: </label><br />
<input type="text" name="password" id="password" />
<br /><br />
<label for="remember">Remember Me? </label><br />
<br />
<span class="remember">
<span class="text">Never</span>
<input type="hidden" value="never" name="rememberme" />
<ul>
<li>Never</li>
<li>24 Hours</li>
<li>1 Week</li>
<li>Always</li>
</ul>
</span>
</form>
hi there here's my problem, I want to alert each innerHTML of the tag "a" when mouse over, but it only alert when i insert "return false;" in the end of the loop, what's the problem? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" >
function show(){
var linkIt = document.getElementsByTagName("a")
for(var i=0; i<linkIt.length; i++){
linkIt[i].onmouseover = function(){
alert(linkIt[i].innerHTML);
}
return false;
}
}
</script>
</head>
<body onload="show()">
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
</li>
</ul>
</body>
</html>
Hi, New to javascript. Doing web page with ASP/VB.NET. Have text boxes for UI on page. Two command buttons - Submit (for db update) and Cancel. I need the Cancel button to prompt the user to verify cancellation. Need OK/Cancel buttons on alert. If user selects Cancel-no action. If user selects OK then I want the text boxes cleared of user text input and focus returned to first text box. I think this may be the code but do not know how to apply it. function Clear() { var res=window.confirm("Please confirm cancellation-text boxes will be cleared"); if(res==true) { document.getElementById("StrtDte").value=""; document.getElementById("EndDte").value=""; document.getElementById("txtProjRegHrsAl").value=""; document.getElementById("txtProjOTHrsAl").value=""; document.getElementById("ddlRAS").focus(); } } Is this code valid or invalid for the events I need? How do I set it to fire when user clicks the ASP Cancel button? Thanks, John Hello forum, My name is juan and recently started html programming. I have a web page with a drop box with the name of states. Code: <option value="">Alabama</option> <option value="">Alaska</option> I can add a onclick="code here" to the tag so that when the drop box alabama is selected it triggers the onclick event. Im using Ibox in order to have a image of the state open. Code: <a href="images/large/image_1b.jpg" rel="ibox" title="alabama at 1024x450!"><img src="images/small/image_1.jpg" alt=""/></a> the above is a <a> link tag correct? How do I go bout adding the above code into the onclick event? Hello All, How can i want to capture onscroll event in Javascript ? Thanks in advance. |
|||||||