CODEWITHSUNDEEP
phphtml
MtDemonics
MtDemonics

Reputation: 235

PHP - Multiple form buttons with different actions

I have a simple form in HTML that contains two buttons. Button 1 which action in the form tag submits it to another php page e.g. button1-action.php which submits data to a third party API and Button 2 which I want to submit to the same page if it is clicked without going to button1-action.php. In its simplest method the form is as follows:

<?php 
echo '<form name="form123" id="form123" action="button1-action.php" method="POST">';
echo '<input type="text" name="first_name" id="first_name></input>';
echo '<button name="button1" id="button1" value="button1">Button 1</button>';
echo '<button name="button2" id="button2" value="button2">Button 2</button>';

echo '</form>';

?>

This is what I tried so far

$action = null;
if (isset($_POST['button1'])) {
  $action = 'button1-action.php';
} elseif (isset($_POST['button2'])) {
  $action = $_SERVER["PHP_SELF"];
}
echo '<form name="form123" id="form123" action="' . $action . '" method="POST">';
echo '<input type="text" name="first_name" id="first_name></input>';
echo '<button name=" button1" id="button1" value="button1">Button 1</button>';
echo '<button name="button2" id="button2" value="button2">Button 2</button>';

echo '</form>';

However, it doesn't seem to be working. I tried to look for solutions but I haven't been successful.

I'm interested in any solution, but I would prefer solving it using PHP and not JavaScript.

Upvotes: 0

Views: 726

Answers (5)

Phortuin
Phortuin

Reputation: 770

Edit: ignore my solution; Virender Kumar’s solution here is correct, elegant and doesn’t need JS.

Original answer: The issue is not with your buttons, but with the fact that a form can only post to a single endpoint (the action attribute). You will have to handle what happens with the form data from there. If you truly want your form to be posted to a different endpoint in the client based on what button the user clicks, you can’t do it without JavaScript.

If you can live with JS, this could work:

<body>
  <!-- your form here -->

  <script>
    const form = document.forms[0]; // assuming your form is the first form on the page, or the only one
    document.querySelectorAll('button').forEach(button => {
      button.addEventListener('click', event => {
        if (event.target.name === 'button1') {
          form.action = 'button1-action.php';
        } else if (event.target.name === 'button2') {
          form.action = 'other-destination';
        }
      });
    });
  </script>
</body>

Upvotes: 1

ADyson
ADyson

Reputation: 62074

You appear to be using the value submitted from the form to set the action of the form. This makes no sense - by the time you read the submitted values, the action has already happened. So your code would just set the action for next time the form is submitted. Not useful.

At the heart of this there seems to be a conceptual / design issue. A more sensible approach (but not the only one) would be to simply post the form to the same place every time, and then use if statements to decide what to do next.

e.g.

if (isset($_POST['button1'])) {
  require_once "button1-action.php";
} elseif (isset($_POST['button2'])) {
  //do whatever it is you want to do in ths script
}
else {
?>
  <form name="form123" id="form123" method="POST">';
    <input type="text" name="first_name" id="first_name></input>
    <button name=" button1" id="button1" value="button1">Button 1</button>
    <button name="button2" id="button2" value="button2">Button 2</button>
    </form>
<?php
}

To improve a bit more on that, instead of using a bare require to include the code from another script, we could encapsulate the code from button1-action.php into a function which we can call, instead of a script with global scope. This makes the code more re-usable, maintainable, testable, less likely to cause scope conflicts, etc.

e.g.

if (isset($_POST['button1'])) {
  callTheApi($_POST["first_name"]);
} elseif (isset($_POST['button2'])) {
  doSomethingElse($_POST["first_name"]);
}
else {
?>
  <form name="form123" id="form123" method="POST">';
    <input type="text" name="first_name" id="first_name></input>
    <button name=" button1" id="button1" value="button1">Button 1</button>
    <button name="button2" id="button2" value="button2">Button 2</button>
    </form>
<?php
}

(Even better if you then encapsulate that function in a class containing closely related functionality, but let's just get as far as a funtion for now.)

Alternatively, Virender Kumar's answer would also be reasonable - simply setting the form action of each button directly.

Upvotes: 1

Virender Kumar
Virender Kumar

Reputation: 182

This is the solution for you in html

<form name="form123" id="form123"  method = "post">
<input type="text" name="first_name" id="first_name"></input>
<button name=" button1" id="button1" value="button1" formaction="button1-action.php" >Button 1</button>
<button name="button2" id="button2" value="button2" >Button 2</button> 
</form>

button 1 will submit the form to button1-action.php and button 2 will submit the form to same page.

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction

Upvotes: 2

Biswajit Biswas
Biswajit Biswas

Reputation: 1045

First of all your form is not structured properly.

index.php

<form name="form123" id="form123" action="button1-action.php">
    <input type="text" name="first_name" id="first_name"></input>
    <button name=" button1" id="button1" value="button1">Button 1</button>
    <button name="button2" id="button2" value="button2">Button 2</button>
 </form>

button1-action.php

if (isset($_GET['button1'])) {
  echo 'button1 submitted'; // Send data to the third party API
} else if (isset($_GET['button2'])) {
  echo 'button1 submitted'; // Submit on the same page
}

Upvotes: 1

Ahsan Aman
Ahsan Aman

Reputation: 31

The Issue might be that you forgot to close the <form> tag with </form> and you should use the <input> for buttons aswell with type="submit" . If this still doesn't resolve your issue then maybe you should try this :

On the same page.

    <?PHP
 ////  place this on top
         if($_POST["button1"]) {

         // add code to send data to Third Party API

             }

         if($_POST["button2"]) {

           //  will show data here 

            } ?>
////////



<?php 
echo '<form name="form123" id="form123" action="/">';
echo '<input type="text" name="first_name" id="first_name></input>';
echo '<input type="submit" name="button1" id="button1" value="button1" >';
echo '<input type="submit" name="button2" id="button2" value="button2" >';
echo '</form>';
?>

I hope this answers your question 😊

Upvotes: 2

Related Questions