Javascript question about forms

Question

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.

Answer 1

Hi

 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.

Answer 2

This should work:

document.getElementById("input1").value.length > 0

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

It could also be

 if(document.getElementById("input1").value){
  /* code */
 }

because an empty string will evaluate to false.