JavaScript - H E L P!! Label Value To Javascript Variable

Hello,

I have a coding project that I am working on, and I have gotten stumped. Basically win the page loads I want to show random numbers in two textboxes or labels, I would prefer labels. What this is going to be used for is...it is suppose to be for a math learning tool for first, second and third graders. Also another question is that I am suppose to give them digits based upon their grade level. So for first grade 1+1=2 second grade 2 digits, third 3 digits but can have a four digit answer. Plus it can't have negative numbers, nor have remainders for division. Also I don't want to use buttons if at all possible I want the numbers to load automatically.

I know this is a loaded question and I have worked tons on it, for me its trying to get the last few things to work together that's giving me trouble. If you would like to see sections of my code please ask cause it is tons as of right now. Thanks for your help.

Can anyone tell me of how to take or assign a javascript variable into php.

I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with.

I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this:

Code:

<thead><tr class="Answers">

			<th class='c1 BorderColor' width="25%" class='c1'> &nbsp; </th>
		<th class='c2 BorderColor' class='c2 yAxisBorder' > &nbsp; </th>
		<th class='c3 BorderColor' class='c3 yAxisBorder' > &nbsp; </th>
	
	
										
		<th width="25%" class='Selection BorderColor c4   ' id='header~QID19~1~4' >

			<label>Disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c5   ' id='header~QID19~2~5' >
			<label>Neither agree nor disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c6 last  ' id='header~QID19~3~6' >
			<label>Agree</label>

		</th>
	
	
</tr></thead><tr class='ChoiceRow   '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3'  ></td></tr><tr class='ChoiceRow ReadableAlt  '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3'  ></td></tr><tr class='ChoiceRow  bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3'  ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div>

I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads.

What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered.

I used the following JS code:

Code:

var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');

function getLabels()
  {
    for (x=0; x<spans.length; x++)
  {
    if (spans[x].className == "LabelWrapper")
    {
      labelspans.push(spans[x]);
    }
  }
    for (y=0; y<labelspans.length; y++)
  {
   labels.push(labelspans[y].firstChild);
   radioname.push(labelspans[y].firstChild.htmlFor);
  }
}
  
function getRadios()
{   
  //will put all radio groups into the "radiolist" array
  for (z=0; z<radioname.length; z++)
   {
     radiolist.push(document.getElementsByName(radioname[z]));
     //will add Event Listener to each radio button, and add each one to the "radios" array
     for (i=0; i<radiolist[z].length; i++)
       {
        chkradio = radiolist[z][i];
        chkradio.setAttribute("count",Number(z));
        chkradio.addEventListener("click", function(){changeLabel()}, false);
        radios.push(chkradio);
       }
  }
}

function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly          
   {
    for (w=0; w<radios.length; w++)   
      {
       if (radios[w].checked)
           {
            a = radios[w].getAttribute("count");
            labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
           }
       }
    }
getLabels();  
getRadios();

This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster?

Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative?

Hi,

is it cool/possible to use a php variable inside the javascript ?
i have this hidden html form field
PHP Code:
<?php $unique = md5(uniqid()); ?>
<input type="hidden" name="unique" id="<?php echo $unique; ?>" value="" />

then i have this javascript
PHP Code:
var hiddenfield = document.getElementById('<?php echo $unique; ?>');
hiddenfield.value = new Date().getTime();

LOL it doesn't work, can somebody help me please ?

Is it possible to pass the value of a javascript variable through src? For example, instead of...

<script type="text/javascript" src="/myfolder/myjsfile.js"></script>

...could I have something like...

<script type="text/javascript" src=JS VARIABLE VALUE></script>

What would be the syntax for this? Is it even possible?

Thank you!

SOLVED

I am trying to use a php variable in javascript.

At the moment I am using a fixed variable

PHP Code:
$articleID = 5; 


Then outputting it to the page to declare a javascript variable

Code:

var articleid = "<?php echo $articleID; ?>";

Then trying to us it within a string

"FlashVars", "fileURL=../uploadedfiles/+ articleid + .gpx&key=ABQIAAAAOQBC.........

Can anyone tell me what I am doing wrong? I am not very used to Javascript and perhaps I am going about it totally the wrong way.

Help!

Gordon

I get the screen resolution with this script:

<SCRIPT language="JavaScript">
<!--
height = screen.height;
width = screen.width;
document.write(width + "x" + height);
var x = ( width + "x" + height);
//-->
</SCRIPT>

Now I have some links below and I want to use bold if the link has the same screen resolution:

<a href="page1">800x600</a>
<a href="page2">1024x768</a>
<a href="page3">1680x1050</a>
<a href="page4">1920x1200</a>

Supposing my screen resolution is 1920x1200, the result should be:

800x600
1024x768
1680x1050
1920x1200

How do I do that?

Thx!!

Hello

Can i pass php Variable into javascript function like this example.

PHP Code:
 <script type="text/javascript">
<!--
function confirmation() {
    var answer = confirm("are u sure?")
    if (answer){

        window.location = "user.php?action=statusd&uid=".$row['id']."";
    }
    else{
        alert("Canceled")
    }
}
//-->
</script> 


