How to Place Two Forms on the Same Page

How to place two forms on the same page?

You could make two forms with 2 different actions

<form action="login.php" method="post">
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<br />

<form action="register.php" method="post">
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="submit" value="Register">
</form>

Or do this

<form action="doStuff.php" method="post">
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="hidden" name="action" value="login">
    <input type="submit" value="Login">
</form>

<br />

<form action="doStuff.php" method="post">
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="hidden" name="action" value="register">
    <input type="submit" value="Register">
</form>

Then you PHP file would work as a switch($_POST['action']) ... furthermore, they can't click on both links at the same time or make a simultaneous request, each submit is a separate request.

Your PHP would then go on with the switch logic or have different php files doing a login procedure then a registration procedure

2 forms on same page php

The action represent the page that will receive the posted data. You may use differents actions or the same action with different parameters.
If you use the same action, you had to insert a parameter that permit to manage different cases. You may insert an hidden field to do this.

Consider these simple forms:

<form name="form_a" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
    <input type="hidden" name="form" value="A">
    <button type="submit">Form A</button>
</form>

<form name="form_b" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
    <input type="hidden" name="form" value="B">
    <button type="submit">Form B</button>
</form>

To manage the different submission, you had to check the value of the hidden field:

if(isset($_POST['form'])){

    switch ($_POST['form']) {
        case "A":
            echo "submitted A";
            break;

        case "B":
            echo "submitted B";
            break;

        default:
            echo "What are you doing?";
    } 
} 

You can't submit two separate forms at the same time, because each submission represent a different request to the server.

You may merge manually the fields of the two forms, or use Javascript to do this for you.
Keep in mind that if you do this via Javascript, the field of the forms had to have differents names.

As you caan see here you can do simply via jQuery:

var str1 = $("form_a").serialize();
var str2 = $("form_b").serialize();
$.post(url, str1 + "&" + str2);

Where url is the action params of the form

flask multiple forms on the same page

You can distinguish these forms by the submit input. Just set them different id/name and check if form submission origins from this particular form by checking if its id/name is present in request.form.

In the first form:

<input type="submit" id="form-submit" name="form-submit" value="Submit form">

And the second one:

<input type="submit" id="form2-submit" name="form2-submit" value="Submit form2">

And logic in your view:

@app.route('/smtp/', methods=['GET', 'POST'])
def smtp():
    form = UpdateSMTPForm()
    form2 = UpdateEmailAddress()
    query = Email.query.all()

    if  "form-submit" in request.form and form.validate_on_submit():
        email = str(form.email.data)
        password = str(form.password.data)
        server = str(form.server.data)
        port = str(form.port.data)

        if tools.test_email(server, port, email, password):
            CONFIG['SMTP']['server'] = server
            CONFIG['SMTP']['port'] = port
            CONFIG['SMTP']['username'] = email
            CONFIG['SMTP']['password'] = password

            with open('config.json', 'w') as f:
                f.write(json.dumps(CONFIG))
                f.close()
        else:
            form.server.errors.append("Invalid account, be sure that you have less secure app access turned on or try with a gmail account")

    if "form2-submit" in request.form and form2.validate_on_submit():
        print('form2 email updated {}'.format(form2.email))
    else:
        print('cannot validate the second form')

    return render_template('smtp.html', config=CONFIG['SMTP'], query=query, form=form, form2=form2)

Submit Multiple Forms on One Page at the Same Time with PHP

You can use ajax.

form.php

<?php if(isset($_POST['step1'])&&isset($_POST['step2'])&&isset($_POST['step3'])){
  echo "You chose " . $_POST['step1']." and ".$_POST['step2']." and ".$_POST['step3'].". Well done.";die;
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"0"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Data form</title>
</head>
<script>
$(document).ready(function(){
    $("a.btn").click(function(){
        var datastring = $("#form1").serialize();
        datastring +="&" + $("#form2").serialize();
        datastring +="&" + $("#form3").serialize();
        $.ajax({
            type: "POST",
            url: "form.php",
            data: datastring,
            success: function(data) {
                console.log(data);
                alert(data);
            },
            error: function() {
                alert('error handing here');
            }
        });
    });
});

</script>
<body>
<form id="form1">
 <input name="step1" value="1" type="text"/>
</form>
<form id="form2">
 <input name="step2" value="2" type="text"/>
</form>
<form id="form3">
 <input name="step3" value="3" type="text"/>
</form>
 <a class="btn btn-success">Submit All</a>
</body>
</html>

---

Related Topics