jQuery Ajax Request with multiple forms

Question

I am producing multiple forms from my php code as shown below.

The problem is that, If I want to perform a jquery-ajax request, How can I refer to a form. My goal is that when the submit button is clicked, the relevant data from that form should be posted.

Previously, I was referring to form with its $('#id').submit() function. But I am stuck here since all of the forms have the same name.

<form id="view-doc" method="post" target="report" action="../classes/openDoc.php">
<input type="hidden" id="id" name="id" value="1"/>
<input type="hidden" id="filename" name="filename" value="Research Writer Test 8.doc" />
<input type="hidden" id="filetype" name="filetype" value="doc" />
<td><input type="submit" class="s-button btn_normal" id="submit" value="View" onsubmit="window.open(about:blank,report,width=300,height=200)" />
</form>

<form id="view-doc" method="post" target="report" action="../classes/openDoc.php">
<input type="hidden" id="id" name="id" value="2"/>
<input type="hidden" id="filename" name="filename" value="template[1].IEEEdoc.doc" />
<input type="hidden" id="filetype" name="filetype" value="doc" />
<input type="submit" class="s-button btn_normal" id="submit" value="View" onsubmit="window.open(about:blank,report,width=300,height=200)" />
</form>

<form id="view-doc" method="post" target="report" action="../classes/openDoc.php">
<input type="hidden" id="id" name="id" value="3"/>
<input type="hidden" id="filename" name="filename" value="Assignment #3.docx" />
<input type="hidden" id="filetype" name="filetype" value="ocx" />
<input type="submit" class="s-button btn_normal" id="submit" value="View" onsubmit="window.open(about:blank,report,width=300,height=200)" />
</form>

Abdul Munim · Accepted Answer · 2011-11-20 17:11:20Z

1

id attribute has to be unique. If possible please consider view-doc-1, view-doc-2 and view-doc-3 for the forms' id.

Otherwise, use class instead of id and do this on JavaScript:

$(".view-doc input[type=submit]".bind('click', function() {
   // your code when button clicked. fired on all the 3 buttons
});

answered Nov 20, 2011 at 17:11

Abdul Munim

19.2k8 gold badges54 silver badges61 bronze badges

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

2 Comments

Abdul Munim Over a year ago

This will execute only the submit button you click on!

user478636 Over a year ago

Thanks, by the way can we use same names but different id's?. for example view-doc-1 and view-doc-2 will have same name (view-doc) but different id's. Perhaps I can use like this.

Collectives™ on Stack Overflow

jQuery Ajax Request with multiple forms

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related