In form: Submit different button to transfer to different page (html)-CodePudding

my current code:

<html>
<body>

<h1>Select button </h1>

<form method="get">

  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>

Choose your page when submit:
<button name="subject" type="submit" value="aa">Page A</button>
<button name="subject" type="submit" value="bb">Page B</button>
</form>

</body>
</html>

How can i make codiontion for flow : click button "page A" redirect to "http://linkA" or click button "page B" to redirect to "http://linkB"

Thank you

CodePudding user response：

You have many options:

Use a regular link, and style it like a button in CSS
Use Javascript: onclick="window.location='TARGET';"
Put each submit button in its own form with different action parameter
Use formaction HTML attribute (Use This!)

<form method="get" action="pageA">    
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    
    Choose your page when submit:
    <button name="subject" type="submit" value="aa">Page A</button>
    <button name="subject" type="submit" value="bb" formaction="/pageB">Page B</button>
</form>

CodePudding user response：

You can try to using this custom code

Html Code

<html>
<body>

<h1>Select button </h1>

<form method="get" id="form-one" action="">
<form method="get" id="form-two" action="" style="display:none">

  <button name="subject" type="submit" id="button-one" value="aa">Page A</button>
  <button name="subject" type="submit" id="button-two" value="bb">Page B</button>

</form>

</body>
</html>

Javascript Code

 $("#button-one").click(function(){
      $('#form-one').show();
      $('#form-two').hide();
});

$("#button-two").click(function(){
    $('#form-one').hide();
    $('#form-two').show();
});