JavaScript - How To Pass Javascript Variable To <input Type=hidden Value>
hi guyz i do have a problem in passing javascript variable to <input type=hidden value="">
here's my code: <?php while ($row = mysql_fetch_array($result)) { ?> <script type="text/javascript"> function viewcodec(){ var randomValueCodec = randomString(5, 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'); document.getElementById('commentMarkCodeCompCodec-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec; document.getElementById('commentMarkCodeComp-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec; } </script> <form action="" method="post" name="postsForms"> <div class="commentBox" align="right" id="commentBox-<?php echo $row['p_id'];?>" <?php echo (($comment_num_row) ? '' :'style="display:none"')?>> <input type=text id="commentMarkname-<?php echo $row['p_id'];?>" name="commentmarkname" class="commentMarkname" size="35" maxlength="20"> <textarea class="commentMark" id="commentMark-<?php echo $row['p_id'];?>" name="commentmark" cols="60"></textarea> <input type=text id="commentMarkcode-<?php echo $row['p_id'];?>" name="commentmarkcode" class="commentMarkcode" size="35" maxlength="20"> <br clear="all" /> <span id='commentMarkCodeCompCodec-<?php echo $row['p_id'];?>'><b><script type="text/javascript">viewcodec();</script></b></span> <input type="hidden" id="commentMarkCodeComp-<?php echo $row['p_id'];?>" name="commentMarkCodeComp" value=""> <br clear="all" /> <br clear="all" /> <a id="SubmitComment" style="float:right" class="small button comment"> Comment</a> </div> </form> <?php } ?> Similar TutorialsHi all, I'm having some trouble with the this... I have a PHP based calendar where the cells will change color depending on the number of clicks.. this all works fine, but is pointless if I can't send the outcome along in an email. I can do this with PHP but first need to get the values into a hidden field. This is what I have: Code: <script type="text/javascript"> function countClicks (obj){ if (!obj.count) { obj.count = 0; } obj.count++; if (obj.count > 4) {obj.count = 1}; if(obj.count == 1){ obj.style.color='#FFFFFF'; obj.style.backgroundColor='#66CC33'; obj.parentNode.style.backgroundColor='#66CC33'; document.getElementById("availability").value='Available'; } if (obj.count == 2){ obj.style.color='#FFFFFF'; obj.style.backgroundColor='#FF0000'; obj.parentNode.style.backgroundColor='#FF0000'; document.getElementById("availability").value='Not Available'; } if (obj.count == 3){ obj.style.color='#FFFFFF'; obj.style.backgroundColor='#FFCC33'; obj.parentNode.style.backgroundColor='#FFCC33'; document.getElementById("availability").value='Working'; } if (obj.count == 4){ obj.style.color='#000000'; obj.style.backgroundColor='#FFFFFF'; obj.parentNode.style.backgroundColor='#FFFFFF'; document.getElementById("availability").value='Not Set'; } } </script> and... Code: echo "<input type=\"hidden\" name=\"availability\" id=\"availability\" value=\"\">"; All I'm trying to do is populate value with either 'available', 'not available', 'working' or 'not set'... however, it is worth noting that each cell may have a different value, e.g. 1 cell might be working while the other is not available... so i need to pass the values of all the cells. Can anyone help me out here. Many thanks, Greens85 Hi guys, Let me explain simply what I do and what I'm trying to achieve: I got a couple of comboboxes were the user selects a series of numbers. Once a selection is made, the value is appended to an input box. The idea is that the appended values form a telephone number, or at least part of one, that will then be used to search trough a database to look for a matching number. The code below is what I have done so far: Code: <script type="text/javascript"> function displayIndicatif(){ var sel = document.getElementById("indicatif"); var text = sel.options[sel.selectedIndex].value; var out = document.getElementById("blabla"); out.value += text+"\n"; } function displayBloc(){ var sel1 = document.getElementById("bloc"); var text1 = sel1.options[sel1.selectedIndex].value; var out1 = document.getElementById("blabla"); out1.value += text1+"\n"; } </script> [...] <input type="text" id="blabla"/> [..] <select id="indicatif" onChange="displayIndicatif();"> <option value="021">021</option> <option value="022">022</option> <option value="031">031</option> </select> <select id="bloc" onChange="displayBloc();"> <option value="555" class="021">555</option> <option value="666" class="021">666</option> <option value="777" class="021">777</option> </select> Basically what happens now is this: combobox indicatif: 021 | 022 | 031 combobox bloc: 555 | 666 | 777 If I select "021" from indicatif, the script will append 021 to the input "blabla". The problem is, if I now select "022", the input will show "021022" instead of replacing the 021 with 022. What I would like is that, for each combobox, the script replaces the selected value with the new one instead of simply appending it, like instead of say 021022555666 it would show 021555 or 022666 or 021666 depending on what is selected...you get the idea? Is this doable? Needless to say I'm a total noob at javascript...I adapted the code I got now from some other guy who was trying to achieve almost the same thing and adapted it to my needs, or least, tried to, but now I'm stuck. Any help is appreciated! Thanks Hi! I have a javascript in the head of the document which has a variable named "ref2" ... ref2 is already working as I can see its value working in another function. I need to send this variable as the value of a hidden field in the form which is in the body of the document. This is my JavaScript Code: Code: function WriteContactFormStatement1 () { var ContactFormValue = ref2; document.write('<input type="hidden" name="UReferrersName" value="' + ContactFormValue + '" />'); } var WriteContactFormStatement = WriteContactFormStatement1 (); And at the end of my form, before the submit button, I have the following code: Code: <!-- START -- Javascript to print the statement for UReferrersName --> <script language="JavaScript" type="text/JavaScript"> //WriteContactFormStatement(); document.write (WriteContactFormStatement); </script> <!-- End -- Javascript to print the statement for UReferrersName --> When I execute the form, it doesn't work the way it should, plus, gives me a word "undefined" next to the "Submit" button ..... Please help !... - Xeirus. I'm trying to echo a php variable to my javascript function but nothing is happening Basically this php page displays bunch of records with a radio button next to each record. So when the radio button is clicked it would open that record in a new window that is clicked. Code: <input type='radio' name='option' value='$ctr' id='$ctr' onClick="edit_record('<?php echo $ctr ?>')"> <script type="text/javascript"> function edit_record(){ var value = arguements[0]; alert("record id: " + value); window.open("Edit.php", "Edit Record", "status=1, height=400, width=900, resizable=0"); } i am trying to pass the a variable "oneone" from a select box to a php page via java script. this is my html Code: <div id="wrapper"> <div id="content"> <form> Select a Customer: <select id="oneone" name="oneone" value=""> <option value="s_last">last</option> <option value="s_first ">first</option> <option value="c_city">cirty</option> </select> </form> <div> <form method="get" action="" class="asholder"> <small style="float:right">Hidden ID Field: <input type="text" id="testid" value="" style="font-size: 10px; width: 20px;" disabled="disabled" /></small> <label for="testinput">Person</label> <input style="width: 200px" type="text" id="testinput" value="" /> <input type="submit" value="submit" /> </form> </div> </div> this is my javascript Code: <script type="text/javascript"> var options = { script:"test.php?json=true&limit=6&", varname:"input", json:true, shownoresults:false, maxresults:6, callback: function (obj) { document.getElementById('testid').value = obj.id; } }; var as_json = new bsn.AutoSuggest('testinput', options); var optionsa = { script:"test.php?", varname:"one", json:false }; var as_jsona = new bsn.AutoSuggest('oneone', optionsa); </script> and the little part of my php Code: $input =$_GET['input']; $q =$_GET["one"]; can someone PLEASE tell my why i cant get this to work!!! I really thought this would work, a user goes to a page, selects a value from a select box then clicks a link to run a report using that hidden variable as a parameter. I am attempting to place the value in the URL to pass it. I'm sure the javascript is working, and maybe it's the HTML I've messed up - not sure. Here is the javascript (the alert does return the correct value): Code: function OnChangeDay() { //assign the day id to the hidden variable $day x=eval(document.getElementById("day_loc_id_select").value) if(x) { document.getElementById("test_day_id").value=x; } else { document.getElementById("test_day_id").value=0; } // test alert(document.getElementById("test_day_id").value) } Here is the calling HTML: Code: <input type="hidden" name="test_day" id="test_day_id" value=""> <select name="day_loc_id" id="day_loc_id_select" onchange="OnChangeDay()"> <option></option> <?= form_options($day_loc_options) ?> </select> And here is the HTML that should send the value, but I get day= (nothing) Code: <a href='/depts/edoptions/excel_extract.php?ex=2&day=<? echo $test_day ?>'>SLIP Data to Excel</a> Can anyone point out where I've messed up? Thanks hi guys! i have a problem in passing the variable to function ,the variable which is used in<td> as table data. Code: <td onmouseover="todayevent(somevarible);" onmouseout="hideevent(somevarible);" >' + somevarible+ '</td> i want to pass somevariable by function todayevent(). how can i do this. plz help me someone. Hello all I have a big problem I have my php like this Code: <? $codid=$_GET["cid"]; echo " <script> setTimeout(function() {CSelect();}, 100) ; </script> <div id=\"ReloadThis\"></div>"; ?> And my js funtion Code: function CSelect() { var $http, $self = arguments.callee; if (window.XMLHttpRequest) { $http = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { $http = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { $http = new ActiveXObject('Microsoft.XMLHTTP'); } } if ($http) { $http.onreadystatechange = function() { if (/4|^complete$/.test($http.readyState)) { document.getElementById('ReloadThis').innerHTML = $http.responseText; setTimeout(function(){$self();}, 10); } }; $http.open('GET', 'linii_c/select.php'+'?cod='+' PHP VARIABLE ', true); $http.send(null); } } who i can put my php variable into the funtion? Thanx in advence and sorry for my bad english! Here's something that I tested without the PHP and it worked ok. Now that I've introduced the PHP to the document it doesn't work. The PHP variable is not passing to Javascript properly. By use of some cleverly placed alert boxes, I figured out that the only thing that is getting passed forward is something called : "object HTML ImageElement" Specifically, I assign the element ID the unique ID number of the record in the SQL database. The problem isn't with the ID numbers themselves: They are alphanumeric and unique. I think it boils down to one of two lines of code. Either this isn't working (about line 12) Code: function expander(RecordID){ or perhaps it is when I am calling the function (about line 66): Code: echo "<img id='".$row['IDNumber']."' src=".$row['ImagePath']." width='5%' onMouseOver='expander(".$row['IDNumber'].");' onMouseOut='shrinker(".$row['IDNumber'].");'>";} The PHP works (I can get the images to appear, so the connection to SQL and such isn't a problem). I am sure most of the JavaScript is good, too, as I said I had it all working prior to dropping in the PHP. Since I am not going from JavaScript to PHP I don't think I need AJAX. I just need the PHP to pass to JavaScript. Any ideas? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="class.css" /> <script type = "text/javascript" language="javascript"> //<![CDATA[ var maxheight = 150; var countShrink = 1; function expander(RecordID){ var countGrow = 1; var pic = document.getElementById(RecordID); if(pic){ var imageh = pic.height; var imagew = pic.width; if(imageh<100){ countGrow++; imageh = imageh*1.2; imagew = imagew*1.2; pic.style.height = imageh + "px"; pic.style.width = imagew + "px"; var timer = window.setTimeout(function(){expander(RecordID);},2);} } else {alert("error on");} } function shrinker(RecordID){ var pic = document.getElementById(RecordID); if(pic){var counter = 1 var imageh = pic.height; var imagew = pic.width; if(imageh>20){ imageh = imageh/1.2; imagew = imagew/1.2; pic.style.height = imageh + "px"; pic.style.width = imagew + "px"; var timer = window.setTimeout(function(){shrinker(RecordID);},3);} } else {alert("error off");} } //]]> </script> </head> <body> <?php include('menuSub.html'); require_once('connect.php'); $idnum = 'phmdv06tbu'; //$q="SELECT * FROM art WHERE IDNumber = '".$idnum."'"; $q="SELECT * FROM art ORDER BY IDNumber LIMIT 4"; $r = @mysqli_query ($dbc, $q); echo "<div class='bodyContent'><div class='imageContent'>"; if($r){ while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)){ echo "<img id='".$row['IDNumber']."' src=".$row['ImagePath']." width='5%' onMouseOver='expander(".$row['IDNumber'].");' onMouseOut='shrinker(".$row['IDNumber'].");'>";} } else{ echo '<div class="bodyContent"> Error<div>'; } echo "</div></div>"; mysqli_close($dbc); ?> </body> </html> Hi, I wanted to know if there is way in Javascript to send a hidden variable to an external URL without actually submitting to the URL? Code below is what I intend to do. I want to use an image to do an onClick event and send the name to an external URL without actually doing a submit. Code: <td width="25"> </td> <input type="image" src="images/btn_Activate.gif" onClick="window.location.href='www.abc.com'"> <input type="hidden" name="name" value="<% = name %>"> </td> Thanks. Jeeten. Hi All I have this basic auto complete JavaScript that works well, but you need to hard code the web page. What I'm trying to do is send the "Autocomplete" variable data to the page using a perl script the working JavaScript code looks like this: var CustomArray=new Array('an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML'); Now the new code is: var CustomArray=new Array(Autocomplete); And the Perl script is sending back the data to the browser looking like this: var Autocomplete = 'an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML' I cant seem to get it to work rite full HTML code is below any help is appreciated. HTML: <html> <head> <script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script> <script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script> <script language="JavaScript1.2" type="text/javascript" src="http://www.ComicInvasion.com/cgi-bin/Autocomplete.pl"></script> <script> var CustomArray=new Array(Autocomplete); </script> </head> <body> <input type='text' style='font-family:verdana;width:300px;font-size:12px' id='ACMP' value=''/> <script> var obj = actb(document.getElementById('ACOMP'),CustomArray); </script> </body> </html> I have been staring at this code for too long and need some help. I want to pass a value received through the Url to another screen with new data by a form using the method="get". I have tried several different ways, my latest attempt was to use a hidden field hoping that would add to the url string but it isn't working. Thank you in advance Here is my code, its not pretty Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Field Location</title> <link rel="stylesheet" href="css/INTERPRETING_TR_CONTROL_ELECTRICAL_READINGS.css" type="text/css" media="screen" /> </head> <body> <div> <form id="form1" name="form1" method="get" action="./nameplateInformation.html"> <h3>Where is this field located?</h3> <select name="fieldValue" id="fieldValue" title="Where is this field located"> <option value="field1">Inlet Field</option> <option value="field2">Second Field</option> <option value="field3">Third Field</option> <option value="field4 ">Outlet Field</option> </select> <script type="text/javascript"> (function(){ // Import GET Vars :D document.getVars = []; var urlHalves = String(document.location).split('?'); if(urlHalves[1]){ var urlVars = urlHalves[1].split('&'); for(var i=0; i<=(urlVars.length); i++){ if(urlVars[i]){ var urlVarPair = urlVars[i].split('='); document.getVars[urlVarPair[0]] = urlVarPair[1]; } } } })(); prceptType = document.getVars.preceptType; document.write('<input type="hidden" name="preceptType" value='+preceptType+' />'); </script> <input type="submit" value="Submit" /> <input type="button" name="backButton" value="Back" onclick="parent.location = './welcome.html'" /> <input type="button" name="homeButton" value="Home" onclick="parent.location = '../index.html'" /></form> </div> </body> </html> Say I have a form so long that i want to group sections by category and have them expandable, using css to display:none or display:block these groups. If a user selects an option or two in one of these divs, then fills in some fields, then hides the div... is it going to cause problems when they submit the form if the div is hidden? Thanks! edit: let me ask another question too--what if we add validation into the mix. What happens if a field in a hidden div does not pass validation? Hi All, I'm pretty sure that this will need a javascript solution but could an admin please move it if I have placed it in the wrong section! Basically I am populating a span id with a number value... Code: <div id="behaviour_management" style="overflow: auto;"> Behaviour Management <br><br> <span id="behaviour_management_rating">4</span> What I need to do is grab that value... 4 in this case and pass it to a hidden field or via another method so that it because part of the form for processing on the next page. I've tried a couple of things but I am very shakey on javscript and have a very limited knowledge of it. I've basically tried (and managed) to assign the value to a javscript var by using getElementByID... Code: <script type="text/javascript"> function getRatings() { var s1 = document.getElementById('behaviour_management_rating').innerHTML; } </script> Code: <input type="image" name="submit" src="images/search_list_btn.png" onclick="getRatings()"/> my next plan was to pass that var to a hidden input at which point I am becoming stuck. Can someone tell me if this is even possible and if so perhaps they would be kind enough to point me in the right direction. Any help would be greatly appreciated.. Many thanks Greens85 I need to change input type="text" to input type="password" via JavaScript Code: <form id="login" action="#" method="post"> <input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" /> <input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; javascript:this.type='password'; javascript:this.focus();" value="Password" tabindex="2" /> <input type="submit" name="submit" value="sign in" tabindex="3" /> </form> This works in Firefox and Safari but not IE So then I tried this code Code: <script type="text/javascript"> function passit(ip){ var np=ip.cloneNode(true); np.type='password'; if(np.value!=ip.value) np.value=ip.value; ip.parentNode.replaceChild(np,ip); } </script> <form id="login" action="#" method="post"> <input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" /> <input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; passit(this.form[0]); javascript:this.focus();" value="Password" tabindex="2" /> <input type="submit" name="submit" value="sign in" tabindex="3" /> </form> This does what I need but turns the username type to password field not the password box Please can somone help! Hi! I am quite new to the world of JavaScript as I have done basic corse for it... and I have learnt that best way to understand it is to play around with it... but now I am stuck with on of the problem!! Problem: How can we assign text box input values by user to a variable and display that variable back on another element of the same HTML document(dynamically)... Conditions: The value has to be stored as a JavaScript variable only. No server-side script is to be used and has to be done locally. Please help! After searching the web most of the day, nothing has resolved this issue: Code: <!-- ALERT IS NEVER HIT --> <html> <input type="hidden" id="info" name="info" value="testInformation"/> <script type="text/javascript"> var me = document.getElementById('info').value; alert(me); </script> </html> Code: <!-- ALERT SAYS "null" --> <html> <input type="hidden" id="info" name="info" value="testInformation"/> <script type="text/javascript"> var me = document.getElementById('info'); alert(me); </script> </html> Code: <!-- WORKS GREAT, BUT I NEED THE INPUT FIELD HIDDEN --> <html> <input type="text" id="info" name="info" value="testInformation"/> <script type="text/javascript"> var me = document.getElementById('info').value; alert(me); </script> </html> Any idea how I can keep the input value "hidden" and have javascript still see the value? And yes, I've even tried using the "defer" method. Hi I have a form with some input tags, and when the user submit the form I which if a new hidden tag get submitted with the value the user did tip. I am thinking for doing that but not sure if it is the right thing : Code: <form method="POST" <input type="text" name="{actionForm.Name}" id="username"> <input type="password" name="{actionForm.Passwd}" id="password"> <input type="hidden" name="usernameh" value="document.getElementById('username')"> <input type="hidden" name="passwordh" value="document.getElementById('password')"> </form> Is it alright ? I mean when the user enter the username and password, the hidden tags should contain those two values that the user has made. I have a script where I move randomly users from one multiple selectfield to another and that part works perfectly, but... When I want to submit the form I don't get any users passed along, course they are not "selected". I have then read around on the net and I need to create an elemet with a hidden input field where all the randomly selected users is inserted to with comma separation, but dont know how?!?! This is what I got: Code: function randomusers(){ var given = 3, used = {}, randnum, opts = $('#select1 option'), olen = opts.length; function ran() { // generate a unique random number randnum = Math.floor(Math.random() * olen); return used['u'+randnum] ? ran() : randnum; } for (var i = 0; i < given; i++) { // get the correct quantity of randoms used['u'+ran()] = true; } opts.filter(function(index) { // remove all options that are not one of the randoms return !!used['u'+index]; }).appendTo('#select2'); } I have tryied to insert this: appendTo('#select2' + '<input type="hidden" name="test[]" value="" />'); but that didn't seem right... Please help :-) This was climbing up the tree strructure, where on top and only on very top is one input of type text Now I inserted (inside tree) some inputs of type hidden , which needs to be ignored while below while operates. How to do that ? Getting nowhere with this. Code: function doit(tmpObj) { while (!tmpObj.getElementsByTagName('input')[0]) { tmpObj.style.visibility = 'hidden'; tmpObj = tmpObj.parentNode; } ... |