This ".$row['id']." will be an user id ...

link
PHP Code:
<a href='#' onclick='confirmation(); return false;'>Go</font></a> 

So, I need to use a javascript variable when reading a value from a asp array. Currently I have a windows app that has a webbrowser. Teh windows app invokes a javascript method through the webbrowser and this javascript method returns an object. This object is built in the javascript function using values which exist inside a classic asp array. Phew! The function that sits on the relevant asp page, is invoked from my windows app and then returns the object to the windows app is below.

function item(count) {
var pid;
var description;
var fullprice;
var discountprice;
var quantity;
var size;

this.pid = '<%=SBagArray(0,count) %>'; //ProductId
this.description = "<%=SBagArray(1,count)%>"; //description
this.fullprice = <%=SBagArray(8,count) %>; //Fullprice
this.discountprice = <%=SBagArray(9,count) %>; //Discountprice
this.quantity = <%=SBagArray(6,count) %>; //Quantity
this.size = <%=SBagArray(2,count) %>; //Size

this.getPid = function() { return this.pid; }
this.getDescription = function() { return this.description; }
this.getFullprice = function() { return this.fullprice; }
this.getDiscountprice = function() { return this.discountprice; }
this.getQuantity = function() { return this.quantity; }
this.getSize = function() { return this.size; }

}

My problem is that the variable 'count' is not recognised by the asp. So, how can I use this variable in such a way that it works? This is driving me crazy!

Any help would be greatly appreciated!

Thanks!

so i have this code i am working on(this is a dumbed down version of it)
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
    <head>
    

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#Submit").click(function(){
			for (i=0;i<=50;i++)
			{
                $.ajax({
                    url:"process.php",
                    type:"get",
                    data:$("form").serialize(),
                    success:function(response){
                        var obj = jQuery.parseJSON( response );
                        var success = obj.success;
                        var actionsNumber = obj.number;
                        $("#result").html('There have been  '+actionsNumber+'  loops completed');    
				

                    }
                })
            }
			
			})
        })
    </script>
    </head>
  <body>
    <form action="" method="post">
    <p>
    <label><strong>Number of Loops</label>
    </p>
   <input name="count" type="text" value = "1"/>
    </p>
    
    <p>
    <input id="Submit" type = "button" value = "Send">
    </p>
    </form>
    <p id="result">There have been 0 loops completed</p>
    </body></html>

so you see this for loop

for (i=0;i<=50;i++)

I want it to be able to be like

for (i=0;i<=count;i++)

so that it will loop the number of times inputted

also(though i dont know if this is something that i need to use js for) On my full code there are other textboxes that need to be sent to process.php each time that it is run.


How can i achieve this?


also before anyone asks i have googled this and searched around yet i havent been able to figure this out, everything i have tried hasnt worked

and here is the process.php

PHP Code:
<?php session_start();
// process the form data here
//:::::::::
//
if(!isset($_SESSION['number'])){
      $_SESSION['number'] = 0;
    }
$number =  $_SESSION['number']++;

// output json response 
echo'{"success":"true","number":"'.$number.'"}';
?>

Hi:
I got a blank page returned when using javascript within the Frameset. Here is part of my codes:

(my javascript part)

<script language="JavaScript">
//this function will be used to get the parameter from URL using javascript
function gup (name)
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}

//get the transactionID from the URL
var transactionID = gup('name');


//add the transactionID as the URL parameter
var url = "../../onetwothree/Approve.jsp?name=" + transactionID + '\"';

var temp = '<frame name=\"onetwothree\" ' + 'src=\"' + url + '>' + '</frameset>';

</script>

----------------------------

(my html part)
<frameset rows="0,*" border="0" frameborder="0" framespacing="0">

<frame name="onetwothreeFrame" src="../onetwothree/abcd.html" marginwidth="0" marginheight="0" scrolling="no" noresize>

<script language="JavaScript">
document.write(temp);
</script>
</frameset>

I've been having a hard time with this and was hoping someone here would take a little pity and render me a great service.
I'm using a javascript to get the user's timezone and am trying to pass the response to an input field in a php form.
With a great deal of trial and error I got a demo working to a point but I'm stuck.
Here's what works now:
Code:

<p id="timezoneInformation" style="text-align: center;">click here</p>
<script src="jstz.js"></script>
<script>
var container = document.getElementById("timezoneInformation");
var showTimezone = function () {container.textContent = jstz.determine().name();};
container.addEventListener("click", showTimezone);
</script>

jstz.js is from Automatic timezone detection using JavaScript

The example above is as far as I've gotten. I would like to send the results to a form field to submit to the server.
It's probably a lot easier than I'm making it out, but I've had little success and would welcome any help.
Thank you.

Hi, new to the forum (and Javascript coding). I hope someone can help as this is driving me nuts...

I want my website to display the content of another webpage in an iframe. the other webpage extension will change each day (e.g. 'www.example.com/16_02_2012.html' would be today's file to view, 'www.example.com/15_02_2012.html' would have been yesterday's etc.).

