JavaScript - Replace String In Input Field Dynamically
Hi, I am trying to write some code that will test if a user enters a non-numeric character in an input text field, and if so, replaces it with a '0'
Code: <script type="text/javascript"> function IsNumVal (){ for (J=1; J<=3; J++){ if (isNaN(Number(document.getElementById('Intext' + J).value))){ document.getElementById('Intext' + J).value = 0; } } } </script> <Body> <table border="1" cellspacing="1" id = "Numbers"> <tr id="RowNum1"> <td ><input type="text" size = "5" name="Intext1" id="Intext1" value = "3" onkeyup="IsNumVal()" /></td> </tr> <tr id="RowNum2"> <td><input type="text" size = "5" name="Intext2" id="Intext2" value = "9" onkeyup="IsNumVal()" /></td> </tr> <tr id="RowNum3"> <td><input type="text" size = "5" name="Intext3" id="Intext3" value = "18" onkeyup="IsNumVal()" /></td> </tr> </table> </Body> document.getElementById('Intext' + J).value = 0; doesn't work document.Schedule.'Intext' + J.value = 0; doesn't work document.Schedule.Intext2.value = 0; works, but I need to test each text field while looping, so I can't "hard code" the ID. Suggestions? Similar TutorialsI 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 Hello All, I have a code which works fine for what is does but I want to add in dynamically a new list to the Array...... from an input field. The relevent part of the code reads as this for example........ var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3") but I need a way to dynamically replace the existing.... "ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3" seen above with a new list from an input field which holds the following say....... ca2sb2en2pg1itm1","ca2sb2en2pg1itm2","ca2sb2en2pg1itm3 I have tried various ideas but none seem to be able to inject the new values in the space between the brackets. Any thoughts. Martin. For those just wondering what the code is and want to try it, it is a one piece code which can fire many different functions without requiring lots of individual bits of code to do same. The action usually happens in micro-seconds but I slowed it to a one second count between changes so you can see what is actually happening. Below is a revised code if you want to see it working and also to give an idea about the Array part in which I want to add a different number set. Copy the code and save in notepad as test.html It can be opened as a web page. Remember to change the code tags to the correct script tags Code: var i_x_list=0 function fireFunctionList_x_list() { if (document.getElementById("locate_load_x_list").value == "end" || document.getElementById("locate_load_x_list").value == "undefined"){i_x_list=0;document.getElementById("locate_load_x_list").value=""}else{fireFunctionList_x_list_do()} } function fireFunctionList_x_list_do() { document.getElementById("addto").value="place_"; var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3","ca1sb2en1pg1itm4","ca1sb2en1pg1itm5","ca1sb2en1pg1itm6","ca1sb2en1pg1itm7", "ca1sb2en1pg1itm8","ca1sb2en1pg1itm9","ca1sb2en1pg1itm10","ca1sb2en1pg1itm11","ca1sb2en1pg1itm12","ca1sb2en1pg1itm13","ca1sb2en1pg1itm14","end") document.getElementById('locate_load_x_list').value=step_x_list[i_x_list] i_x_list=i_x_list+1 document.getElementById("addto").value+=document.getElementById("locate_load_x_list").value; document.getElementById("final_locate_load_x_list").value=document.getElementById("addto").value; document.getElementById("final_locate_load_x_list").value+=document.getElementById("addto2").value; var x_list = document.getElementById("final_locate_load_x_list").value; setTimeout("fireFunctionList_x_list()",1000) var f_x_list = new Function(x_list); f_x_list(); } <BR><BR> <button onclick="fireFunctionList_x_list()">run the function list rotation</button> <BR><BR> <input id="addto" type="text" size=25 value="place_"><BR> <input id="addto2" type="text" size=4 value="()"><BR> <input id="locate_load_x_list" type="text" size=20 value=""><BR> the code fires this function if there<input id="final_locate_load_x_list" type="text" size=25 value=""><BR> Code: function place_ca1sb2en1pg1itm4(){alert("ca1 number4 function dummy run as alert");} Code: function place_ca1sb2en1pg1itm9(){alert("ca1 number9 function dummy run as alert");} Code: function place_ca2sb2en1pg1itm6(){alert("ca2 number6 function dummy run as alert");} Code: function place_ca2sb2en1pg1itm12(){alert("ca2 number12 function dummy run as alert");} Hi all I'm messing around with this video theme over at Hive45 ... the episodes change dynamically, but as you can see the social icons don't pickup the URL change. I found a guy who had a fix, but it was using the sexybookmarks wordpress plugin and I couldn't workout how to change the icons and control the display (my icons are manually coded). E.g... Code: <a rel="nofollow" id="linker" target="_blank" href="http://reddit.com/submit?url=http://hive45.com/shows/episode-2/&title=Episode 1" title="Reddit"><img src="http://hive45.com/wp-content/themes/hive45/images/reddit_32.png" title="Reddit" alt="Reddit" class="social"></a> Here's the fix: The main bit of work for the bookmarks was in the java.js and episode.php file. Firstly episode.php I added, after line 17: Code: // <---------- MS Starts Here ---------> if ( function_exists('get_sexy') ) $sexy_str = get_sexy(); endwhile; endif; echo 'sexy:' . $sexy_str ; // <---------- MS End Here ---------> Then in java.js in the ScreenWrite function, after around document.getElementById('linker').setAttribute("href",plinker); line 114 I added: Code: // <---------- MS Start Here ---------> // Find the sexy: tag, grab the text until the end, update the sexy-marks span then drop the text from=strep.indexOf('sexy:'); sexy=strep.slice(from+5); strep=strep.slice(0,from); document.getElementById('sexy-marks').innerHTML = sexy ; // <---------- MS End Here ---------> Again in java.js in the selectEpisode function right at the beginning: Code: // <---------- MS Starts Here ---------> // Get a reference to the sexy bookmarks part sexyObj=document.getElementById('sexy-marks'); //sexyObj.innerHTML=""; delete sexyObj; // <---------- MS Ends Here ---------> Finally in the index.php where you want the SexyBookmarks to be: Code: <span id="sexy-marks"> <?php $temp = $wp_query; query_posts("p=".$theid); if(function_exists('selfserv_sexy')) { selfserv_sexy(); } $wp_query = $temp; ?> </span> I'm a complete noob with javascript sadly. Any idea how to change the above code to work with manually coded bookmarks? cheers i am trying to make an online graphing calculator with javascript. dont ask how because i dont know. but there is an annoying error in a do...while loop. although it should break out of the loop when the |'s (absolute value signs) are replaced with Math.abs( and ). here is the code. Code: var initec = function(){ var rg = { } ; rg.matc = false; rg.i = 0; rg.change = function(equ){ if (typeof(equ) != "string"){ alert('Equation must be a string'); return; } alert("starting equation: "+ equ); rg.i = 0; do{ rg.matc = equ.match(/\|/); if(rg.i === 0){ equ.replace(/\|/, " Math.abs("); rg.i = 1; alert("1 "+equ); } else { equ.replace(/\|/, " ) "); rg.i = 0; alert("0 "+equ); } }while(rg.matc) alert("finished equation: " + equ); } return rg; } rg=initec(); rg.change("|8/x+7|-2"); the last 2 lines and the alerts are for debugging. as you can see, it is not finished. but still, it should work. I would like to replace all the characters within a string with asterisk using javascript. Ex: If i have a string "test123". Replaced string should be "*******". Could you please let me know how i can implement this using Regex within javascript. Hi, I'm just wandering, how can you stop the replace() function from replacing characters inside a word, such as, if I try to replace 'x' with 'and', then my string would go from 'example, x' to 'eandample, and'. Thanks in advanced Hi, I'm fairly new to javascript as well as brand new to these forums. I have a question that I'm sure has a simple answer but I either can't get my head around it or I'm just too unfamiliar with string methods. I'm trying to replace all instances of "&" with its alt code "&" in a string. Below is my code.. Code: Match = subText.indexOf("&"); while (Match != -1) { subText = subText.replace( "&", "&" ) Match = subText.indexOf("&"); } The problem here is that an ampersand will always exist in the string if there was one originally and I get an infinite loop. Would anyone know of a way around this? Thank you. hello, I'm trying to build a simple function to append and replace an argument in a query string, for example, if my url was like; www.domain.com/page.php?test=123&blah=abc and I want to add on qty=5 like; www.domain.com/page.php?test=123&blah=abc&qty=5 ok, no problem there, however if I now want to update that to qty=6, i get this: http://www.domain.com/page.php?test=...bc&qty=5&qty=6 my code thus far; Code: function AppendURL(){ var AURL = document.getElementById('AddToCartLink'); var numQty = document.getElementById('Qty').value; var TempURL = AURL.href; AURL.href = TempURL + '&Qty=' + numQty; } Can some one help me, I want to replace the characters from a string and I have tried with this script: Code: var v5=form.description.value.replace(/#/, "%23"); But it only changes the first character from the string. Turning #### into %23### but I want them all transformed. I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name. I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code Code: <html> <head> <title>form</title> <content="text/html"; /> <script type="text/javascript"> <!-- window.onload = function () { if (self.init) init(); } var counter = 0; var counter1 = 0; function init() { document.getElementById('moreFields').onclick = moreFields; document.getElementById('moreFields1').onclick = moreFields1; moreFields(); moreFields1(); } function moreFields() { counter++; var newFields = document.getElementById('readcomp').cloneNode(true); newFields.id = ''; newFields.style.display = 'block'; var newField = newFields.childNodes; for (var i=0;i<newField.length;i++) { var theName = newField[i].name if (theName) newField[i].name = theName + counter; } var insertHere = document.getElementById('writecomp'); insertHere.parentNode.insertBefore(newFields,insertHere); } function moreFields1() { counter1++; var newFields = document.getElementById('readsubgr').cloneNode(true); newFields.id = ''; newFields.style.display = 'block'; var newField = newFields.childNodes; for (var i=0;i<newField.length;i++) { var theName = newField[i].name if (theName) newField[i].name = theName + counter1; } var insertHere = document.getElementById('writesubgr'); insertHere.parentNode.insertBefore(newFields,insertHere); } // --> </script> </head> <body> <div id="readcomp" style="display: none"> Comp name<input type=text name="comp" value="" size="2"/> Concentration<input type=text name="comp_qty" value="" size="2"/> <input type="button" value="Remove comp" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/> <span id="writesubgr"></span> <input type="button" id="moreFields1" value="add subgroup" /><br/><br/> </div> <div id="readsubgr" style="display: none"> Subgroup Name<input type=text name="subgroup" value="" size="2"/> Quantity <input type=text name="subgroup_qty" value="" size="2"/> <input type="button" value="Remove subgroup" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /> </div> <form action="cgi_bin\show_input.pl" method="post"> <span id="writecomp"></span> <input type="button" id="moreFields" value="add comp" /><br/><br/> <input value="Run Program" type="submit"> <input value="Reset all fields" type="reset"> </form> </body></html> any help would be appreciated. thanks I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function. The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it. Here are the mappings: If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab If selections = Elementary & Writing = http://www.widget.com/content/elem-writing If selections = Elementary & ELD = http://www.widget.com/content/elem-eld If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab If selections = High School & Writing = http://www.widget.com/content/hiscl-writing If selections = High School & ELD = http://www.widget.com/content/hiscl-eld Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best. Code: <script language="javascript" type="text/javascript"> <!-- function build() { document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ; //print example: http://www.widget.com/content/ELM-VOC return true; } --> </script> <form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();"> <input type="hidden" name="redirect" value=""> <table class="elqFormTable" border="0" cellspacing="2" cellpadding="2"> <tr> <td valign="top">Grade:</td> <td> <select name="grade"> <option value="ELM">Elementary</option> <option value="MID">Middle School</option> <option value="HIG">High School</option> </select> </td> </tr> <tr > <td valign="top">Solution:</td> <td> <select name="solution"> <option value="VOC">Vocabulary</option> <option value="WRI">Writing</option> <option value="ELD">ELD</option> </select> <!--truncated code --> How do I replace the string "rpg" only present in between <et> tags ? Code: <et>ReplaceOnlyrpg</et> After replacement it should look like this Code: <et>ReplaceOnly</et> Any advice is appreciated. Thank you Hello i am using a simple calendar date picker in which when u click a date is displayed in an input field. Using a javascript i am trying to retrieve data from a second page using this value but probably i am doing something wrong. 1st page: Code: <script type="text/javascript"> function showCustomer(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","check6.asp?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> Check in: <input onchange="showCustomer(this.value)" size="22" id="f_date1" /><button id="f_btn1">...</button> <script type="text/javascript">//<![CDATA[ var cal = Calendar.setup({ onSelect: function(cal) { cal.hide() }, showTime: true }); cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d"); //]]></script> </form> <br /> <div id="txtHint">here...</div> </body> </html> and in second one i am trying to get date like this: Code: sql_cmd.CommandText = "SELECT dbo.rooms.id, type, image, price,details FROM dbo.rooms, dbo.transactions WHERE dbo.rooms.id=dbo.transactions.roomid and '" & request.querystring("q") & "' not between checkin and checkout" Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="javascript/text"> <!-- function clearInputField( input, def ) input = document.getElementById( input ); if ( input.value == def ) { input.value = ''; } } --> </script> </head> <body> <b>Testing Input</b> <input id="input" onclick="JavaScript: clearInputField('input', 'Enter Text');" type="text" size="31" value="Enter Text" /> <body> </html> This gives me a "Uncaught ReferenceError: clearInputField is not defined" error and I'm not sure why...? I'm new in web-development. I've searched it but it's not found. I make a input then how i get value of it for javascript value?
Hi all, I have a complicated (well to me it is!) problem with a form I am creating for my site. The form has three sections with the ability to add another field unlimited times. There is one for adding ingredients, one for equipment and one for steps The name and id does increment on all 3 however the problem is they seem to all be using the same count, by this I mean that if I add 2 steps (which brings the count to 3) and then add an ingredient, the ingredient id goes to ingredient4 - obviously because it is taking the count that step has set. I am no javascript guru, I am more a designer so I'm really struggling, Ive been working on this one for days.. There is also another problem in that if I create say 3 steps bringing the count up to step4 and then remove the second step, I cant see how I can bring the other steps after step2 count down by one, at the moment step4 and step3 are staying as step3 and step4 but because step2 was removed they should drop down to becoming step2 and step3. My php that inserts the data into my db isnt working because the ids keep getting messed up I have a demo URL up on ajburchell.com/form.html If anyone can help me with this I will be extremely grateful Thank you in advance How do I insert this javascript: <script language="JavaScript" type="text/javascript" src="http://www.ABC.com/members/display.php?token=email"></script> Into the values of this: <input id="Email" name="Email" type="text" size="30" /><input name="emailagent" type="HIDDEN" class="textfield" id="emailagent" value=''INSERT JAVASCRIPT" /> Below is my previous code I had working in the manner it would change the price, sub_total, tax, sh, total, and total_paid input fields to 0. There are two problems with this... 1. When it outputs to the input fields, the value displays as 0 instead of 0.00. 2. I need to have it only react when the value typed into the input field "trees_sold" is "0". If any higher, I would like it to ignore the statement. Code: <!-- Comp all prices to zero value --> <SCRIPT LANGUAGE="JavaScript"> var trees_sold = 0.00; function InitSaveVariables(form) { price = form.price.value; sub_total = form.sub_total.value; tax = form.tax.value; sh = form.sh.value; total = form.total.value; total_paid = form.total_paid.value; } function CompPrices(form) { if (trees_sold == 0.00) { InitSaveVariables(form); form.price.value = 0.00; form.sub_total.value = 0.00; form.tax.value = 0.00; form.sh.value = 0.00; form.total.value = 0.00; form.total_paid.value = 0.00; } } </script> Code: <input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" /> Below is my current code I'm working with that I can't seem to get to function properly. I've modified the first two lines of code here, and am attempting to pull any data that is typed in and automatically take into consideration if it is a "0" value, it reacts as my code below says "if (trees_sold == 0.00)" and if anything else, it will not do anything. This is not working unfortunately. Code: <!-- Comp all prices to zero value --> <SCRIPT LANGUAGE="JavaScript"> form.trees_sold.value = ""; trees_sold = form.trees_sold.value; function InitSaveVariables(form) { price = form.price.value; sub_total = form.sub_total.value; tax = form.tax.value; sh = form.sh.value; total = form.total.value; total_paid = form.total_paid.value; } function CompPrices(form) { if (trees_sold == 0.00) { InitSaveVariables(form); form.price.value = 0.00; form.sub_total.value = 0.00; form.tax.value = 0.00; form.sh.value = 0.00; form.total.value = 0.00; form.total_paid.value = 0.00; } } </script> Code: <input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" /> Anyone have any ideas? Thank you. i was wondering what event would clear an input field that has a value in it... so a user can type their own value.... any examples? 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 :-) |