Rewriting javascript to jquery for multiple forms on a page

Question

I have a question concerning multiple similair forms on one page. Lets say you have a page with two or more polls. The HTML forms in itselves are very similair. Previously the was a soltuion built with inline javascript. Which is of course not the nicest solution. The way it was built is that eacht poll form had its own js function. But this is not wat I want anymore.

How Can i rewrite the script so that it knows wich form was submitted.

Here is the current form:

 <div style="display:block;">
    <form name="pollvoteform3" method="post" xaction="">
        <input type="hidden" name="poll" value="3">
        <input type="hidden" name="cmd" value="">
        <div class="poll">
            <div class="pollOption">
                <div class="pollRadio"><input type="radio" name="poll_option3" value="1"></div>
                <div class="pollOptionText">Option 1</div>
            </div>
            <div class="pollOption">
                <div class="pollRadio"><input type="radio" name="poll_option3" value="2"></div>
                <div class="pollOptionText">Option 2</div>
            </div>
           <p> <input type="button" name="bt_submit" class="pollButtonNormal" onmouseover="this.className='pollButtonHigh';" onmouseout="this.className='pollButtonNormal';" value="Stem" onclick="javascript:vote3();">
            <input type="button" name="bt_submit" class="pollButtonNormal" onmouseover="this.className='pollButtonHigh';" onmouseout="this.className='pollButtonNormal';" value="Resultaten" onclick="javascript:viewResults3();"></p>
        </div>
    </form>
</div>
<div style="display:none;">
    <form><input type="button" name="bt_submit" class="pollButtonNormal" onmouseover="this.className='pollButtonHigh';" onmouseout="this.className='pollButtonNormal';" value="Resultaten" onclick="javascript:viewResults3();"></form>
</div>

edit:

how can i rewrite this:

function vote1() {
    r=document.forms.pollfvoteform3.poll_option3
    var voted=false;
    if (r.value!=null && r.checked)
    {
        voted=true;
    } else {
        for (i=0;i<r.length;i++){
            if (r[i].checked) {
                voted=true;
                break;
            }
        }
    }
    if (voted) {
        document.forms.pollvoteform3.submit();
    } else {
        alert("Youre wrong!.");
    }
}

to jquery.

kgiannakakis · Accepted Answer · 2009-06-11 09:49:59Z

1

You need to give an id and a common class to your forms:

<form name="form1" class="myforms" id="form1">

Then you can assign event handlers for both forms in one go:

$(".myforms").submit(function() {
  formId = $(this)[0].id;
});

As you can see wrapping this into a jQuery wrapped set can easily give you the id of the specific form.

answered Jun 11, 2009 at 9:49

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

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

4 Comments

sanders Over a year ago

what does the [0] mean in this line: formId = $(this)[0].id;

kgiannakakis Over a year ago

this is a DOM element. $(this) is a jQuery wrapped set. $(this).get(0), or $(this)[0] gives you back a DOM element. You could of course have used this.id, but with $(this) you can use convenient jQuery functions, like $(this).attr("name") to read attributes.

sanders Over a year ago

does it mean you want to get a form with id '0' ?

kgiannakakis Over a year ago

Sorry for the confusion. You can get the id of the form that is being submitted with this.id. If you want to create a jQuery wrapped set use $(this). You can ignore $(this)[0]. This gets the first DOM element of the wrapped set. As $(this) has only one element, it returns the form that is being submitted. It has nothing to do with the id of the form.

Collectives™ on Stack Overflow

Rewriting javascript to jquery for multiple forms on a page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related