Javascript question about forms
I have a form with 2 text inputs and 2 radio buttons, as below:
<form id="form1" method="get" onSubmit="exec()" action="default.html">
<label>First input<label>
<input type="text" id="input1"/><br />
<label>Second input</label>
<input type="text" id="input2"/><br />
<label>Radio button 1</label>
<input type="radio" id="radio1"/>
<label>Radio Button 2</label>
<input type="radio" id="radio2"/><br />开发者_开发百科;
<input type="submit" value="Search">
</form>
Once the user hits the Search button the exec()
method will be invoked, and this is what I am looking for help with. As you can see from the code above the default action is pointing to a page called default.html
, but this could change depending on the input box the user entered text into and the radio button selected. So I think my exec()
method should look something like this:
function exec()
{
if(document.getElementById("radio1").checked) &&
if(document.getElementById("input1").**has text entered by user**
{
document.getElementById("form1").setAttribute("action", "AnotherPage.html")
}
}
I think the code I have there should work, that is if I knew what the syntax should be where I have entered "has text entered by user". Can anyone tell me what that syntax should be? Am I going the right way about doing this or is there a better way?
Thanks in advance.
document.getElementById("input1").has text entered by user
should be
document.getElementById("input1").value.length > 0
I would strongly recommend spending 10 minutes looking a jQuery. Just reference the jquery.js in your page and you'll eliminate your next headache which is cross browser incompatibility.
Despite not knowing how to detect text, your if statement is a bit off...
function exec()
{
if (document.getElementById("radio1").checked && document.getElementById("input1").value != "")
{
document.getElementById("form1").setAttribute("action", "AnotherPage.html")
}
}
There are some additional cases to handle though... what if the user has selected option 1 but not entered text? You may want to change your onSubmit="exec()"
to onSubmit="return exec()"
and return false
from your exec function if certain conditions aren't met.
This should work:
document.getElementById("input1").value.length > 0
function exec()
{
if(document.getElementById("radio1").checked && document.getElementById("input1").value!='')
{
document.getElementById("form1").setAttribute("action", "AnotherPage.html")
}
}
I have reformatted your IF statement.
Be warned though, fields need a NAME attribute if they're going to be sent to the server, not just an ID.
It could also be
if(document.getElementById("input1").value){
/* code */
}
because an empty string will evaluate to false.
Property value
stores the text entered into field. You need to trim whitespace before checking its length, so something like this might work for you:
document.getElementById("input1").value.replace(/^\s*|\s*$/g, '').length > 0
精彩评论