|
JavaScript - How To Give Focus To A Input 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 Similar TutorialsI tried to create a new text input once the last text box gets focus. But I cant even type in them because every time it gets focus a new text input is created! I really dunno what to do. Code: <html>
<head>
<script type="text/javascript">
function getTB(field)
{
var i = document.getElementById("f1").length + 1;
var cmd = "<input type=text name = "+ i + " onfocus=getTB() value = " + i + ">";
document.getElementById('f1').innerHTML = document.getElementById('f1').innerHTML + cmd;
document.getElementById(i-2).focus();
}
</script>
</head>
<body>
<form id ="f1">
<input type ="text" value ="hello" name="1" onFocus ="getTB(this)">
</form>
</body>
</html>
how to modify so not every time a new text input created when tried to type in? Hi, Because I'm using an asp script to submit this form, I cannot do a validation on the submit and so have chosen to do the validation with the onblur and the onmouseout functions. The validation works well for the checking the first input, id CommenterName. If it's blank, the alert displays and then the cursor is moved to the email check. When the alert is dismissed the focus returns to the first input, but, and this is the problem, returning to the first input, triggers the second alert. How do I return the focus to the first field without triggering the next alert? Changing the order of the inputs in not an option. Code: function checkCompletitionName(){
if (document.getElementById("CommenterName").value.length == 0)
{
document.getElementById("CommenterName").style.backgroundColor = "#efefef";
alert("Please type your name.");
document.getElementById("CommenterName").focus();
return;
}
else
{
document.getElementById("CommenterName").style.backgroundColor = "white";
}
}
function checkCompletitionEmail(){
if (document.getElementById("Email").value.length == 0 || (document.getElementById("Email").value.search("@") == -1 || document.getElementById("Email").value.search("[.*]") == -1))
{
document.getElementById("Email").style.backgroundColor = "#efefef";
alert("Please check the email address for errors.");
return;
}
else
{
document.getElementById("Email").style.backgroundColor = "white";
}
}
function checkCompletitionComment(){
if (document.getElementById("Comment").value.length == 0)
{
document.getElementById("Comment").style.backgroundColor = "#efefef";
alert("Please type your comment.");
return;
document.getElementById("Comment").focus();
}
else
{
document.getElementById("Comment").style.backgroundColor = "white";
}
}
the HTML code: Code: <form name="form1" method="get" action="/asp/formmail.asp"> <p> <label class="labelContact">Select Category:</label> <select class="inputContact" name="category" id="category"> <option selected="selected" value="support" id="support">Support</option> <option value="sales" id="sales">Sales</option> <option value="other" id="other">Other</option> </select> </p> <p> <label class="labelContact" for="CommenterName">Name <span class="redasterisk">*</span>:</label> <input size="42" class="inputContact" name="nameCommenter" id="CommenterName" onblur="checkCompletitionName()" type="text" /> </p> <p> <label class="labelContact" for="Email">Email Address<span class="redasterisk"> *</span>:</label> <input size="42" class="inputContact" name="email_address" id="Email" onblur="checkCompletitionEmail()" type="text" /> </p> <p> <label class="labelContact" for="Phone">Phone Number:</label> <input id="phoneAreaCode" class="inputContact" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3" /> - <input id="phonePrefix" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3" /> - <input id="phoneLastFour" onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4" /> </p> <p> <label class="labelContact" for="RegistrationNo">Registration Number:</label> <input size="42" class="inputContact" name="registration" id="RegistrationNo" type="text" /> </p> <p> <label class="labelContact" for="CompanyName">Company Name:</label> <input size="42" class="inputContact" name="company_name" id="CompanyName" type="text" /> </p> <p>Comments <span class="redasterisk">*</span>:</p> <p><textarea rows="5" cols="58" name="comment" id="Comment" onmouseout="checkCompletitionComment()"></textarea></p> thank you for your help Hi all, Please keep in mind: this is the first code I have ever written -- much of it with help from this forum and the skeleton from other corners of the JS community. Thanks! But now for the problem... I'm developing am income tax calculator, and everything is going swell. Currently the user can type in their adjusted gross income (AGI), hit submit, and learn the amount of income tax they would pay, their tax rate, and their income after tax. I've played around with the events to get the submit button to work in FF, IE, Chrome and Safari -- and I've gotten the enter button to work before with some stock code, but here's the catch: when the user presses enter, i want the focus to leave the input box. I don't care where it goes (submit button, I suppose?) but i need it to leave the input field so the onfocus="clearText(this);" event can fire when they return to type in a new income. Any ideas? Thanks in advance. Code: <script language="javascript" type="text/javascript">
function TotalGrossPerYear() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
if ((Calc.AGI.value > 500000)) {
Bracket3();
}
if ((Calc.AGI.value > 200000 ) && (Calc.AGI.value <= 500000)) {
Bracket1();
}
if ((Calc.AGI.value <= 200000)) {
Bracket2();
}
}
else
if (Calc.InputRad[1].checked) {
if ((Calc.AGI.value > 1000000)) {
Bracket3();
}
if ((Calc.AGI.value > 400000 ) && (Calc.AGI.value <= 1000000)) {
Bracket1();
}
if ((Calc.AGI.value <= 400000)) {
Bracket2();
}
}
}
function Bracket1() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * .05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Bracket2() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = 0 ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = 0 ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Bracket3() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 300000) * 0.09) + (300000 * 0.05) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 600000) * .09) + (600000 * 0.05) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Couple() {
var Calc = document.NetIncome;
Calc.AGI.value = "";
Calc.TaxableIncome.value = "--------";
Calc.AmtDue.value = "--------";
Calc.AmtLeft.value = "--------";
Calc.TaxRate.value = "--------";
}
function Individual() {
var Calc = document.NetIncome;
Calc.AGI.value = "";
Calc.TaxableIncome.value = "--------";
Calc.AmtDue.value = "--------";
Calc.AmtLeft.value = "--------";
Calc.TaxRate.value = "--------";
}
function clearText(thefield){
if (thefield.value==thefield.value)
thefield.value = ""
}
</script>
</head>
and the html... Code: <body> <form name=NetIncome> <table border=5> <th align=left> <ol> <li>Select Individual or Joint filing status. <li>Enter your Adjusted Gross Income. <li>Submit to calculate. <li>Please reset after each calculation. </ol> </th> <tr> <td><font size=5><input type=radio name=InputRad value=PerHour onclick="Individual()"><u>Individual</u> <input type=radio name=InputRad value=PerYear onclick="Couple()"><u>Joint</u></font></td> </tr> <tr><td><input type=text name=AGI size=30 id="txtExamplethree" onfocus="clearText(this);" onsubmit="TotalGrossPerYear();" onblur="this.value=this.value.replace(/[^\d\.]/g, '');" value="Select filing status" maxlength="20" />Adjusted Gross Income </td></tr> <tr><td><input type=text name=TaxableIncome id="txtExampletwo" readonly="readonly" size=30 value="">Taxable Income</td></tr> <tr><td><input type=text name=AmtDue id="txtExampleone" size=30 readonly="readonly" value="">Amount Due in Taxes</font></td></tr> <tr><td><input type=text name=AmtLeft id="txtExample" size=30 readoanly="readonly" value="">Income after Tax</font></td></tr> <tr><td><input type=text name=TaxRate size=10 readonly="readonly">Tax Rate</td></tr> <tr><td align=center><input type="button" value="Submit" onfocus="TotalGrossPerYear(); formatNumber(); formatNumberone(); formatNumbertwo(); formatNumberthree();" /><input type=reset value="Reset Form"></td></tr> </table> </form> Hi, am newbie in this domain ,so i appreciate any help of you. Am making a site for tattoos and i see somewhere an application in Java for changing text, it was simple text box where you write the text you want and down you choose the Font and down you have the text you want in the wanted fond. Thank you!
I'm trying to set the contact form on http://gspbuzz.com/test to remove the text when a user clicks it. Any idea how I can accomplish this?
Hi I'm trying to write a data checking function that after it completes should return the focus to the text box that was checked and highlight everything in it IF the value was unacceptable. Here is the function: Code: <script type="text/javascript">
function chkValidity(numToCheck)
{
if (isNaN(numToCheck) == true || numToCheck < 0)
{
alert("Please enter a number greater than zero");
numToCheck.focus()
numToCheck.select()
return false
}
}
</script>
And here are the lines of code that would call the function: Code: <input type="text" name="numBedrooms" size="3" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="areaBedrooms" size="3" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="numLivAreas" size="2" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="areaLivAreas" size="3" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="numServAreas" size="2" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="areaServArea" size="3" maxlength="3" onblur="return chkValidity(this)" /> What I find happens is that the data checking works and the error mesage displays, but the focus does not return to the text box. Any ideas? Regards Jenny 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>
Hi, I am trying to implement something like a javascript that can click and focus the Status Update Box on Facebook. Till now, I have nothing in hand that can perform the task so I thought about a javascript that can do it. I am not even a newbie to javascript but I know that it can perform various complicated tasks on client side. Can anyone here tell me how do I click the Status Update box and set it to focused by a javascript so that when I start typing the Status box receive the text ? Thanks 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 I'm banging my head against this problem and I'd really appreciate some help. I think the problem is cause by my lack of understanding of how the browser (firefox 3.6.3) handles focus. A simplified version of my problem is: I've defined the function Code: function two_focus()
{
document.getElementById("two").blur();
alert("hello");
}
then in the body I have the form with two text boxes Code: <input id="one" type="text"><input id="two" type="text" onfocus="two_focus();"> When the page is loaded and I click in the second textbox I get the alert, all well and good. I OK the alert box, but when I click on box 1, or anywhere on the page for that matter, the function is called and the alert comes up. I just don't understand why the focus is being returned to the second box when I click anywhere in the browser window. Any comments will be gratefully received. 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. 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 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. 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. 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 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 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 Hey everyone, I've looked around quite a bit and can't seem to find anything but I was wondering if there is some open source software offering a text editor/input field similar to the one used on this forum when submitting a comment or thread? Where you can click a bold button or Italic button or URL button to structure it? Thanks Josh 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);
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'>? |
|||||||