Submitting a form via javascript

Question

I researched how to submit a form via javascript but, in my case, I'm creating several forms based on a collection of data. I don't know the best way to reference the form ID.

<c:forEach 
    var="meeting" 
    items="${response.mMeetingList}"
    begin="0"
    end="5">

    <div class="row">

        <ul class="span4 unstyled">
            <li>
                <form name="mtgDetailsForm" action="/transporter/app/meeting/read" method="POST">
                <input type="hidden" name="meetingId" value="${meeting.meetingId} }">
                <a href="javascript: getMtgDetails()" class="row">
                    <div class="span1"><fmt:formatDate value="${meeting.startTime}" type="time" pattern="h:mm a"></fmt:formatDate></div>
                    <div class="span3">${meeting.meetingName}</div>
                </a>
                </form>
            </li>
        </ul>

    </div>

</c:forEach>

And here's the JS method for submitting the form:

function getMeetingDetails( data ){
        document.mtgDetailsForm.submit();
    }

Obviously, this will not work because the form ID will be duplicated. What's a better approach?

Thanks for any tips!

Well duplicate form IDs would be invalid anyways. Is there a reason you cannot have a single form with all these UL inside of it and just submit the entire form? — recneps
– recneps, Commented Jun 4, 2013 at 17:10
Why don't you just use a <button type="submit"> instead of that <a> tag? — Bergi
– Bergi, Commented Jun 4, 2013 at 17:15
Would you tag with the markup language you are using (jsp/asp/etc.)? — Aaron Kurtzhals
– Aaron Kurtzhals, Commented Jun 4, 2013 at 17:15
I'm using JSP. I was using a Form because that's how I read you can make a remote call using an A tag. — fumeng
– fumeng, Commented Jun 4, 2013 at 18:17
@Bergi, I'm not using a button because I'm wrapping 2 div tags within it and I don't want the button styling. — fumeng
– fumeng, Commented Jun 4, 2013 at 18:31

fmodos · Accepted Answer · 2013-06-04 17:25:42Z

1

I dont know the code you are using to generate the dynamic forms, but one approach would be to generate one id for each form, something like this:

 <form name="mtgDetailsForm${counter}">

Pass the form id by parameter to function

<a href="javascript: getMtgDetails('mtgDetailsForm${counter}')" class="row">

Get the form and submit it based in the parameter

function getMeetingDetails( formId ){
        document.getElementById(formId).submit();
    }

Also need to increment the counter inside the for loop ${counter++}

edited Jun 4, 2013 at 17:25

answered Jun 4, 2013 at 17:13

fmodos

4,5581 gold badge18 silver badges17 bronze badges

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

Comments

BrunoLM · Accepted Answer · 2013-06-04 18:28:43Z

1

You can reference the form from a, example on jsFiddle

function sub(e)
{
    var f = e.parentNode;

    // if using jQuery prefer this method to access `form`
    // var f = $(e).closest("form");

    f.submit();
}

Then

<a href="#" onclick="sub(this)">Submit</a>

edited Jun 4, 2013 at 18:28

answered Jun 4, 2013 at 17:13

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

2 Comments

Janus Troelsen Over a year ago

This is fragile (will break if the event origin is not an immediate child). I prefer .closest("form").submit()

BrunoLM Over a year ago

@JanusTroelsen me too, but he is not using jQuery I guess, and it would overly complicate the answer to implement it with pure js

Collectives™ on Stack Overflow

Submitting a form via javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related