tags:

views:

2310

answers:

5
+2  Q: 

calling javascript from a html form

I am basing my question and example on Jason's answer in this question

I am trying to avoid using an eventListner, 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?

<html>
  <head>
    <script type="text/javascript">
      function getRadioButtonValue(rbutton)
      {
        for (var i = 0; i < 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
      }
    </script>
  </head>
<body>
    <form name="myform" onSubmit="JavaScript:handleClick()">
      <input name="Submit"  type="submit" value="Update" onClick="JavaScript:handleClick()"/>
      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>
</body>
</html>

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
      }
    </script>
  </head>
<body>
<form name="aye">;
      <input name="Submit"  type="submit" value="Update" action="JavaScript:handleClick()"/>
      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>
+1  A: 

Remove "javascript:" from onclick=".., onsubmit=".. declorations

"javascript:" prefix is used only in href="" or similar attributes (not events related)

Koistya Navin  2009-03-25 21:25:10
+3  A: 

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<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
      }
    </script>
  </head>
<body>
<form name="aye" onSubmit="return handleClick()">
      <input name="Submit"  type="submit" value="Update" />
      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>

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
}
Stephen Wrighton  2009-03-25 21:25:16
+1, this is correct
womp  2009-03-25 21:38:55
How else would I get the value of a radioButton?
Joshxtothe4  2009-03-25 22:05:01
Use getRadioButtonValue(document.myform['whichThing']). I'm glossing over javascript OO a bit here, but "this" is used to refer to an object when a function is part of the object scope. Your example uses top-level functions and no objects.
Jarret Hardie  2009-03-25 23:28:53
Ahh, this is failing as well. Can you give more of an example?
Joshxtothe4  2009-03-26 02:32:26
Failing in which way? Make sure you've eliminated the dual calls to handleClick() as Miquel suggests.
Jarret Hardie  2009-03-26 02:43:36
Please do NOT recommend jquery. I want to understand this without the help of a library.
Joshxtothe4  2009-03-26 16:19:12
If you didn't want JQuery (or some other library) referenced then you should have stated such in the OP. Frankly, it's insane to NOT utilize a library when available
Stephen Wrighton  2009-03-26 16:32:55
I am reposting my code to show what I have now, and that it is not working.
Joshxtothe4  2009-03-26 17:26:18
I'd mod you up further stephen if I hadn't already voted for your answer.
Jarret Hardie  2009-03-26 17:52:10
Thanks for all your help. I just wanted to ask why in Jarrets answer is document.aye['whichThing'] used successfully to get the actual value fro favorite weird creature, which is the opposite of this example?
Joshxtothe4  2009-03-27 01:31:35
it's just a different way of getting at the data. doc.aye['which'] is saying "get the VALUE of WHICH from the form "document.aye" while doc.aye.which is saying get me the OBJECT(s) of which from the form.
Stephen Wrighton  2009-03-27 03:09:09
+3  A: 

You can either use javascript url form with 

<form action="javascript:handleClick()">

Or use onSubmit event handler

<form onSubmit="return handleClick()">

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:

<html>
  <head>
    <script type="text/javascript">

      function handleIt() {
        alert("hello");
      }

    </script>
  </head>

<body>
    <form name="myform" action="javascript:handleIt()">
      <input name="Submit"  type="submit" value="Update"/>
    </form>
</body>
</html>
Miquel  2009-03-25 21:33:48
I tried both of these, neither made any difference, no alert was shown regardless of what I tried.
Joshxtothe4  2009-03-25 22:06:30
Please see my edit, the solution works
Miquel  2009-03-25 23:13:22
Joshxtothe4 is right... his alert is failing, not primarily because his function isn't being called, nor because it's being called twice due to doubling the javascript event call, but because the this["whichThing"] construct is causing an error.
Jarret Hardie  2009-03-25 23:25:04
A: 

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

  1. 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'].

  2. 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"/>

  3. 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).

  4. 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>
Jarret Hardie  2009-03-26 17:51:19
Thanks for all your help. I chose Stephens answer as I felt he put a lot more work in, but your answer was also very helpful. Cheers.
Joshxtothe4  2009-03-27 01:32:29
A: 

i already wrote javascript coding. i need only to call that code in to my HTML documents

jav  2010-09-29 10:57:11

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?