send post data on button click which is not the submit button of a form using Javascript

Question

I have a form as show by the following code in HTML 5.

<form name='removeTen' method='POST' action='notRemove.php'>
<table id='tender'>
<thead>
<tr><th></th>
<th><input id='selectAll' type='checkbox'></th>
<th>Notice Title</th>
<th>Edit </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="checkbox" name="ten[]" value="1"</td>
<td>somedata1</td>
<td><input type = 'button' value = 'Edit' name ='1' ></td>
</tr>
<tr>
<td>2</td>
<td><input type="checkbox" name="ten[]" value="2"</td>
<td>somedata1</td>
<td><input type = 'button' value = 'Edit' name ='2' ></td>
</tr>
</tbody></table><p><input type=reset value='Reset'>
<input type=submit value='Submit'></p>
</form>

Now I want to redirect to another page notEdit.php with post data that is contained in the name of the button when I click the buttons Edit. I also want to keep the functionality of the form using the submit button. I have added the following Javascript code:

var buttons = document.getElementsByName("edit");
for(var i = 0, count = buttons.length; i<count; i++){
    buttons[i].attachEvent("click", submit);
}

Now in the submit function I can add window.location to redirect to another page. But How can I attach the post data?

why not set form action to 'notEdit.php'? that will automatically post your data to notEdit.php page. — gp.
– gp., Commented May 25, 2015 at 15:42
Maybe you can switch the action path just before submiting it and after you don't need it eny more for your usability purposes — Vandervals
– Vandervals, Commented May 25, 2015 at 15:46
@gp. the form action is to delete the elements that are selected using the checkboxes in the table. While clicking the button in the table would result to editing the selected Item. — Blip
– Blip, Commented May 25, 2015 at 15:52

gp. · Accepted Answer · 2015-05-26 02:14:22Z

in click handler function, get the row number from the clicked button's name. set this to an input field of another form and trigger submit on that form.

function submit(e){
    //get the clicked button's "name" attribute value.
    var row_no = e.currentTarget.name;
    alert(row_no);

    //set the value to the edit form
    var row_no_element = document.querySelector("input[name=row_no]");
    row_no_element.value = row_no;

    //submit the edit form. uncomment this line to submit.
    //document.getElementById("editForm").submit();
}

var buttons = document.querySelectorAll("input[type=button]");
for(var i = 0, count = buttons.length; i<count; i++){
    buttons[i].addEventListener("click", submit);
}

The new form to be submitted for edit:

<form id="editForm" action='notEdit.php' method="POST">
    <input type="hidden" name="row_no" />
</form>

JSFiddle (with html correction): http://jsfiddle.net/xfLa3tnb/

Riad Baghbanli · Accepted Answer · 2015-05-25 17:37:45Z

0

<form name='actionForm' method='POST' action='actionEditOrRemove.php'>

Use hidden input to pass action (Edit or Remove).

edited May 25, 2015 at 17:37

answered May 25, 2015 at 15:50

Riad Baghbanli

3,3461 gold badge17 silver badges23 bronze badges

4 Comments

Blip Over a year ago

I do not want to change the action of the form as notRemove.php deletes the selected items from the database while notEdit.php edits the individual items in a new form.

Riad Baghbanli Over a year ago

I have updated the answer to satisfy the requirement. Is it something you considering?

Blip Over a year ago

do you mean to say that I pass the post to a new php file actionEditOrRemov.php? But how do I identify which row button was clicked to open the edit window?

Riad Baghbanli Over a year ago

Same as when you post to notRemove.php. Essentially clicking on the submit button will select action and submit the form, so in PHP code you act on what needed to be done, Edit or Remove based on action input on the form submitted.

Collectives™ on Stack Overflow

send post data on button click which is not the submit button of a form using Javascript

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related