|
JavaScript - How Can I Reference Text Box With .focus() .select() ?
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 Similar TutorialsHy ! I have this form: PHP Code: <form name = "myform" method = "POST" action = "proba1.php"> Name:<br /> <input type = "text" name = "name" size = "30" onBlur = "namecheck()" /><br /> Username:<br /> <input type = "text" name = "username" size = "30" onBlur = "usercheck()" /><br /> Password:<br /> <input type = "password" name = "password" size = "30" /><br /> Repeat password:<br /> <input type = "password" name = "password2" size = "30" onBlur = "passcheck()"/><br /> Email:<br /> <input type = "text" name = "email" size = "30" onBlur = "mailcheck()" /><br /><br /> <input type = "reset" name = "reset" value = "Reset" /> <input type = "submit" name = "submit" value = "Submit" /> </form> and a Js file to check it: PHP Code: function namecheck() { var name = document.myform.name.value; if(name.indexOf(" ") < 0) { document.myform.name.focus(); document.myform.name.select(); alert("Pleaase enter your full name!") return false; } return true; } function usercheck() { var username = document.myform.username.value; if(username.length < 6) { alert("Username must be at least 6 chars!"); document.myform.name.focus(); document.myform.name.select(); return false; } return true; } function passcheck() { var password = document.myform.password.value; var password2 = document.myform.password2.value; if(password != password2) { alert("The two passwords not identical!") } } function mailcheck() { var mail = document.myform.email.value; var diff = mail.lastIndexOf(".") - mail.indexOf("@"); var diff2 = mail.length - mail.lastIndexOf("."); if(mail.indexOf("@") < 0 || mail.indexOf(".") < 0 || diff < 2 || diff2 > 3) { alert("Not a valid email adress!") } } So when a value is not proper,there should be an alert message,then select and focus on the field.But only the alert works.I can set the select and the focus to any other field from the current one ,but not to the current.(For instance:if the name is not good:document.myform.username.select() works,but :document.myform.name.select() not.) Can somebody help me? Let say I typed the word "Red", on input type text, is it possible with Ajax or Javascript to auto focus (highlight) the word "Red" on the select drop down list. I am looking at the net, but I can't find a code that does that. <input type="text" /> <select name=""> <option> Blue </option> <option> Red </option> <option> Green </option> </select> 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?
I've been looking for a reference to my situation for two days and i can't find any that are relevant enough. I'm trying to accept text as a URL for an image source. I then display that image in a form with the use of a <button type=button onclick=codeThatGeneratesImage > type thing. Code: function addImageToForm(formID) {
//get a reference to the form
var formElement = document.getElementById(formID);
//get a reference to the element that contains the url
var elementWithImageURL = document.getElementbyId("imageURLInput");
//get URL entered
var imageURL = elementWithImageURL.getAttribute("value");
//create image element
----------------------------------------------------------------------------------
var newImage = document.createElement("img");
//reference the source using the url
newImage.setAttribute("src", imageURL);
newImage.setAttribute("name", "newImage");
//append the image to form
formElement.appendChild(newImage);
}
i know that the bottom half works because i tried it with just a reference to an image directly and it worked. i can't figure out why most of the top part isnt working. any help would be much appreciated 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 I 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? I am running some javascript code which generates a popup window associated with a spell checking program. The way the program works, is that it takes the text out of a text field (passed as an object), spell checks the string, then puts it back into the text area field. My text area is located within a flash form, and I am having trouble pointing to it. I am sure my spell checking program is working, as it works fine if I point to an html text area. Do I have to do something special to point to a flash form object? Here is my code: Code: <!--- Source the JavaScript spellChecker object --->
<script language="javascript" type="text/javascript" src="../Spellchecking/spellerpages-0.5.1/speller/spellChecker.js">
</script>
<!--- Call a function like this to handle the spell check command --->
<script language="javascript" type="text/javascript">
function openSpellChecker() {
// get the textarea we're going to check
<!--- pointer to text area --->
var txt = window.activity.Summary;
// give the spellChecker object a reference to our textarea
// pass any number of text objects as arguments to the constructor:
var speller = new spellChecker( txt );
// kick it off
speller.openChecker();
}
</script>
Also, here is my text area: Code: <cfform format="flash" id="activity1" height="#formheight#" width="100%" style="#formstyle#" timeout="3600" wmode="transparent" name="activity" onLoad="#initVars#; onFormLoad();">
<cftextarea name="Summary" id="Summary" html="yes" maxlength="1000" tooltip="Summarize your entry here. The field has a 1000 character limit. This summary is included in the generated End of the Week reports." onChange="submitTemporary('Summary', Summary.text);requiredContent('summary');" onFocus="if(detailsBox.height>60){detailsBox.height=60;summaryBox.height=220;}"></cftextarea>
</cfform>
Any help on this issue would be much appreciated. Thanks, AeroNicko 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 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. Hey guys..... I've worked out how to get the value from a select option tag, but can't work out how to get the text inside the option tags. Here is the code I am using to get the value attribute from the option tag.. PHP Code: // Set the search results box var cats = document.getElementById('cat_list'); // Loop through categories from the search results select box for (i = 0; i < cats.length; i++) { // Check if the cat is selected if (cats.childNodes[i].selected == true) { // Set this category's values to some variables var cat_id = cats.childNodes[i].getAttribute('value'); } } Thanks! hi please help, i want to select numbers from a list box and add it to a text box with comma separated. my java script code does not work into browser but work fine into eclipse jsp view. Code: function passingNumbersToTextArea(numToCall,allNum)
{
var numFromList=document.getElementById(allNum);
var numToTextArea=document.getElementById(numToCall);
if(numToTextArea.value.search(numFromList.value)!=-1)//if duplicate Number is exist
{
alert("Duplicate Number Can not be added :");
return false;
}
else
{
if(numToTextArea.value.length!=0)
{
// If textarea has value than it added another value with comma seperated
numToTextArea.value=numToTextArea.value+','+numFromList.value;
return false;
}
else
{
numToTextArea.value=numFromList.value;
return false;
}
}
}
jsp code
<h:inputTextarea cols="10" rows="4" id="numberToCall" required="true"
value="#{conferenceCall.numberToCall}" styleClass="form_input_box" />
<h:selectOneListbox styleClass="form_selectmenu" id="allNumbers" size="5" onclick="passingNumbersToTextArea('numberToCall','allNumbers');">
<f:selectItem itemValue="9971701077" itemLabel="Sharad : 9971701077"/>
<f:selectItem itemValue="9990102381" itemLabel="Saurabh : 9990102381"/>
</h:selectOneListbox>
javascript debugger shows error Error ``numToTextArea is null'' [x-] in file ``http://localhost:8888/SparkServicePr...ystem/home.jsf'', line 21, character 0. Exception ``TypeError: numToTextArea is null'' thrown from function passingNumbersToTextArea(allNum=string:"allNumbers", numToCall=string:"numberToCall") in <http://localhost:8888/SparkServiceProvisioningSystem/home.jsf> line 21. [e] message = [string] "numToTextArea is null" Exception ``TypeError: numToTextArea is null'' thrown from function onclick(event=MouseEvent:{0}) in <http://localhost:8888/SparkServiceProvisioningSystem/home.jsf> line 1. [e] message = [string] "numToTextArea is null" Error ``TypeError: numToTextArea is null'' [x-] in file ``http://localhost:8888/SparkServicePr...ystem/home.jsf'', line 21, character 0. Thanks & Regards: Saurabh I have an existing form with radio buttons and a text input field: <input type="radio" name="recurringEnd" value="yes"> End after <input type="text" name="numberOccurrences" size="1"> occurrences <input type="radio" name="recurringEnd" value="date"> End on <input type="text" name="endDate" size="8"> My client now wants it setup so that if the text field is filled in, the radiobox is automatically selected. Any help on this would be greatly appreciated as I am not a JS programmer. Hi all ! I have written code for select options one. In that option one of the option is to select others. When i select others automatically the cursor should goto others text area box. Any suggessions please. 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>Smartcard Gen2</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" charset="utf-8"> var notEmpty=function(){ document.write("Problem Submitted, Thank You"); window.open(list.html); } </script> </head> </head> <body> <div class="container">, <div class="topbar"> <p>Report a Problem<a href="list.html" class="button back black"><span></span> ATM Details</a></p> </div> <div class="content"> <h6>Find ATMs by Address:</h6> <div class="box"> <table width="95%" border="0" align="center" cellpadding="8" cellspacing="0"> <tr> <td width="33%" align="right" valign="middle"><strong>Problem :</strong></td> <td> <FORM ACTION="#" NAME=latin> <SELECT NAME="words" > <option value="ATM NOT PRESENT">ATM not present</option> <option value="ATM IS BROKEN">ATM Broken</option> <option value="MASTERCARD IS NOT ACCEPTED">ATM doesnot accept MasterCard</option> <option value="ATM IS NOT ACCESSIBLE">ATM is not accessible</option> <option value="others" id="others">Others</option> </select> </FORM> </td> </td> </tr> </table> <div class="box"> <table width="95%" border="0" align="center" cellpadding="8" cellspacing="0"> <tr> <td width="33%" align="right" valign="middle"><strong>Other :</strong></td> <td width="67%" align="left" valign="top"><input name="textfield3" type="textarea" rows="25" coloumns="15" id="textfield3" placeholder=" " /></td> </tr> </table> </div> <a href="#" class="transactions" onclick="notEmpty();">Submit</a></div> </div> </body> </html> I've been tasked to create a form where the user types a numeric item id into a text field. Typing this numeric item id into the field will update a select list when the item id matches a select list value. Can anyone help me with this as I don't know where to start?
Hi there. With the below script I'm trying to validate if the user enters a quantity in the text box they must select a reason for ordering and if the user selects a reason code but forgets to enter a quantity it should alert to enter a quantity. Right now it validates the reason code but not the quantity. Please help. Code: <script>
function validateReason(){
var tr, i=1;
while(tr=document.getElementById('Child'+(i++))){
var txtV=tr.getElementsByTagName('input')[0].value
var selS=tr.getElementsByTagName('select')[0].selectedIndex;
if(txtV.length>0&&selS==0){alert('If you enter a quantity you must select a reason!');return false}
}
return true;
}
</script>
<form method="POST" onsubmit="return validateReason(this) ; " action="Order_Process.php" name="theForm" >
<table>
<tr id='Child1'>
<td><input type = 'text' MAXLENGTH='3'
style = 'width:40px'; class='textfield' name='quantity[]' ></td>
<td><select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'><option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='INSUFFICIENT' >INSUFFICIENT</option>
<option value='MISPLACED' >MISPLACED</option>
<option value='NOT ORDERED' >NOT ORDERED</option>
<option value='PLANOGRAM CHANGE' >PLANOGRAM CHANGE</option>
<option value='SHORT' >SHORT</option>
</select></td>
</tr>
<tr id='Child2'>
<td><input type = 'text' MAXLENGTH='3'
style = 'width:40px'; class='textfield' name='quantity[]' ></td>
<td><select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'><option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='MISPLACED' >MISPLACED</option>
<option value='SHORT' >SHORT</option>
</select></td>
</tr>
<tr id='Child3'>
<td><input type = 'text' MAXLENGTH='3'
style = 'width:40px'; class='textfield' name='quantity[]' ></td>
<td><select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'><option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='MISPLACED' >MISPLACED</option>
<option value='SHORT' >SHORT</option>
</select></td>
</tr>
</table>
<input type="submit" value="submit" name="submit">
</form>
Hi Guys i am a complete novice at ajax or javascript. I have been studying php for a while now and i know that, i am now starting php oop and that going well but i have never done anything like this. Anway i am creating a booking system which at the end of the process asks who supplied your voucher which they then select a supplier. The issue i have is my client wants it so if groupon is selected then an input text box should appear so that the user can input a security code from groupon. So basically it is Code: <select name="supplier" id="supplier"> <option value="">please select supplier</option> <option value="Groupon">Groupon</option> <option value="KGB Deals">KGB Deals</option> <option value="Other">Other</option> </select> So if value="Groupon" then Code: <input type="text" name="security" id="security" /> should appear next to it. Could someone please help me as the page cant refresh as it will lose its data which would have taken the user about 10 minutes to fill out Thanks in advance hi ! i would like to write the code for multiple text box select as shown in the link below: http://www.downloadplex.com/Mobile/I...ne_284120.html please see the screen shot 3 I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated. cursor: Quote: cursor bldglistc is select stvbldg_code, stvbldg_desc, slbbldg_street_line1, slbbldg_city, slbbldg_stat_code, slbbldg_zip from stvbldg, slbbldg where stvbldg_code = slbbldg_bldg_code (+) and stvbldg_desc not like 'DNU%' and stvbldg_desc not like 'Online%' order by slbbldg_bldg_code; bldg_record bldglistc%ROWTYPE; Javascript in package: Quote: htp.p(' <SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript"> function UpdateNextField(which1,which2,fld1,fld2) { document.getElementById(fld1).value = which1.value; document.getElementById(fld2).value = which2.value; } </SCRIPT> '); Form code from package: Quote: HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post'); twbkfrmt.P_FormHidden ('atyp', atyp); twbkfrmt.P_FormHidden ('seqno', seqno); twbkfrmt.p_tableopen ( 'DATAENTRY', cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."') ); twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5'); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'), idname => 'street_line1_input_id' ) ); twbkfrmt.p_tabledataopen (ccolspan => '5'); HTP.formselectopen ( 'str1', '', 1, cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"' ); OPEN bldglistc; LOOP FETCH bldglistc INTO bldg_record; IF bldglistc%NOTFOUND THEN EXIT; END IF; IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1 THEN twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1, 'selected' ); ELSE twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1 ); END IF; END LOOP; CLOSE bldglistc; HTP.formselectclose; twbkfrmt.p_tabledataclose; twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'), idname => 'street_line2_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'str2', 70, 75, address_rec.spraddr_street_line2, cattributes => 'ID="street_line2_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'), idname => 'zip_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'zip', NULL, 30, address_rec.spraddr_zip, cattributes => 'ID="zip_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tableclose; HTP.para; -- HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit')); HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset')); HTP.formclose; Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form? Thanks Everything up until the focus line works, any ideas? Code: else {
alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.");
document.delAdd.postcode.value = "";
document.delAdd.postcode.focus();}
|
|||||||