I have worked out some code to grab today's date and create the web address as a variable. how do i then use that variable in the <iframe src="??"> when someone click a link to "update the iframe"?

Here is my code so far... I would really appreciate some help!!! :s


<html>
<script>

function getMonth() {
var now = new Date();
var month = now.getMonth();
return month < 10 ? "0" + (month+1) : month+1;
}

function getDay() {
var now = new Date();
var day = now.getDate();
return day < 10 ? "0" + (day) : day;
}

var month = getMonth();
var day = getDay();
var year=new Date();
var address = "http://www.example.com/" + day + "_" + month + "_" + year.getFullYear() + ".html";

function iFrameWrite(id, url){
document.getElementById(id).src = url;
}

</script>


<iframe id="info" width="800px" height="800px"></iframe><br />

<a href="#" onclick="javascript:iFrameWrite('info', 'address')">Update the Iframe</a>


</html>

Gonna be asking a few Q's about a quiz javascript i'm making. I'm pretty new to JS.


I have this, a select box, in the body.

Code:

<div align="center"><center><p><strong>Your response:</strong> <select
          name="theresponse" size="1" onChange="responses()">
            <option value="-----">----</option>
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
          </select>

Then the relevant bit of script lower down

Code:

var loop=0
function responses(){
loop++
var temp2=document.instantquiz.theresponse
var temp3=temp2.options[temp2.selectedIndex].text
if (temp3!=solution[whichone]&&temp2.selectedIndex!=0)
document.instantquiz.thesolution.value="Sorry, the correct answer is "+solution[whichone];
else if(temp2.selectedIndex!=0)
document.instantquiz.thesolution.value=compliments[whichone];
}

I want to add 1 to 'loop' (so that people can't score twice etc.). The problem I have here is that loop just doesn't want to go up. I've tried all sorts of things like doing it under a new variable, and even putting a new function up, all in vain.

Why doesn't it work? =s

I am working on a commenting system and I was able to get it working by using 5 separate scripts, which are exactly the same, except for having slightly different variables. I had to repeat (copy & paste) the js function 5 times in the html <head>, and only allow for 5 posts per page. Which works fine. But, I thought maybe I could replace it with a single function that includes an iteration counter that changes the variables automatically?

Here's what I have now (below), if you think this can be easily turned into 1 function with iteration counter, please let me know how, as I am new to js. I already have the iteration working on the php end, but, I just couldn't figure out how to do it for the javascript.

Code:

<script type="text/javascript">
$(function() {
	$(".submit1").click(function() {
		var post_id = $("#post_id1").val();
		var member_id = $("#member_id").val();
		var comment = $("#comment1").val();
		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment 1');
		} else {
			$("#flash1").show();
			$("#flash1").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("li#update1").append(html);
				 	$("li#update1 li:last").fadeIn("3600");
					$("#flash1").hide();
					document.getElementById('post_id1').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment1').value='';
					$("#comment1").focus();
	  				$("#flash1").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>
<script type="text/javascript">
$(function() {
	$(".submit2").click(function() {
		var post_id = $("#post_id2").val();
		var member_id = $("#member_id").val();
		var comment = $("#comment2").val();
		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment 2');
		} else {
			$("#flash2").show();
			$("#flash2").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("li#update2").append(html);
				 	$("li#update2 li:last").fadeIn("3600");
					$("#flash2").hide();
					document.getElementById('post_id2').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment2').value='';
					$("#comment2").focus();
	  				$("#flash2").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>
<script type="text/javascript">
$(function() {
	$(".submit3").click(function() {
		var post_id = $("#post_id3").val();
		var member_id = $("#member_id").val();
		var comment = $("#comment3").val();
		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment 3');
		} else {
			$("#flash3").show();
			$("#flash3").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("li#update3").append(html);
				 	$("li#update3 li:last").fadeIn("3600");
					$("#flash3").hide();
					document.getElementById('post_id3').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment3').value='';
					$("#comment3").focus();
	  				$("#flash3").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>
<script type="text/javascript">
$(function() {
	$(".submit4").click(function() {
		var post_id = $("#post_id4").val();
		var member_id = $("#member_id").val();
		var comment = $("#comment4").val();
		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment 4');
		} else {
			$("#flash4").show();
			$("#flash4").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("li#update4").append(html);
				 	$("li#update4 li:last").fadeIn("3600");
					$("#flash3").hide();
					document.getElementById('post_id4').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment4').value='';
					$("#comment4").focus();
	  				$("#flash4").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>
<script type="text/javascript">
$(function() {
	$(".submit5").click(function() {
		var post_id = $("#post_id5").val();
		var member_id = $("#member_id").val();
		var comment = $("#comment5").val();
		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment 5');
		} else {
			$("#flash5").show();
			$("#flash5").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("li#update5").append(html);
				 	$("li#update5 li:last").fadeIn("3600");
					$("#flash5").hide();
					document.getElementById('post_id5').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment5').value='';
					$("#comment5").focus();
	  				$("#flash5").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>