Example HTML + JS Form doesn't work

Question

It's my first time attempting Javascript, but after about two hours I haven't been able to figure out what mistake I'm making. I'm sure it's something small, but I haven't been able to figure out why it doesn't work in JSFiddle.

Here's the HTML:

<form name="myForm" onsubmit="return validateForm()" method="post">
<!--Question Block One-->
Do you have a name?
<br>
Yes<input type="radio" name="first" value="yes"> 
No<input type="radio" name="first" value="no">
<br>
<input type="submit" value="Submit">
</form>

Here's the JS:

function validateForm()
{
var x=document.forms["myForm"]["first"].value;
if (x==null || x=="")
  {
  alert("Please answer the first question!");
  return false;
  }
 else if (x=="yes")
 {
   alert("Thanks");

 }
    else if (x=="no"
 {
  alert("Sorry, we can't help");
 }
}

The error:

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x9b6da8c>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x98e9c0c>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x9b6da8c>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0x9ccfe4c>, 'help_text': '', 'name': 'js_wrap'}"}

And here's the JS Fiddle: http://jsfiddle.net/4WesX/

Mathew Thompson · Accepted Answer · 2013-05-29 14:47:48Z

3

You're missing a closing bracket on one of your else if statements, see here:

else if (x=="no"

EDIT: Actually, it's more of a problem than that.

You're not querying the value of those radio buttons properly. First, give them IDs:

Yes<input type="radio" id="yes" name="first" value="yes"> 
No<input type="radio" id="no" name="first" value="no">

Then you can do:

function validateForm()
{
    var yes = document.getElementById("yes");
    var no = document.getElementById("no");

    if (!yes.checked && !no.checked)
    {
        alert("Please answer the first question!");
        return false;
    }
    else if (yes.checked)
    {
        alert("Thanks");
    }
    else if (no.checked)
    {
        alert("Sorry, we can't help");
    }
}

Fiddle

edited May 29, 2013 at 14:47

answered May 29, 2013 at 14:32

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

EGHDK Over a year ago

Oh dear. Time for bed. EDIT: Actually, it still doesn't seem to work.

Mathew Thompson Over a year ago

@EGHDK It won't work in the Fiddle because JavaScript events embedded into HTML won't fire on JSFiddle.

EGHDK Over a year ago

Gotcha. Appreciate the help. Thanks again EDIT: Actually, now on a plain webpage it keeps firing off the first alert. Ideas?

Mathew Thompson Over a year ago

@EGHDK Ah another problem, it can't get that value, can you give the radio buttons an ID?

EGHDK Over a year ago

I can do whichever, as long as I can get this simple form to function. I thought by giving a "name" it would be able to grab the value... no?

|

Collectives™ on Stack Overflow

Example HTML + JS Form doesn't work

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related