$_SERVER['REQUEST_METHOD'] == 'POST' is set even no submit

Question

i have a page with 2 forms. This is for insert into db using PHP/PDO. The problem I'm facing is that the IF statement on the insert page is producing an error, even though I have not pressed the submit button. Have tried several ways with $_POST isset/ !==0 and so on. No luck so far.

Can there be a problem with the jQuery/FORM-combo? Maybe that's triggering the $_POST?

jQuery for choosing forms:

<script type="text/javascript">
$(document).ready( function() { 
$('#formSel').change( function() {
var id = $(this).val();
if( id != '-' )
{
    $('form').hide();
    $('#form'+id).show();
    //$('#myModal').modal('show');
}
});
});
</script>

The forms are set up like this:

<div>
 <select class="form-control input-small" id="formSel">
 <option value="-">Choose category</option>
 <option value="One">One</option>
 <option value="Two">Two</option>
 </select>
</div>

<!-- Form One -->
<form id="One" style="display:none" method="POST" action="insert.php">
<input type="text" id="aaa" placeholder="aaa">
<input type="text" id="bbb" placeholder="bbb">
<button type="submit" value="btn-One">Submit</button>
</div>

<!-- Form Two -->
<form id="One" style="display:none" method="POST" action="insert.php">
<input type="text" id="ccc" placeholder="ccc">
<input type="text" id="ddd" placeholder="ddd">
<button type="submit" value="btn-Two">Submit</button>
</div>

To insert the data I have a second page (insert.php) containing the PHP/PDO. This is set up to execute when submit button is pressed:

if ($_SERVER['REQUEST_METHOD'] == 'POST' && (!empty($_POST['btn-One']))) {
    //execute code
}
else {
    echo 'Error submit One';
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && (!empty($_POST['btn-Two']))) {
    //execute code
}
else {
    echo 'Error submit Two';
}

I'm all out of ideas and skills to see the solution. Hopefully someone can spot what is triggering the forms.

Answer 1

You are probably missing name in your forms and replace </div> with </form>. And form ID too!

<div>
 <select class="form-control input-small" id="formSel" name="formSel">
 <option value="-">Choose category</option>
 <option value="One">One</option>
 <option value="Two">Two</option>
 </select>
</div>

<!-- Form One -->
<form id="formOne" style="display:none" method="POST" action="insert.php">
          ^
<input type="text" id="aaa" name="aaa" placeholder="aaa">
                            ^
<input type="text" id="bbb" name="bbb" placeholder="bbb">
                            ^
<button type="submit" value="btn-One" name="btn-One">Submit</button>
                                      ^
</form>
^^^^^^^

<!-- Form Two -->
<form id="formTwo" style="display:none" method="POST" action="insert.php">
          ^
<input type="text" id="ccc" name="ccc" placeholder="ccc">
                            ^
<input type="text" id="ddd" name="ddd" placeholder="ddd">
                            ^
<button type="submit" value="btn-Two" name="btn-Two">Submit</button>
                                      ^
</form>
^^^^^^^

Answer 2

First of all you have missed name attribute for the input elements.

And also you have missed closing form tags.

And here I have included two hidden elements(selectedForm1 & selectedForm2) to identify which form is been submitted.

And in script, Replace $('#form'+id).show(); with $('#'+id).show();

SCRIPT

    <script type="text/javascript">
    $(document).ready(function() { 
    $('form').hide();
    $('#formSel').change( function() {
        var id = $(this).val();
        if( id != '-' )
        {
            $('form').hide();
            $('#'+id).show();
            //$('#myModal').modal('show');
        }
    });
});
    </script>

HTML

<div>
 <select class="form-control input-small" id="formSel">
 <option value="-">Choose category</option>
 <option value="One">One</option>
 <option value="Two">Two</option>
 </select>
</div>
<div>
<!-- Form One -->
<form id="One" method="POST" action="insert.php">
<input type="hidden" id="selectedForm1" name="selectedForm1">
<input type="text" id="aaa" name="aaa" placeholder="aaa">
<input type="text" id="bbb" name="bbb" placeholder="bbb">
<button type="submit" value="btn-One" >Submit</button>
</form>
</div>
<div>
<!-- Form Two -->
<form id="Two"  method="POST" action="insert.php">
<input type="hidden" id="selectedForm2" name="selectedForm2">
<input type="text" id="ccc" name="ccc" placeholder="ccc">
<input type="text" id="ddd" name="ddd" placeholder="ddd">
<button type="submit" value="btn-Two">Submit</button>
</form>
</div>

PHP

if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST)) {
    if ((isset($_POST['selectedForm1']))) {
        //execute code
    } else {
        echo 'Error submit One';
    }
    if ((isset($_POST['selectedForm2']))) {
        //execute code
    } else {
        echo 'Error submit Two';
    }
}

Answer 3

It may help if you closed the form as well as adding the name attribute to the elements.

<!-- Form One -->
<form id="One" style="display:none" method="POST" action="insert.php">
<input type="text" id="aaa" placeholder="aaa">
<input type="text" id="bbb" placeholder="bbb">
<button type="submit" value="btn-One">Submit</button>
</div>

becomes:

<!-- Form One -->
<form id="One" style="display:none" method="POST" action="insert.php">
<input type="text" id="aaa" placeholder="aaa" name="aaa">
<input type="text" id="bbb" placeholder="bob" name="bbb">
<button type="submit" value="btn-One" name="btn-One">Submit</button>
</form>

and

<!-- Form Two -->
<form id="One" style="display:none" method="POST" action="insert.php">
<input type="text" id="ccc" placeholder="ccc">
<input type="text" id="ddd" placeholder="ddd">
<button type="submit" value="btn-Two">Submit</button>
</div>

becomes:

<!-- Form Two -->
<form id="One" style="display:none" method="POST" action="insert.php">
<input type="text" id="ccc" placeholder="ccc" name="ccc">
<input type="text" id="ddd" placeholder="ddd" name="ddd">
<button type="submit" value="btn-Two" name="btn-Two">Submit</button>
</form>