仅在单击特定按钮时提交数据

Question

I have two textareas each with their own submit button like so:

<textarea style="width: 200px; height: 22px; resize: none" type="text" name="housetypeData"></textarea> 
<input type="submit" name="newHousetype" value="New house"></input>

<textarea style="width: 200px; height: 22px; resize: none" type="text" name="architectData"></textarea> 
<input type="submit" name="newArchitect" value="New architect"></input>

and php responds according to posted data like so:

if (!empty($_POST['housetypeData'])) {

    echo 'new housetype';
}
elseif (!empty($_POST['architectData'])) {

    echo 'new architect';
}

Problem is no matter in which field I type the text, both buttons will submit data. How do I make it so that only button with name "newHousetype" submits data of field "housetypeData" and the same for other two?

Answer 1

You have both submit buttons inside the same form. Of course they will submit the same content. Try using two separate forms.

<form action="test4.php" method="POST">
    <textarea style="width: 200px; height: 22px; resize: none" type="text" name="housetypeData"></textarea> 
    <input type="submit" name="newHousetype" value="New house"></input>
</form>
<form action="test4.php" method="POST">
    <textarea style="width: 200px; height: 22px; resize: none" type="text" name="architectData"></textarea> 
    <input type="submit" name="newArchitect" value="New architect"></input>
</form>

try this...

Answer 2

为此，您将需要两个<form> 。

Answer 3

If you don't wanna use 2 forms, you should use some javascript.

Put an onclick event listener on the two submit button.

// U'll need to add an id to you're button 
$('#newHousetype').click(function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    $("#newArchitect").remove(); // Remove the other textarea
    $('#myForm').submit(); // Submit the form
});