|
JavaScript - How To Get Info From A Textbox To Populate A Variable Within A Url
I have a page where a user can enter info into a text box named (usertext). Below the box I have a link that takes the user to another page.
This page is just a test page for proof of concept. I am wondering if there is a way that I can dynamically populate a variable located within the url of my link. The info that will populate the variable will be whatever the user types into the text box. For example my link will be <a href="nextpage.cfm?textvariable='#usertext#'> So when the user clicks this link, it goes to the next page already populated by the value of the info the user typed into the text box. I am thinking javascript will be involved, but I am not really sure. I am using coldfusion 8. Similar TutorialsHi, I have these two pages which I want to link...the index.html is the main page. I want the list.html page to pop up when names is clicked..Then I want to be able to select all or some of the name from the list.html page and inset into the textbox on the index.html page, separated by commas with the list.html closing on insert. hope my ambition is clear enough... index.html PHP Code: <body> Add contacts:<br /> <input name="" type="text" /><br /> <a href="list.html" target="_new">names </a> </body> list.html PHP Code: <body> Contact list:<br /> <form id="form1" name="form1" method="post" action=""> <p> <input type="checkbox" name="checkbox" id="checkbox" /> Paul<br /> <input type="checkbox" name="checkbox" id="checkbox" /> Matthew<br /> <input type="checkbox" name="checkbox" id="checkbox" /> Philip<br /> <input type="checkbox" name="checkbox" id="checkbox" /> Grant </p> <p> <input type="submit" name="button" id="button" value="Insert" /> <br /> </p> </form> <br /> </body> A simple solution will greatly be appreciated .... thanks Hi. I am not sure if this has been answered to other posts but I tried to search and I can't find the right answer for my problem. I am trying to learn javascript for my self and can't figure out my self. Actually this is the same like the pop-up calendar but the only difference is I don't want numbers, I need a list of options so user can choose and when they select, it will transfer to the textbox right away like the calendar. I have a form and trying to use a pop-up window to select an option then transfer the option selected to show on the textbox. I have 10 textboxes and all of them has a "Select" button to pop-up the option list. BTW, the "SELECT" button will populate the same option list. Here is my html code: Code: <select id="droplist" name="droplist" size="1" >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($prompt == $form['droplist']); ?> value="<?php echo $prompt; ?>" style="width:500"><?php safeEcho($prompt); ?> </option>
<?php endforeach; ?>
</select>
below is my array: PHP Code: <?php $designation_list = array( "00111" =>"Aloha of the Pacific/Transfer Assistance Program for High Income Students", "71122" =>"Aloha", "71231" =>"Free Housing Information", "71232" => "Drama Queen and King", "98765" => "Aloha Boy Home of the Land", "12345" => "Aloha Home", ); I wanted to use the option list over and over again for the 10 textboxes. Is that possible? Below is my sample code but didn't work. Please help.... Code: //javascript
var testpopup5 = new PopupWindow("testdiv5");
testpopup5.offsetX=-20;
testpopup5.offsetY=20;
testpopup5.autoHide();
var testpopup5input=null;
testpopup5.populate('<select>Select: <select name="sel" id="sel" onChange="testpopup5pick(this.options[this.selectedIndex].value);"><OPTION VALUE="A">A</option>
<OPTION VALUE="B">B</option><OPTION VALUE="C">C</option></SELECT>');
function test5popupactivate(obj,anchor) {
testpopup5input=obj;
testpopup5.showPopup(anchor);
}
function testpopup5pick(val) {
testpopup5input.value = val;
testpopup5.hidePopup();
}
//html
<INPUT NAME="test5" SIZE=30 id="I">
<A HREF="#sel" onClick="test5popupactivate(document.getElementById['I'].test5,'anchor5');return false;" NAME="anchor5" ID="anchor5">Select</A>
<DIV ID="testdiv5" STYLE="position:absolute;visibility:hidden;background-color:#CCCCCC;width:200px;height:50px;"></DIV>
As you can see I get this code from somewhere else but it doesn't work on me. Is there an easy way to do it? Please help. Thanks in advance. Hi, I currently have a asp.NET page which has a textbox with the ID: "txtbox1" I would like javascript to store the data entered into txtbox1 into a var. I have tried using var jVarName; jVarName = '<%#aVarName%>'; but so far it hasnt worked. Any suggestions would be appreciated ^^ how can i pass the var to textboxes Code:
var win = 0;
var loss = 0;
var draw = 0;
if (c == u) {
draw++;
return "It's a draw";
}
else if ((c == "Fire") && (u == "Air")) {
loss++;
return "You Lose, Fire beats Air!";
}
else if ((c == "Fire") && (u == "Earth")) {
draw++;
return "It's a draw!";
}
else if ((c == "Fire") && (u == "Water")) {
win++;
return "You Win, Fire is beaten by Water!";
}
<tr><td><input type=text size=5 name=w ></td><td>win</td></tr>
<tr><td><input type=text size=5 name=l></td><td>loss</td></tr>
<tr><td><input type=text size=5 name=d></td><td>draw</td></tr>
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! Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! Resolution if interested: Code: <head>
<title>Lab8</title>
<script src="arrays.js" type="text/javascript"></script>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function amountTotal() {
var totalDonations = 0;
for (var i = 0; i < amount.length; i++) {
totalDonations += amount[i];
}
return totalDonations;
}
</script>
</head>
<body>
<table id="donations" rules="rows">
<tr>
<th>
Date
</th>
<th>
Name
</th>
<th>
Amount
</th>
<th>
Address
</th>
</tr>
<script type="text/javascript">
for (var i = 0; i < amount.length; i++) {
if (i % 2 == 0) document.write("<tr>")
else document.write("<tr class='yellowrow'>");
document.write("<td>" + date[i] + "</td>");
document.write("<td>" + firstName[i] + lastName[i] + "</td>");
document.write("<td>" + amount[i] + "</td>");
document.write("<td>" + street[i] + "<br />" + city[i] + "," + " " + state[i] + " " + zip[i] + "</td>");
}
document.write("</tr>")
</script>
</table>
<table id="totalsTable">
<tr>
<th colspan="2">
Summary
</th>
</tr>
<tr>
<td>
Contributions
</td>
<td class="amt">
<script type="text/javascript">
document.write(amount.length);
</script>
</td>
</tr>
<tr>
<td>
Amount
</td>
<td class="amt">$
<script type="text/javascript">
var totalTotal = amountTotal();
document.write(totalTotal);
</script>
</td>
</tr>
</table>
</body>
</html>
I have a seperate .js sheet with some arrays on them (firstName, lastName, date, amount, city, state, zip) and I am trying to populate a table with these indexes. The 'yellowrow' highlights everyother row which is called out in my css sheet. My header rows fill in but not the rest. Here is the link for the site actually posted on the web. Code: <body>
<table id="donations" rules="rows">
<tr>
<th>Date</th>
<th>Name</th>
<th>Amount</th>
<th>Address</th>
</tr>
<script type="text/javascript">
for (var i = 0; i < amount.length; i++) {
if (i % 2 == 0) document.write("<tr>")
else document.write("<tr class='yellowrow'>");
document.write("<td>" + date(i) + "</td>");
document.write("<td>" + firstName(i) + lastName(i) + "</td>");
document.write("<td>" + amount(i) + "</td>");
document.write("<td>" + "<br />" + city(i) + "," + state(i) + zip(i) + "</td>");
}
document.write("</tr>")
</script>
</table>
</body>
I am trying to populate a listbox using Javascript. The listbox is populated using the xml response from ajax request. Below is the code used for the same Code: var xmlDoc = xmlhttp.responseXML;
for (var i = 0; i < xmlDoc.getElementsByTagName("id").length; i++) {
traderlists.add(new Option(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue, xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue));
}
This works fine for me. But i am facing performance issue here. some ajax requests retrieves xmls with around 11,000 nodes and this takes too much of time to populate the listbox. Can anyone please advice me with an better solution? I have a check box right now that calls an onClick event. Here is the Input: Code: <input name="usePad" type="checkbox" value="usePad" id="usePad" onclick="showBind('padShow','padOk')" />
Here is the Script: Code: var xmlhttpshowBind;
var showBindDiv;
function showBind(BindPage,BindDiv) {
xmlhttpshowBind=GetXmlHttpObject();
if (xmlhttpshowBind==null) {
alert ("Browser does not support HTTP Request");
return; }
var url="/scripts/"+BindPage+".php";
showBindDiv=BindDiv;
xmlhttpshowBind.onreadystatechange=showBindGet;
xmlhttpshowBind.open("GET",url,true);
xmlhttpshowBind.send(null); }
function showBindGet() {
if (xmlhttpshowBind.readyState==4) {
document.getElementById(showBindDiv).innerHTML=xmlhttpshowBind.responseText; } }
It works great to fill the div called for, but I would like it to remove the div contents if it's unchecked, I'm not sure how to do this?? Any help would be appreciated! Thank you in advance! <!-- *** NEED HELP PASSING VALUE id TO POPULATE SUBRECORDS *** --> <!-- *** See line #51 to #55 *** --> <?php session_start(); ob_start(); if($_SESSION[userdetails]->role != "Admin") { die("Access Denied!"); } require_once("includes/connect.php"); // Check if he has the right info. $sql = sprintf("SELECT * FROM members ORDER BY username ASC", $_SESSION[userdetails]->id); $query = mysql_query($sql); // You are now connected ?> <head> <html> <head> <title>Split ListBox Text To Text Boxes</title> <script type="text/javascript"> <!-- archaic format: language="javascript" --> function SplitText (info) { if (info == '') { return; } var tarr = info.split(","); document.getElementById('tBox1').value = tarr[0]; document.getElementById('tBox2').value = tarr[1]; document.getElementById('tBox3').value = tarr[2]; document.getElementById('tBox4').value = tarr[3]; } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <p><select name="Groups" style="width: 176; height: 19; border: 1px solid #C0C0C0 ; font-size: 11px; font-family:Arial" size="1" onChange="SplitText(this.value)"> <option>===Select Group===</option> <?php $sql1 = mysql_query("SELECT * FROM qw_groups"); while($r1=mysql_fetch_assoc($sql1)){ $f1 = $r1[id]; $f2 = $r1[GroupName]; echo "<option value='$f1,$f2,,'>$f2</option>"; } echo "</select>"; ?> <p><select name="GroupItems" style="width: 176; height: 19; border: 1px solid #C0C0C0 ; font-size: 11px; font-family:Arial" size="1" onChange="SplitText(this.value)"> <option>===Select Group Item===</option> <?php // **** IS IT POSSIBLE TO PASS THE VALUE "$f1" FROM GROUPS TO GROUPITEMS **** // **** I WANT TO POPULATE THE SECOND DROPDOWN LIST WITH SUB-RECORDS WITHOUT SUBMIT /POST /REFRESH /OR RELOAD **** // WHERE id = $f1 ?? maybe some java code id = $val onChange ?? $sql2 = mysql_query("SELECT * FROM qw_groupitems WHERE id = $f1"); while($r2=mysql_fetch_assoc($sql2)){ $f3 = $r2[Subid]; $f4 = $r2[GroupItem]; echo "<option value='$f1,$f2,$f3,$f4'>$f4</option>"; } echo "</select>"; ?> </p> <!-- Input selected data from listBox --> <p style="margin: 2px"> <input type="text" name="textbox1" id="tBox1" value=""><br> <input type="text" name="textbox2" id="tBox2" value=""><br> <input type="text" name="textbox3" id="tBox3" value=""><br> <input type="text" name="textbox4" id="tBox4" value=""><br> </p> </form> </body> </html> hello i am trying to fire a form which after the call to retrieve the data, populate the form with the data. i can see from firebug that the json data is being captured, but cannot seem to be able to populate the form with it. i am using a jquery plugin facybox, that opens the form, but the fields are blank. i have attached my code and would be grateful if someone could tell me where i am going wrong? many thanks js code Code: <script type="text/javascript">
function edit(com, grid) {
if (com == 'Edit') {
if($('.trSelected').length>0){
if($('.trSelected').length>1){
alert('Please select just one row');
return;
}
var items = $('.trSelected');
var itemlist ='';
for(i=0;i<items.length;i++){
itemlist+= items[i].id.substr(3);
}
$.ajax({
type: "POST",
dataType: "json",
url: "tempcontact.php",
data: "items="+itemlist,
success: function(data){
document.getElementById('id').value = data.id;
document.getElementById('email').value = data.email;
$("#flex1").flexReload();
}
});
/*and so on then you can call facybox*/
jQuery.facybox({ div: "#editform"});
} else{
alert('Please select a row to edit.');
}
}
}
</script>
form Code: <div id="editform" style="display:none;"> <form action="conedit.php" method="post" class="webform"> <fieldset> <legend><span>Update Contact</span></legend> <br /> <div id="dataText">Please delete the fields if there is no data 'No data to display'.</div> <label for="id">ID:</label> <input id="id" name="id" class="text" type="text" value="" /> <label for="name">Full Name:</label> <input id="name" name="name" class="text" type="text" value="" /> <label for="email">Email address:</label> <input id="email" name="email" class="text" type="text" value="" /> <label for="phone">Telephone:</label> <input id="phone" name="phone" class="text" type="text" value="" /> <label for="mobile">Mobile:</label> <input id="mobile" name="mobile" class="text" type="text" value="" /> <label for="fax">Fax:</label> <input id="fax" name="fax" class="text" type="text" value="" /> <label for="notes">Notes:</label> <textarea name="notes" cols="25" rows="3"></textarea> </fieldset> <input class="submit" type="submit" name="submit" value="Update" /> </form> </div> Hello guys, How to populate array from dropdownlist? I've tried like this var array = new array(); var d = document.getElementById("DropDownListl"); for (var i = 0; i < d.options.length; i++) { array[i] = d.options[i].value; } Thank you I really need help with this. I really don't know how to make this work. I need to populate a drop down menu with a value passed through the browser if it's passed. so the browser URL will look like: domain.com/?referer=YellowPagesOnline I need to capture the referer value from the browser store it into a cookie. If the cookie is set and then populate the drop down on the page with the cookie. If it's not set then a list of sources should appear. So I already have the code to grab the string and store it in a cookie but I'm not sure how to do the initialization of the drop down with the cookie value. This is what I have... Code: <script>
//Get the referer string out of the URL
function getQuerystring(key, default_)
{
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
return default_;
else
return qs[1];
}
//Set the cookie for 30 days
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
/* expire.setTime(today.getTime() + 3600000*24*nDays);*/
expire.setTime(today.getTime() + (1000 * 60 * 60 * 24 * 30));
document.cookie = cookieName+"="+escape(cookieValue)
+ ";expires="+expire.toGMTString();
}
//Put the cookie on the user's computer
function putcookie()
{
var val = getQuerystring('referer');
if(val !=""){
if (document.cookie.length == 0)
{
SetCookie('referer', val, 1);
alert(val);
}
}
alert(document.cookie);
}
putcookie();
getCookie(name);
//If there is a cookie then get the cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
if(document.SECatJax.referer.length > 0)
{
document.SECatJax.referer.value = unescape(document.cookie.substring(c_start,c_end));
return false;
}
alert(document.cookie);
}
}
document.SECatJax.referer.value = 'Website';
}
The dropdown to appear if there isn't a cookie is Code: <select name="source_code" size="1" id="source_code" class="select_2" style="display:none"> <option value="" selected="selected">--</option> <option value="Direct Mail">Direct Mail</option> <option value="High School Presentation">High School Presentation</option> <option value="Search Engine">Internet Search</option> <option value="Newspaper">Newspaper</option> <option value="Poster">Poster</option> <option value="Radio">Radio</option> <option value="Referral">Referral</option> <option value="TV">TV</option> <option value="Yellow Pages">Yellow Pages</option> </select> The drop down to appear if there is a cookie is[CODE]<select name="source_code2" size="1" id="source_code2" class="select_2" style="display:none"> <option value="YellowPagesOnline" selected="selected">YellowPagesOnline</option> </select>[CODE] Can someone help me with this please? Thanks. I have a div what will contain a various number on images and i need to put all their src's into an array. Is this doable? Heres the code Code: <div id="imageHolder">
<!-- ONLY CHANGE THE SRC, NOTHING ELSE -->
<div style="width:770px;height:400px;overflow-y:auto;margin-bottom:5px;">
<img src="http://wholesalepadlocks.co.uk/ebayImages/AU080.JPG" alt="" width="750" id="mainImage"/><br /><br />
</div>
<img src="http://wholesalepadlocks.co.uk/ebayImages/au080a.jpg" alt="" width="240" height="120" onmouseover="Images = this.src;alert(Images)" />
<img src="http://wholesalepadlocks.co.uk/ebayImages/au080b.jpg" alt="" width="240" height="120" onmouseover="Images = this.src;alert(Images)"/>
<img src="http://wholesalepadlocks.co.uk/ebayImages/AU080.JPG" alt="" width="240" height="120" onmouseover="Images = this.src;alert(Images)"/>
</div>Ignore the onmouseover code i was attempting to do this but so far no luck :P
Hi guys, I am facing the above problem for a chatroom app that I am making. People will enter and exit the room any time they want, so i need a member list that updates itself to reflect this on the screen of all users that are in the chatroom. What i have thought of, is to have JS call a PHP function on specific intervals, and that PHP function will retrieve user data from a database and pass it to JS to display on the list. Is this method advisable? Are there any more suitable ways of doing this? I am thinking of applying the same theory for displaying and retrieving chat messages, but i get the feeling that something's missing for this, or maybe this method is not right for displaying messages. Hi, How can I auto populate the data by dropdown selected? and my dropdown result already appear as well, the code as following: PHP Code: <?php echo '<tr> <td>'.$customer_data.'</td> <td><select name="customer_id">'; foreach ($customers as $customer) { if ($customer['customer_id'] == $customer_id) { echo '<option value="'.$customer['customer_id'].'" selected="selected">'.$customer['name'].'</option>'; } else { echo '<option value="'.$customer['customer_id'].'">'.$customer['name'].'</option>'; } } echo '</select> </td> </tr>'; ?> and the result of dropdown above listed as admin customer1 FREE loaded from following db PHP Code: INSERT INTO `my_customer` (`customer_id`, `name`, `firstname`, `lastname`) VALUES (8, 'admin', '', ''), (6, 'customer1', 'ok', ''), (7, 'FREE', 'marj', 'om'); so whenever dropdown selected i want the all data below: PHP Code: <tr> <td><?php echo $firstname; ?></td> <td><?php echo $lastname; ?></td> </tr> also auto populate, it seem need javascript/ajax/jquery to fixed it, I was Wondering if someone could help me, and thanks in advance Hi, I'm working on a menu update form. I'm pulling the existing data from mysql and posting it into a form, using php. This works fine. But now I want the user to be able to modify the data and perform and update query to the database with the changes. I cannot figure out how to get the modified php text box data into my html form text boxes so I can run an update query. I would be ok with a button that transfers the php text box data to the html form data. Hope this is clear what I'm trying to do, seems simple enough, but I can't figure it out. Thanks in advance for any ideas. I have a web form that requests a user full name and email address. What I would like to do is when the user fills in the full name in one input box, I would like to take the full name and populate the email address field as such. "first.last@allstate.com". So pretty much split the full name and popluate email address field "first.last@allstate.com". Tracy |
|||||||