Calling Javascript from a html form

Question

I am basing my question and example on Jason s answer in this question  I am trying to avoid using an eventListener  and just to call handleClick onsubmit  when the submit button is clicked   Absolutely nothing happens with the code I have   Why is handleClick not being called    lt html gt     lt head gt       lt script type  text javascript  gt        function getRadioButtonValue rbutton                  for  var i   0  i  lt  rbutton length    i                       if  rbutton i  checked              return rbutton i  value                    return null                 function handleClick event                  alert  Favorite weird creature    getRadioButtonValue this  whichThing              event preventDefault       disable normal form submit behavior         return false     prevent further bubbling of event              lt  script gt     lt  head gt   lt body gt       lt form name  myform  onSubmit  JavaScript handleClick    gt         lt input name  Submit   type  submit  value  Update  onClick  JavaScript handleClick     gt        Which of the following do you like best         lt p gt  lt input type  radio  name  whichThing  value  slithy toves    gt Slithy toves lt  p gt         lt p gt  lt input type  radio  name  whichThing  value  borogoves    gt Borogoves lt  p gt         lt p gt  lt input type  radio  name  whichThing  value  mome raths    gt Mome raths lt  p gt       lt  form gt   lt  body gt   lt  html gt    edit   Please do not suggest a framework as a solution   Here are the relevant changes I have made to the code  which results in the same behavior         function handleClick                   alert  Favorite weird creature    getRadioButtonValue document myform  whichThing               event preventDefault       disable normal form submit behavior         return false     prevent further bubbling of event              lt  script gt     lt  head gt   lt body gt   lt form name  aye  gt          lt input name  Submit   type  submit  value  Update  action  JavaScript handleClick     gt        Which of the following do you like best         lt p gt  lt input type  radio  name  whichThing  value  slithy toves    gt Slithy toves lt  p gt         lt p gt  lt input type  radio  name  whichThing  value  borogoves    gt Borogoves lt  p gt         lt p gt  lt input type  radio  name  whichThing  value  mome raths    gt Mome raths lt  p gt       lt  form gt

User · Answer

There are a few things to change in your edited version:

You've taken the suggestion of using document.myform['whichThing'] a bit too literally. Your form is named "aye", so the code to access the whichThing radio buttons should use that name: `document.aye['whichThing'].
There's no such thing as an action attribute for the <input> tag. Use onclick instead: <input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/>
Obtaining and cancelling an Event object in a browser is a very involved process. It varies a lot by browser type and version. IE and Firefox handle these things very differently, so a simple event.preventDefault() won't work... in fact, the event variable probably won't even be defined because this is an onclick handler from a tag. This is why Stephen above is trying so hard to suggest a framework. I realize you want to know the mechanics, and I recommend google for that. In this case, as a simple workaround, use return false in the onclick tag as in number 2 above (or return false from the function as stephen suggested).
Because of #3, get rid of everything not the alert statement in your handler.

The code should now look like:

function handleClick()
      {
        alert("Favorite weird creature: "+getRadioButtonValue(document.aye['whichThing']));
      }
    </script>
  </head>
<body>
    <form name="aye">
      <input name="Submit"  type="submit" value="Update" onclick="handleClick();return false"/>
      Which of the following do you like best?
      <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
      <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
      <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
    </form>

User · Answer

You can either use javascript url form with    lt form action  javascript handleClick    gt    Or use onSubmit event handler   lt form onSubmit  return handleClick    gt    In the later form  if you return false from the handleClick it will prevent the normal submision procedure  Return true if you want the browser to follow normal submision procedure   Your onSubmit event handler in the button also fails because of the Javascript  part  EDIT  I just tried this code and it works    lt html gt     lt head gt       lt script type  text javascript  gt         function handleIt             alert  hello                  lt  script gt     lt  head gt    lt body gt       lt form name  myform  action  javascript handleIt    gt         lt input name  Submit   type  submit  value  Update   gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

Remove javascript  from onclick      onsubmit     declarations  javascript  prefix is used only in href    or similar attributes  not events related

User · Answer

