|
JavaScript - Pull Down Replaced By Text Field When Selecting Other
Hey all,
Objective: - when you select other the pull down menu is replaced by the text field. Currently: - Gotten it to the level of when you select the other the text field appears. Question: - HOw can I modify the code so when I select the other menu option from the pull down menu and it replaced by the text field? Quote: <script type="text/javascript"> function togglefield(val) { var o = document.getElementById('other'); (val == 'Other')? o.style.display = 'block' : o.style.display = 'none'; } </script> and the form: <form action="" method="post"> <select name="sel" id="sel" onChange="togglefield(this.value);"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="Other">Other</option> </select> <input type="text" name="other" id="other" style="display: none;"> </form> Similar TutorialsIn this Form field, when I select the field box that shows "Enter Text" I'd like it so the text disappears, so I can begin typing in a cleared field box. This is the line of code, I believe, that has to do with that function. Any help with having the Enter Text clear upon selecting, will be appreciated: Code: <input autocomplete="off" id="keyword" name="keyword" value="Enter Text" onclick="clickclear(this, 'Enter Text')" onblur="clickrecall(this,'Enter Text')" /> Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi all I have relatively easy task I need to accomplish but as per usual I have very little idea of how to do it. I have done a google search to no avail. Basically I need to: 1. Pull a value from inside a div Code: <div id="number">(invoice #1017)</span> 2. Populate a form input field with that value. Does this make sense? If not let me know if you need any more info. Thanks Hello all. I have created a snippet of javascript code that will do the following: 1. read the window URL 2. depending on the window URL, a word will be placed into a hidden form field. 3. Person submits form...etc., etc. Here is what I have. Let's say that I have a single landing page with a simple form on it. I would like to reference the referred URL by pulling a part of the window URL into a hidden field of the form. Let's say the three URLs a http://www.whatever.com/index.htm?id=ref1 http://www.whatever.com/index.htm?id=ref2 http://www.whatever.com/index.htm?id=ref3 I have created a javascript that takes the exact URL and check for equality. If the URL is equal, it will place the corresponding id into the hidden form field. See my code below. Code: <script type="text/javascript">
var lead_source = window.location.href
{
if (lead_source == "http://www.whatever.com/index.htm?id=ref1")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref1'>");
}
else if (lead_source == "http://www.whatever.com/index.htm?id=ref2")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref2'>");
}
else if (lead_source == "http://www.whatever.com/index.htm?id=ref3")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref3'>");
}
}
</script>
What I am looking to do is modify the code to only look at the "id" variable, not the entire URL. That way, if I add any additional items to the URL I will not have to change the code. I guess I am looking for an extra step of parsing the URL...maybe. Thanks for your help Is there a way to pull a text off a certain div on a page, and put it into a javascript string? I'm certain that the field has a particular name and id that I can use, if need be.
I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help Hi, I'm hoping this will be an easy one for you experts out there. I am working on a convention registration form. What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field. If the text in the NAME field is deleted, the "50.00" should also be deleted. Does anyone have a script that does this? Thanks! Hello guys, This problem I've had for nearly 2 weeks now because of it I cannot progress any deeper with my project. Here is a live demo http://dcourt.zxq.net/dcourt/ try to login pkedpker and password doesn't matter then click on the new image that pops out.. press Done now you will be at stat setting window.. which you will see doesn't work.. but if you run statsetting window instead of login.php it will work perfectly whats wrong? I know it's not a <form> error.. because form is there in the index I have. PHP Code: <?php session_start(); ini_set('display_errors', '1'); //show errors. //include_once 'functions.php'; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript"> function updateUI(str) { var ajaxObj = new XMLHttp(); var url = 'ajax.php'; var method = 'POST'; var params = 'page='+str; makeRequest(ajaxObj, method, url, params, 'maincontent'); ajaxObj = null; } </script> </head> <body> <table border="1" align="center" width="440" height="330"> <tr> <th scope="col"> <form name="UI" id="UI" action="" onsubmit="return false;"> <div id="maincontent"> <?php include 'ajax/login.php'; ?> </div> </form> </th> </tr> </table> </body> </html> ajax.php is simply the data outputter. PHP Code: <?php $page = (isset($_POST['page']) ? $_POST['page'] : ''); if ($page == "login") { include 'ajax/login.php'; } elseif ($page == "dologin") { include 'ajax/dologin.php'; } elseif ($page == "startingstats") { include 'ajax/startingstats.php'; } elseif ($page == "rankings") { include 'ajax/rankings.php'; } elseif ($page == "updates") { include 'ajax/updates.php'; } elseif ($page == "howto") { include 'ajax/howto.php'; } else { include 'ajax/login.php'; } ?> now the ajax folder has all the scripts that get outputted.. lets say the login.php page in ajax folder for now PHP Code: <script type="text/javascript"> <!-- var ubool = 0; var pbool = 0; var jsuser = ''; var jspw = ''; function userCheck(user) { jsuser = user; ubool = (user.length > 0) ? 1 : 0; if(ubool && pbool) document.getElementById("login").style.visibility = "visible"; else document.getElementById("login").style.visibility = "hidden"; } function pwCheck(pass) { jspw = pass; pbool = (pass.length > 0) ? 1 : 0; if(ubool && pbool) document.getElementById("login").style.visibility = "visible"; else document.getElementById("login").style.visibility = "hidden"; } function doLogin() { var ajaxObj = new XMLHttp(); var url = 'ajax.php'; var method = 'POST'; var params = 'page=dologin&user='+jsuser+'&pw='+jspw; makeRequest(ajaxObj, method, url, params, 'maincontent'); ajaxObj = null; } //--> </script> <div style="position: fixed; top: 222px; margin-left: 120px; color: white;">Welcome Kongregate Name</div> <div style="position: fixed; top: 252px; margin-left: 2px; color: white;">Hero Name:</div> <div style="position: fixed; top: 282px; margin-left: 2px; color: white;">Password:</div> <div style="position: fixed; top: 252px; margin-left: 90px;"><input type="text" name="user" id="user" size="12" maxlength="20" value="" onInput="javascript:userCheck(this.value)" onpropertychange="javascript:userCheck(this.value)" /></div> <div style="position: fixed; top: 282px; margin-left: 90px;"><input type="text" name="pw" id="pw" size="12" maxlength="20" value="" onInput="javascript:pwCheck(this.value)" onpropertychange="javascript:pwCheck(this.value)" /></div> <div id="login" style="position: fixed; top: 252px; margin-left: 210px; visibility: hidden;"><input type="image" src="images/quest.jpg" width="96" height="64" onClick="javascript:doLogin()" /></div> <div style="position: fixed; top: 252px; margin-left: 334px;"><input type="submit" name="rankings" value="Ranking List" onClick="javascript:updateUI('rankings')"></div> <div style="position: fixed; top: 282px; margin-left: 357px;""><input type="submit" name="updates" value="Updates" onClick="javascript:updateUI('updates')"></div> <div style="position: fixed; top: 312px; margin-left: 300px;"><input type="submit" name="howto" value="How to get started" onClick="javascript:updateUI('howto')"></div> <img src="images/splash.jpg" width="440" height="330" /> yes it has no forms in the page above so javascript shouldn't function right? Wrong look at index.php it has a <form> wrapper that wraps the <div> which gets updated by the ajax.php outputter that outputs ajax folder pages. Note okay that works.. the javascript functions on it all wonderfully. Now in this ajax/login.php thats loaded if you login with lets say pkedpker it checks it using index.php's javascript ajax call to ajax.php which calls dologin.php page in ajax folder. ajax/dologin.php is simply PHP Code: <?php //if(isset($_POST['user']) &&isset($_POST['pw'])) { // echo "user and password both set"; if($_POST['user'] == "pkedpker") { //and IS ALSO NEWBIE! STATING SCREEN COMES NEXT ?> <div style="background-color: #000000; color: #FFFFFF; font-weight: bold; width: 440px; height: 330px;"> A young hero arises from the plebium masses! <div style="position: fixed; top: 312px; margin-left: 300px;"><input type="submit" name="login" value="Done" onclick="javascript:updateUI('startingstats')"></div> </div> <?php } elseif($_POST['user'] != "pkedpker") { ?> <div style="background-color: #000000; color: #FFFFFF; font-weight: bold; width: 440px; height: 330px;"> Error: Hero Not Found [ <?php echo $_POST['user'] ?> ] <div style="position: fixed; top: 312px; margin-left: 300px;"><input type="submit" name="login" value="Done" onclick="javascript:updateUI('login')"></div> </div> <?php } else { ?> <div style="background-color: #000000; color: #FFFFFF; font-weight: bold; width: 440px; height: 330px;"> Error/Hack Attempt?: Username or password were found to be empty! <div style="position: fixed; top: 312px; margin-left: 300px;"><input type="submit" name="login" value="Done" onclick="javascript:updateUI('login')"></div> </div> <?php } ?> Nothing important just a few little tests I've setup.. the test that is interesting me is the 'A young hero arises' which has a ajax call to index.php that calls ajax.php which then includes a page from ajax folder called startingstats This is the ajax/startingstats.php code PHP Code: <script type="text/javascript"> <!-- var buildPts = 20; function buildPointsCheck(skill, direction, isMoney) { if(isMoney === 0) { if(direction == 1 && buildPts > 0) { buildPts--; skill.value++; } else if(direction === 0 && skill.value > 0) { buildPts++; skill.value--; } } else { var curMoney = (skill.value >= 25) ? skill.value / 25 : 0; if(direction == 1 && buildPts > 0) { buildPts--; curMoney++; } else if(direction === 0 && curMoney > 0) { buildPts++; curMoney--; } skill.value = (curMoney * 25); } if(buildPts === 0) { document.getElementById("login").style.visibility = "visible"; } else { document.getElementById("login").style.visibility = "hidden"; } document.getElementById("buildpoints").value = buildPts; } function buildOptionsCheck(buildOption) { if(buildOption.checked) { if(buildOption.name == "wizard" && buildPts >= 9) { buildPts-=9; } else if(buildOption.name == "trader" && buildPts >= 10) { buildPts-=10; } else if(buildOption.name == "warrior" && buildPts >= 8) { buildPts-=8; } else if(buildOption.name == "sage" && buildPts >= 12) { buildPts-=12; } else { buildOption.checked = false; } } else { if(buildOption.name == "wizard") { buildPts+=9; } else if(buildOption.name == "trader") { buildPts+=10; } else if(buildOption.name == "warrior") { buildPts+=8; } else if(buildOption.name == "sage") { buildPts+=12; } } if(buildPts === 0) { document.getElementById("login").style.visibility = "visible"; } else { document.getElementById("login").style.visibility = "hidden"; } document.getElementById("buildpoints").value = buildPts; } function setStats() { var ajaxObj = new XMLHttp(); var url = 'ajax.php'; var method = 'POST'; var params = 'page=startingstats&guts='+document.getElementByName("guts").value+'&wits='+document.getElementByName("wits").value+'&charm='+document.getElementByName("charm").value+'&money='+document.getElementByName("money").value+'&wizard='+document.getElementByName("wizard").value+'&trader='+document.getElementByName("trader").value+'&warrior='+document.getElementByName("warrior").value+'&sage='+document.getElementByName("sage").value; makeRequest(ajaxObj, method, url, params, 'maincontent'); ajaxObj = null; } //--> </script> <div style="background-color: #0000FF; color: #FFFFFF; font-weight: bold; width: 440px; height: 330px;"> <table border="1" align="center"> <th colspan="3"><span style="color: #00FF00; font-weight: bold;">stepansky</span></th> <tr> <td> <div align="center"><span style="color: #FFFF00; font-weight: bold;">Guts</span><br /> <table> <tr> <td><input name="button" type="button" value="+" onClick="javascript:buildPointsCheck(this.form.guts, 1, 0)" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;"></td> <td rowspan=2><input type="text" name="guts" value="4" size="5"></td> </tr> <tr> <td><input name="button2" type="button" value="-" onClick="javascript:buildPointsCheck(this.form.guts, 0, 0)" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;"></td> </tr> </table> </div> </td> <td> <div align="center"><span style="color: #FFFF00; font-weight: bold;">Wits</span><br /> <table> <tr> <td><input name="button" type="button" value="+" onClick="javascript:buildPointsCheck(this.form.wits, 1, 0)" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;"></td> <td rowspan=2><input type="text" name="wits" value="4" size="5"></td> </tr> <tr> <td><input name="button2" type="button" value="-" onClick="javascript:buildPointsCheck(this.form.wits, 0, 0)" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;"></td> </tr> </table> </div> </td> <td> <div align="center"><span style="color: #FFFF00; font-weight: bold;">Charm</span><br /> <table> <tr> <td><input name="button" type="button" value="+" onClick="javascript:buildPointsCheck(this.form.charm, 1, 0)" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;"></td> <td rowspan=2><input type="text" name="charm" value="4" size="5"></td> </tr> <tr> <td><input name="button2" type="button" value="-" onClick="javascript:buildPointsCheck(this.form.charm, 0, 0)" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;"></td> </tr> </table> </div> </td> </tr> <tr> <td colspan="2"> <div align="center"><span style="color: #FFFF00; font-weight: bold;">Options</span> <table width="100%" border="0"> <tr> <td><input type="checkbox" name="wizard" value="" onClick="javascript:buildOptionsCheck(this.form.wizard)"> Wizard 9p</td> <td><input type="checkbox" name="trader" value="" onClick="javascript:buildOptionsCheck(this.form.trader)"> Trader 10p</td> </tr> <tr> <td><input type="checkbox" name="warrior" value="" onClick="javascript:buildOptionsCheck(this.form.warrior)"> Warrior 8p</td> <td><input type="checkbox" name="sage" value="" onClick="javascript:buildOptionsCheck(this.form.sage)"> Sage 12p</td> </tr> </table> </div> </td> <td> <div align="center"><span style="color: #FFFF00; font-weight: bold;">Money(1p=$25)</span><br /> <table> <tr> <td><input name="button" type="button" value="+" onClick="javascript:buildPointsCheck(this.form.money, 1, 1)" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;"></td> <td rowspan=2><input type="text" name="money" value="25" size="7"></td> </tr> <tr> <td><input name="button2" type="button" value="-" onClick="javascript:buildPointsCheck(this.form.money, 0, 1)" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;"></td> </tr> </table> </div> </td> </tr> <tr> <td> <div align="center"><span style="color: #FFFF00; font-weight: bold;">Build Points left</span><br /> <input type="text" id="buildpoints" name="buildpoints" value="20" size="5"> </div> </td> <td> <div id="login" style="visibility: hidden;"> <input type="image" src="images/quest.jpg" width="96" height="64" onClick="javascript:setStats()" /> </div> </td> <td> <center> <input type="image" onClick="javascript:updateUI('login')" src="images/exit.jpg" /> </cener> </td> </tr> </table> </div> Now just including ajax/startingstats.php in index.php instead ajax/login.php IT FUNCTIONS perfectly!. Now if I let it all run normal using dologin.php to make the startingstats.php page load up which it does.. the javascript doesn't function tell me why? can someone please tell me why I've attached the whole project if someone wants to test it No MYSQL required.. just PHP Thank you! Hi all, just before i kick off im not looking for the code just a push in the right direction. I am using a wysiwyg editor (tiny mce) which is basicaly a textarea with content in it. What i am looking to do is when a presses enter withing the textarea a <br/> tag is placed where the text curser is. Code: <textarea> <p>dfsdfdfdfdfdf dsfsdfdf dsfdsfdsf dsfdsfds dsfdfdss [enterpressed]<br/> dffdsf dfs dsfd sdf sdfs fdsf</p> </textarea> secondly, if a user users the arrow keys to navigate where to edit, when they get to the begining or the end of a tag, i want the arrows to be disabled. Code: <textarea> <p>||<df<sdf<dfd<fdfdf dsfsdfdf dsfdsfdsf dsfdsfds dsfdfdss [enterpressed]<br/> dffdsf> dfs> dsfd s>df sdfs>> fds>f||</p> </textarea> (<> represents arrow press, || represents blocked, and can go no further) any help much appreciated. Ok, here is my issue. I want to have an input text on the top of the page that when I type in a series of numbers and hit submit, it populates the rest of the form. Does anyone have any idea what I need to perform this action?
I have a table where when the cursor passes/hovers over a cell, the current cell, as well as the top cell in its column and the first cell in its row change backgroundColor. I have text fields outside the table which I want to populate with the contents of the cells affected by the mouseover event. So as the mouse moves over different cells, the contents of the text fields changes accordingly. I've got the backgroundColor to change, but when I try to assign the contents of the cells to the text fields, nothing happens. The change of backgroundColor even stops working. This is the code I'm usign to populate the fields. Code: document.getElementById("tableID").textfieldID.value = Col1Cell[0].innerHTML;
document.getElementById("tableID").textfieldID.value = HeaderCell[n].innerHTML;
document.getElementById("tableID").textfieldID.value = this.innerHTML;
I'm traversing through the <th> and <td> tags to find the header cell HeaderCell[n] and first column cell Col1Cell[0] associated with the current cell. If I leave out these lines the backgroundColor changes, if I use them, nothing happens at all. Can't figure out why. Any suggestions? I'm building a template editor and need some help changing some of the variables. Part 1. Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s I need to be able to fill out two fields to change DEALERNAME and 00/00/00. I found a way to do this but it required the output to be in a field. I need it the output to look no different than before. Part 2. I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3. Head Code: <script language="javascript" type="text/javascript">
function detail1a(){
document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
}
function detail1b(){
document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
}
function detail1c(){
document.getElementById("detail1").innerHTML = "Lube Chassis";
}
function detail2a(){
document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
}
function detail2b(){
document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
}
function detail2c(){
document.getElementById("detail2").innerHTML = "Lube Chassis";
}
function detail3a(){
document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
}
function detail3b(){
document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
}
function detail3c(){
document.getElementById("detail3").innerHTML = "Lube Chassis";
}
</script>
Body Code: <span style="font-weight: bold;">Offer Details</span><br /> <p style="margin: 8px 10px"> Detail 1<br /> <input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 2<br /> <input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 3<br /> <input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br /> </p> Output Code: <ul> <li><span id="detail1">Detail 1</span></li> <li><span id="detail2">Detail 2</span></li> <li><span id="detail3">Detail 3</span></li> </ul> I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field. Here is the code that for some reason isn't working for me. Code: <script type='text/javascript'>
function resizeIt()
{
document.getElementById('comment').style.height = 50px;
};
</script>
<input type='text' id='comment' class='urlTextArea' name='url' value=''
size='75' onfocus='resizeIt()'>
I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button. What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made. "Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..." Can this be done on each line as a second onChange event? Code: <html>
<head>
<HEAD>
<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12
var arrItems4 = new Array();
var arrItemsGrp4 = new Array();
arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42
var arrItems5 = new Array();
var arrItemsGrp5 = new Array();
arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133
function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>
<BODY>
<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 2:
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 3:
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 4:
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2"> Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2"> Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Hi guys, I have this drag and drop script: 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>
<title>JavaScript Drag and Drop Tutorial</title>
</head>
<body>
<div style="position:absolute; left:0%; top:0%; ">
<style type="text/css">
.drag {
position: absolute;
}
</style>
<div style=" position:absolute; width:100%; height = 100%; left:0%; top: 0%" >
<input id="1" class="drag" style="width:100px; height:100px; top: 0px" type="submit" value="Drag 'n' throw me">
<pre id="debug"> </pre>
</div>
<script language="JavaScript" type="text/javascript">
<!--
function $(id){
return document.getElementById(id);
}
var _startX = 0; // mouse starting positions
var _startY = 0;
var _offsetX = 0; // current element offset
var _offsetY = 0;
var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag
var _debug = $('debug'); // makes life easier
InitDragDrop();
function InitDragDrop()
{
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}
function OnMouseDown(e){
if (e == null)
e = window.event;
var target = e.target != null ? e.target : e.srcElement;
if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') {
_startX = e.clientX;
_startY = e.clientY;
_offsetX = ExtractNumber(target.style.left);
_offsetY = ExtractNumber(target.style.top);
_oldZIndex = target.style.zIndex;
target.style.zIndex = 10000;
_dragElement = target;
document.onmousemove = OnMouseMove;
document.body.focus();
document.onselectstart = function () { return false; };
target.ondragstart = function() { return false; };
return false;
}
}
function ExtractNumber(value)
{
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}
function OnMouseMove(e)
{
if (e == null)
var e = window.event;
// this is the actual "drag code"
_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
}
function OnMouseUp(e)
{
if (_dragElement != null) {
_dragElement.style.zIndex = _oldZIndex;
// we're done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
// this is how we know we're not dragging
_dragElement = null;
}
}
</script>
</div>
</body>
</html>
Is there a way to drag and drop text field? [ICODE] <html> <head> <title>ABS</title> <?php $j="dove"; ?> <script language="JavaScript" type="text/javascript"> <!-- function checkform ( form ) { if (form.Name.value == "") { alert( "Please enter your email address." ); form.Game.value="<?php echo $j;?>"; form.Name.focus(); return false ; } if (form.Game.value == "") { alert( "Please enter your game address." ); form.Game.focus(); return false ; } if (document.form.Shame[0].value== "") { alert( "Please enter your game address." ); form.Game.focus(); return false ; } return true ; } </script> </head> <body> <form name="form" action="Store_it.php" method="post" onSubmit="return checkform(this);"> <input type="text" name="Name" /> <input type="text" name="Game" /> <input type="text" name="Shame[]" /> <input type="text" name="Shame[]" /> <input type="text" name="Shame[]" /> <input name="submit" type="submit"> </form> </body> </html> [icode] I need to use the array's shame and just check if the third one is not empty. I have searched DOM and other stuff but i cannot get to the 2 element of the array shame. How do i check the value of the array. Ok, came up with a work around to my previous problem, however I now have a result that I cannot explain. Here is the code: Code: <FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text" onkeydown="if (event.keyCode == 13) {Calc.Input.value = eval(Calc.Input.value)}" NAME="Input" Size="26">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE=" C " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>
In order to get the 'Enter' button to function the same as pressing the '=' button, I added the keyCode event. Now my problem is that when you press the 'Enter' key, the result is displayed int the 'Input' text field briefly and then is cleared. How can I keep the result static in the text box? window.onload = initAll; function initAll() { document.getElementById("Message").onfocus = focusHandler; document.getElementById("Message").onblur = blurHandler; } function focusHandler() { document.getElementById("helpYou").innerHTML = "<span class=\"helpMessage\">Hey " + theName + "You should add Lasting Flash to your Facebook!</span>" } function blurHandler() { var helpMessage = document.getElementById("helpYou").innerHTML = ""; } function nameHandler(frm) { var theName = frm.firstName.value; } Quote: When I insert theName variable within the span the code completely does not work. I am accessing a text field when the user enters his name and then a small pop up later that includes the users name when another field is clicked on. Hello, I am needing the coding to do the follow: When a user makes a selection from a dropdown, the value is placed in a text input. SELECT >>> INPUT Thank you so much for your help! |
|||||||