JavaScript - Pop-up Window With Options To Populate The Textbox
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. 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 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. Hi, I have an input element (textbox) on a webpage, and capture the onblur event of the input (textbox) control to do validation. My problem is that when the page is closed or the user click on another window the onblur event of my textbox gets called too. I need the onblur event handler to be called only when the textbox loses focus b/c another element on the SAME webpage gets focus, but not when the user clicks on another window or closes the browser window. What is the right way to accomplish this? Thanks in advance, Richard 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! Okay, I'm having some trouble getting my head around how to do this.. Code: <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="Rhino">Rhino</option> <option value="Bird">Bird</option> <option value="Rooster">Rooster</option> </select> <select> <option value="0202A">Rhino - Text</option> <option value="0203A">Rhino - Text2</option> <option value="0204A">Bird - Text1</option> <option value="0205A">Bird - Text2</option> <option value="0202B">Rhino - Text</option> <option value="0204B">Rhino - Text2</option> <option value="0204C">Rooster - Text1</option> <option value="0205C">Rooster - Text2</option> <option value="0206C">Rooster - Text3</option> </select> So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down. Just can't figure this out. >.< i have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox Parent.html <HTML> <SCRIPT TYPE="text/javascript"> function sendTo() { window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+''); } </SCRIPT> <BODY > <form name="form"> <input type="text" value="" name="text1" id="pdetails1"> <input type="text" value="" name="text1" id="pdetails2"> </br> <input type="submit" value="submit" onClick="sendTo()"> </BODY> </HTML> child.html <html> <body> <form> <input type=text name="text5" value=""> <input type=submit name="submit"value="submit"> </form> </body> </html> Hello all, and thank you for your coments, I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height. As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it? Code: <html><head><title>Title</title><script languaje="javascript"> const c_ra=16/9; window.onresize = function WindowReSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE // myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' // myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } myWidth = Math.floor(myHeight*c_ra); window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler ! }; </script></head><body><p>Hello World</p></body></html> 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? Here is the program: http://www.1728.com/newwindow.htm Basically, I want to input a number in the input box, which assigns a number to the variable numval located at document.box1.b1. When clicking on the "new window" button, an alert displays the input box value, then another window opens and displays the integers 1 through 12 and the amount squared. I would like the new window to obtain the number from the previous window so that the new window will display integers (and their squares) from 1 to the value of numval. hello everybody i need your help and experience for having code to show ( overlay / modal window ) to the user when closing or navigating away from the page ( i want put in this window facebook share to make the user to share the page in his facebook ) , bytheway i wanna use it in my wordpress in every post could it be happen ? Thanks for helping 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 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> 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 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> I am looking to have a link open a closeable window that is contained within a browser window. If you click on the "sizing charts" link on this website, this is exactly what I am looking to do: http://www.bella.com/mapper.php?pageid=40 The window is contained within the current browser window, it can be dragged around, but not outside the parameters of the browser window. Is there a title for this technique that I can research? Not looking to waste anybodys time, but if I can get steered in the right direction it would be greatly appreciated. Thanks Hi All, I need to show/focus the parent window which is in back when click a link from child window in Chrome.This problem is in Chrome browser only. We have used the below code self.blur(); Window.opener.focus(); But this is not working in Google Chrome. Please suggest me some workaround to achieve this. Thanks in Advance Reply With Quote 12-19-2014, 09:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Window is not defined. window is. JavaScript (and the DOM) is case sensitive. You must pay attention to upper/lower case spelling, carefully. By the way, you shouldn't need the blur() call. If you focus on some window (any window) then any other focus should be lost. |