Everything seems to be perfect in your code except the fact that handleClick   isn t working because this function lacks a parameter in its function call invocation but the function definition within  has an argument which makes a function mismatch to occur    The following is a sample working code for calculating all semester s total marks and corresponding grade  It demonstrates the use of a JavaScript function call  within a html file and also solves the problem you are facing    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt  Semester Results  lt  title gt   lt  head gt   lt body gt       lt h1 gt  Semester Marks  lt  h1 gt   lt br gt        lt script type    text javascript  gt          function checkMarks total                        document write   lt h1 gt  Final Result      lt  h1 gt  lt br gt                 document write  Total Marks       total     lt br gt  lt br gt                 var avg   total   6 0              document write  CGPA        avg   10 0  toFixed 2      lt br gt  lt br gt                 if avg  gt   90                  document write  Grade   A                else if avg  gt   80                  document write  Grade   B                else if avg  gt   70                  document write  Grade   C                else if avg  gt   60                  document write  Grade   D                else if avg  gt   50                  document write  Grade   Pass                else                 document write  Grade   Fail                  lt  script gt       lt form name    myform  action    javascript checkMarks Number s1 value    Number s2 value    Number s3 value    Number s4 value    Number s5 value    Number s6 value     gt          Semester 1    lt input type    text  id    s1   gt   lt br gt  lt br gt          Semester 2    lt input type    text  id    s2   gt   lt br gt  lt br gt          Semester 3    lt input type    text  id    s3   gt   lt br gt  lt br gt          Semester 4    lt input type    text  id    s4   gt   lt br gt  lt br gt          Semester 5    lt input type    text  id    s5   gt   lt br gt  lt br gt          Semester 6    lt input type    text  id    s6   gt   lt br gt  lt br gt  lt br gt           lt input type    submit  value    Submit   gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

Pretty example by Miquel   32  should be refilled    lt html gt    lt head gt     lt script type  text javascript  gt     function handleIt txt         txt    content of form input     alert  Entered value      txt           lt  script gt    lt  head gt    lt body gt    lt  -- javascript function in form action must have a parameter  This      parameter contains a value of named input -- gt     lt form name  myform  action  javascript handleIt lastname value   gt        lt input type  text  name  lastname  id  lastname  maxlength  40  gt       lt input name  Submit   type  submit  value  Update   gt     lt  form gt    lt  body gt   lt  html gt    And the form should have    lt form name  myform  action  javascript handleIt lastname value   gt

User · Answer

In this bit of code   getRadioButtonValue this  whichThing       you re not actually getting a reference to anything  Therefore  your radiobutton in the getradiobuttonvalue function is undefined and throwing an error    EDIT To get the value out of the radio buttons  grab the JQuery library  and then use this        input name whichThing  checked   val      Edit 2  Due to the desire to reinvent the wheel  here s non-Jquery code   var t       for  i 0  i lt document myform whichThing length  i           if  document myform whichThing i  checked  true             t   t   document myform whichThing i  value             or  basically  modify the original line of code to read thusly    getRadioButtonValue document myform whichThing     Edit 3 Here s your homework         function handleClick             alert  Favorite weird creature      getRadioButtonValue document aye whichThing              event preventDefault       disable normal form submit behavior         return false     prevent further bubbling of event              lt  script gt     lt  head gt   lt body gt   lt form name  aye  onSubmit  return handleClick    gt        lt input name  Submit   type  submit  value  Update    gt       Which of the following do you like best        lt p gt  lt input type  radio  name  whichThing  value  slithy toves    gt Slithy toves lt  p gt        lt p gt  lt input type  radio  name  whichThing  value  borogoves    gt Borogoves lt  p gt        lt p gt  lt input type  radio  name  whichThing  value  mome raths    gt Mome raths lt  p gt   lt  form gt    Notice the following  I ve moved the function call to the Form s  onSubmit  event  An alternative would be to change your SUBMIT button to a standard button  and put it in the OnClick event for the button  I also removed the unneeded  JavaScript  in front of the function name  and added an explicit RETURN on the value coming out of the function    In the function itself  I modified the how the form was being accessed  The structure is  document  THE FORM NAME   THE CONTROL NAME  to get at things  Since you renamed your from aye  you had to change the document myform  to document aye  Additionally  the document aye  whichThing   is just wrong in this context  as it needed to be document aye whichThing   The final bit  was I commented out the event preventDefault     that line was not needed for this sample    EDIT 4 Just to be clear  document aye  whichThing   will provide you direct access to the selected value  but document aye whichThing gets you access to the collection of radio buttons which you then need to check    Since you re using the  getRadioButtonValue object   function to iterate through the collection  you need to use document aye whichThing     See the difference in this method   function handleClick        alert  Direct Access      document aye  whichThing        alert  Favorite weird creature      getRadioButtonValue document aye whichThing       return false     prevent further bubbling of event

[javascript] Calling Javascript from a html form

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to dom-events