JavaScript - Reordering Text Input Values
Hi,
I'm currently programming a menu editing script and I'm trying to reorder value of text input on change. What I'm trying to do is when I change the value of a text box it reorders the others. EX Start 1 2 3 4 5 Change 3->1 End 2 3 1 4 5 Here is what I've manage to do, it works only when the number is bigger. Javascript function Code: function changeOrder(current) { var num_name = current.name.split("_",2); var id = num_name[0]+"_"+num_name[1]+"_number"; var maxorder = document.getElementById(id).value; var currentmax = current.name.substr((current.name.length-1),1) if(currentmax <= maxorder && current.value > 0) { var start = (currentmax > current.value ? 1 : currentmax); for(var i=start;i<maxorder;i++) { var k = parseInt(i)+1; x = document.getElementsByName(num_name[0]+"_"+num_name[1]+"_order_"+k); x[0].value = i; x[0].name = x[0].name.substr(0,(x[0].name.length-1))+i; } current.name = current.name.substr(0,(current.name.length-1))+current.value; } } HTML input Code: <input type="text" style="width: 20px;" onchange="changeOrder(this);" value="1" name="other_title_order_1"> Thanks for any advices you may have Maxetime Similar TutorialsHi guys, Let me explain simply what I do and what I'm trying to achieve: I got a couple of comboboxes were the user selects a series of numbers. Once a selection is made, the value is appended to an input box. The idea is that the appended values form a telephone number, or at least part of one, that will then be used to search trough a database to look for a matching number. The code below is what I have done so far: Code: <script type="text/javascript"> function displayIndicatif(){ var sel = document.getElementById("indicatif"); var text = sel.options[sel.selectedIndex].value; var out = document.getElementById("blabla"); out.value += text+"\n"; } function displayBloc(){ var sel1 = document.getElementById("bloc"); var text1 = sel1.options[sel1.selectedIndex].value; var out1 = document.getElementById("blabla"); out1.value += text1+"\n"; } </script> [...] <input type="text" id="blabla"/> [..] <select id="indicatif" onChange="displayIndicatif();"> <option value="021">021</option> <option value="022">022</option> <option value="031">031</option> </select> <select id="bloc" onChange="displayBloc();"> <option value="555" class="021">555</option> <option value="666" class="021">666</option> <option value="777" class="021">777</option> </select> Basically what happens now is this: combobox indicatif: 021 | 022 | 031 combobox bloc: 555 | 666 | 777 If I select "021" from indicatif, the script will append 021 to the input "blabla". The problem is, if I now select "022", the input will show "021022" instead of replacing the 021 with 022. What I would like is that, for each combobox, the script replaces the selected value with the new one instead of simply appending it, like instead of say 021022555666 it would show 021555 or 022666 or 021666 depending on what is selected...you get the idea? Is this doable? Needless to say I'm a total noob at javascript...I adapted the code I got now from some other guy who was trying to achieve almost the same thing and adapted it to my needs, or least, tried to, but now I'm stuck. Any help is appreciated! Thanks print "<Font face=\"calibri, Arial\"><table id=\"rnatable\" border=2px width=100%>"; print "<th></th>"; print "<th>a</th>"; print "<th>b</th>"; print "<th>c</th>"; print "<th>d</th>"; print "<th>e</th>"; print "<th>f</th>"; print "<th>g</th>"; while($array = mysql_fetch_array($sql_query)) { $id=$array['a']; print "<tr id=\"newtr\">"; print "<td><input id=\"check\" type=\"checkbox\" name=\"keyword[]\" value=\"$id\" ></td>"; print "<td>".$array['a']."</td>"; print "<td>".$array['b']."</td>"; print "<td>".$array['c']."</td>"; print "<td>".$array['d']."</td>"; print "<td>".$array['e']."</td>"; print "<td>".$array['f']."</td>"; print "<td> <a href=\"http://localhost/rnasearch/retrieve.php?a=$id\">bla</a> </td></tr></font>"; } print "</table>"; } this is part of a php searchengine script that i wrote to retrieve data from a database and as you can see the last column that is g contains a link which when clicked takes the user to the second php script which retrieves additional information of that entry, but this is done for only single entries so as you can see i introduced checkboxes so that the user can check any number of checkboxes and retrieve information as per their wish now to do this i created a <input type=text where i want the value of these checkboxes i.e. $id to be posted in a delimited format so that the user can then click the corresponding button and retrieve the information this is the code <div id="floatMenu"> <ul class="menu1"> <center><li><form name="senddata" method="POST" action="http://localhost/retrieve.php" style="display:inline;"><input id="fasta" type="text" class="multitext"><input name="Fasta" type="Submit" value="Retrieve Fasta"></form> this is a css floating menu....so far so good....everything went fine.... after this i had to write a javascript to do this and i've been stuck there searching forums for the last 4 days! this is the javascript i found from somewhere which came close to doing wht i wanted it to do window.onload = function () { var cb = document.getElementById('check'); var fasta = document.getElementById('fasta'); cb.onclick = function () {fasta.value = cb.value + ","; };}; this script only sends the value of the first checkbox in the table, the others are not found by it, mind you its not the first checkbox selected its the first checkbox that is present in the table how can i resolve this problem so that even if i have n number of checkboxes in my table, if the user chooses to do so they can retrieve n number of information....please help i've almost lost hope in this! Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code: <html> <table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0"> <tr><td id="leftcolumn" width="170" align="left" valign="top"> <div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3> <a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br /> <a rel="nofollow" target="_top" href="between.htm" >Between Days</a> <link rel="stylesheet" type="text/css" href="epoch_styles.css" /> <script type="text/javascript" src="epoch_classes.js"></script> <script type="text/javascript"> var cal1, cal2; window.onload = function () { cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1')); cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2')); }; /*............*/ function confirmation(f) { var startdate = f.fromdate.value var enddate = f.todate.value var myday=new Date() var yr=myday.getFullYear() var mn=myday.getMonth()+1 var dt=myday.getDate() var today="" var present, ys, ms, ds, ye,me,de, start, end if(mn < 10) { mn = "0" + mn } if(dt <10) { dt = "0" + dt } today= yr + "/" + mn + "/" + dt present=yr + "/" + mn + "/" +dt if (today < startdate ) { alert (" Start date should not be exceed to-day's date " + present ) startdate.focus() return false } if (today < enddate ) { alert (" End date should not be exceed to-day's date " + present ) enddate.focus() return false } if (today == startdate ) { alert(" You are selected to-days date as Starting day" ); } var answer = confirm("Do you want to continue ?") if (answer) { if( startdate < enddate) alert("Dates between " + startdate + " to " + enddate + " are confirmed" ) else alert("Dates between " + enddate + " to " + startdate + " are confirmed" ) } else { alert("Date not confirmed") window.location="to_date.htm"; } ys= startdate.substring(0,4); ms= startdate.substring(5,7); ds= startdate.substring(8,10); start=ys + "" + ms + "" +ds ye= enddate.substring(0,4); me= enddate.substring(5,7); de= enddate.substring(8,10); end=ye + "" + me + "" +de } /*.......................................................*/ </script> <div style="margin-left:100px;"> <body> <style type="text/css"> #conf { margin-left:115px; } </style> <td align="left" valign="top"> <table width="100" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:0px"> </table> <h4>From Date</h4> <form name= "formbet" id="placeholder" method="post" action="#" > <input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/> <td align="left" valign="top"> <table width="300" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:20px"> <h4>To Date</h4> <input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br /> <input id="conf" type="button" onclick="confirmation(this.form)" value="Submit"> </form> </body> </html> In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. I have a script where I need to change input values automatically, and I just can't find the right code for it. Here's a little of my code below, can anyone help me, please? Code: document.getElementById("Id").innerHTML="Text here"; I am working on a job calculator. I have 2 txt input boxes titled "project_rate_field" and "project_time_field" as well as a third box .. "project_pay_total_field" for output.. I need to multiply the rate field and the time field and output the total into the third box. I've never really used javascript before so I dont know much about it or how to write it but im trying to learn. Here is my .js file ... Code: function project_pay_details() { var rate = document.getElementById("project_rate_field").value; var time = document.getElementById("project_time_field").value; var total = (rate * time); project_pay_total_field.value = "$" + total; } And here is my .html file Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript" href="functions.js" /> <style> .wrap { float: right; } #project_pay { float: left; margin-right: 15px; line-height: 38px; font: 10px Arial, Helvetica, sans-serif; color: #bbb; } #project_pay_details { border-top: 1px dotted #ddd; padding-bottom: 10px; margin-top: 10px; float: right; width: 100%; } .field { border: none; line-height: 38px; font: 20px Arial, Helvetica, sans-serif; color: #666; width: 100px; font-weight: bold; margin-top: 6px; } </style> </head> <body> <form id="project_pay_details" name="form1" method="post" action="" class="editable"> <div class="wrap"> <div id="project_pay">Pay Rate<input type="text" name="project_rate_field" id="project_rate_field" class="field" value="10" />/ hr</div> <div id="project_pay">Total Hours<input type="text" name="project_time_field" id="project_time_field" class="field" value="0" /></div> <div id="project_pay">Project Total<input type="text" name="project_pay_total_field" id="project_pay_total_field" class="field" readonly="readonly" value="0" /></div> <input name="project_pay_details_refresh" type="button" value="Refresh" onClick="project_pay_details()" /></input> </div> </form> </body> </html> I need to know what im doing wrong because this obviously doesnt work. 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! well title says it all i have a search form, and the default value is "enter text here" when the user click the submit button, i would like to check if the value of my text input is "enter text here" and if it is, then don't submit the form (popup a warning or something) how can i do that? thanks a lot! hi folks, i needed a text input so the user that will register a product, will make sure to enter the cents, and not just the raw money, making it to be stored incorrectly on my database. for example, if i type "1" the output inside the text field will be automatically "0.01", so the user HAS to type the cents. thanks in advance Hi, I have a form with text boxes which I need to display values ie. <input type="text" name="image_ref" value="image1" /> This works no porblem until I enter the below javscript onto the page: <script type="text/javascript"> var level1 = document.getElementById('level1'); level1.style.display = 'none'; var level2 = document.getElementById('level2'); level2.style.display = 'none'; var all_levels = document.getElementById('all_levels'); all_levels.style.display = 'none'; </script> This code is to hide certain parts of the form until they are activated. the problem is when the parts of the form are activated and displayed, the values inthe text input boxes do not show. Any ideas why this is? many thanks in advance. Currently I have several forms using the input text "field3". I want to know how I can require an HTML input text field to be required WITHOUT having to use the form name in the javascript and without modifying <body>,<form> or <input type="submit">. Also no HTML5 since not all browsers use it (life would be simple if they did since threres a required tag) So here is my form, for example Code: <form name = "test"> <input type="text" name="field1"> <input type="text" name="field2"> <input type="text" name="field3"> <input type="submit"> </form> In otherwords, I can only edit <input type="text" name="field3"> by putting code directly before, in, or after that input field. With this problem, how can I make it required? thank you hi friends , i am on make a dynamic input field creation code , my problem is the entered text(value from "add proposition") is washing away , if i press new "add proposition" my java script is PHP Code: <script language="javascript" type="text/javascript"> function add() { k=document.getElementById("num").innerHTML k=parseInt(k); if(!k) {document.getElementById("num").innerHTML=1; k=1;} else{ document.getElementById("num").innerHTML=k+1; k++; } document.getElementById("cat").innerHTML+="<br />type propositon "+(k)+":<input type=\"text\" name=\"prop"+k+"\">is it answer? <input type=\"checkbox\" name=\"ans"+k+"\"> ignore this one:<input type=\"checkbox\" name=\"ign"+k+"\">" } </script> my html code is PHP Code: <form action="new.php" method="post"> <fieldset> <legend>Add Question & answer:</legend> question type:<br /> True or False:<input type="radio" name="radio" value="t"> Objective:<input type="radio" name="radio" value="o"> Other:<input type="radio" name="radio" value="o"> Quesion:<br /> <textarea name="desc" rows="6" cols="35" ></textarea> <br /> <a href="javascript:add()" ><b>add proposition</b></a> <div id="cat"></div> <div id="num" style="display:none;"></div> <br> <input type="submit" name="submit"> </fieldset> </form> how i solve this problem ? hi i wants to change one input to texarea when i select one from radio, plz any suggestion how i would do that? my code PHP Code: <input type="text" name="other" value="this need to become textarea" /> <input type="radio" name="inputtext" />Text <input type="radio" name="inputtext" />Textarea so when i click inputtext radio name"other" will become a textrea rather then input type text. thanks for any help. Ok, so I have 4 textboxes with ids payment, payment1, payment2, payment3 and with each box is a submit button, named submt1-4 I need to know how I can add all of the values into one textbox named total. so when submit1 is clicked, it will add payment to the total, then when submit2 is clicked, it will add payment1 to the value, etc. But, each text box could be used more than once, so payment could be used 8 times, and each of the 8 times, it needs to add the proper value to the total. how would I do something like this? Hey guys, I just joined the forums (literally) and just started coding (mainly with CSS and HTML) about 3-4 weeks ago. I'd really like to get into JavaScript to make cool things happen on my website. With that being said, I've come up with a pretty cool idea but am not sure how to go about my problem. Enough with the chit chat. What I'm trying to do is add text to a user's input. For instance, if they write "Hello", the function should automatically add "World" to the output. I'd ideally like for the output to be searched on Google (think search engine) with the results displayed on a new page. Thanks in advance for any help! I have an input element of type=text. It has a fixed width, but I want to expand that width as the user is typing if the text doesn't fit inside. I did something similar to this with <textarea> and the vertical height. PHP Code: // javascript in mootools textarea.addEvent('keyup', function(){ textarea.setStyle('height', this.getScrollSize().y ); }); Does anyone know of a way to do this with <input type='text'>? Hello everybody I have a page where I have several input text fields (the number of fields is variable), the input text fields are disable , only the first one is enable, as the user goes filling out the text fields, the next text field becomes available, each time the user fills out an input text field, the form is submitted. As I said, the number of text fields is variable, some times I have only one and other time I can have 7. I would like to create a javaScript function to put the next available text field ready to star writing, without having to click in the text field first. The id of my form is "reports" , the id of the table is,"run_params" and the id of my input texts is "inputp". I am using JSF, the HTML output generated for each field is id="reports:run_params:1:input" , the number 1 indicated that is the first input text, this number can go from 1 to 20. I have tried to create a code where I can read how many input fields I have and then create a loop that checks all of them and search for the field that is enable and empty, and put that field on focus. But so far my code doesn't work. I don't have too much experience with javaScript and I already have tried many different ideas, without success, I have not idea how to achieve this objective, because I don't know very well javascript's capabilities, so I don't know what it is possible and what it is not. Any help????!!! Thanks in advance Hi, I'm trying to display a time clock in input text box. The time should display in Time utilization box after clicking on START BUTTON. I tried the below code and it is not starting the time. However, I tried the javascript individually and it worked. Any help? PHP Code: <script type="text/javascript"> var seconds = 0; var minutes = 0; var hours = 0; function zeroPad(time) { var numZeropad = time + ''; while(numZeropad.length < 2) { numZeropad = "0" + numZeropad; } return numZeropad; } function countSecs() { seconds++; if (seconds > 59) { minutes++; seconds = 0; } if (minutes > 59) { hours++ minutes = 0; } document.getElementById("time_utilization").innerHTML = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds); } function startTimer() { action = window.setInterval(countSecs,1000); } </script> </head> <body> <?php include("header.php"); ?> <div class="art-content-layout"> <div class="art-content-layout-row"> <div class="art-layout-cell art-content"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner art-article"> <form name="tracker" method="post" action="processor.php" onsubmit="return formCheck(this);"> <ul> <li class="mainForm" id="fieldBox_8"> <label class="formFieldQuestion">Start Time *</label><input readonly class=mainForm type=text name=start_time id=start_time size='30' value=''> <input type="button" id="start1_time" style="width: 100px" Value="Start Time" onClick="startTimer()"></li> <li class="mainForm" id="fieldBox_12"> <label class="formFieldQuestion">Time Utilization</label><input class=mainForm type=text name="time_utilization" id="time_utilization" size='8' value='00:00:00' ></li> <br /> <br /> <li class="mainForm"> <input id="saveForm" class="mainForm" type="submit" value="Submit" style="width : 100px"/> </li> </form> I am getting "Unknown Runtime Error at line 43". However, code has below line at link 43: Code: document.getElementById("time_utilization").innerHTML = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds); Newbie here. I could not find the syntax how to set initial value he Code: var indat = window.clipboardData.getData ("Text"); . . . . . <input type="text" name="q" value="xxxxxx" size="40" /> I would like the value to be the indat var value I saw lot of samples with value="xxxxx" (hard coded value) but could not find sample for var value thanks for help !! |