CODEWITHSUNDEEP
javascripthtml
Blip
Blip

Reputation: 3171

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

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?

Upvotes: 0

Views: 2781

Answers (2)

gp.
gp.

Reputation: 8225

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/

Upvotes: 1

Riad Baghbanli
Riad Baghbanli

Reputation: 3319

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

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

Upvotes: 0

Related Questions