开发者

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
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