Forms inside forms HTML

Question

I know this question has been asked before, but read through to see why what I'm asking is different. My first form is like this where newsearch.php is the name of the php file which the form is included in. I want to listen to any POST calls inside this php file since I have my if(isset($_POST code here.

<form action="newsearch.php" method="post">

So, I'm using bootstrap to layout the page, and I have another form I want to include in a <div class="row"> which is inside the form I mentioned before. What I'm asking is, can I add the form html code somewhere else in the php file and call it to appear inside the <div>?

What I want is a way to do this:

<div class="row">
    <div class="col-lg-6" align="center">
    <h4>Search For Galleries</h4>
    <form action="newsearch.php" method="post">
    <br>
        <input type="text" name="valueToSearch" placeholder="Search"><br><br>
        <input type="submit" name="search" value="Search"><br><br>
    </div>
    <div class="col-lg-6" align="center">
        <h4>Create new Gallery</h4>
        <!-- HOW CAN I INCLUDE A FORM HERE? -->
    </div>


</div>

As you can see, the first form is not closed. That's coz it's closed way below in the file.

My second form is this:

        <form action="inserttogal.php" method="post">

        Gallery Name: <input type="text" name="gname" /><br><br>
        Gallery Type: <input type="text" name="gtype" /><br><br>

        <input type="submit" name="newgal"/>

        </form>

Unclear what you are asking here. Maybe elaborate, and show your code. — Stuart, Mar 31 '16 at 01:00
a form can only have one form tag and action, so you can never have form inside a form, but one form can do many different things — , Mar 31 '16 at 01:00
its no, its not valid HTML, at may do something, but im not sure what, and it may depend on the browser. i see no reason not to make it one form — , Mar 31 '16 at 01:01
You can't have a form inside a form. End of. You also need to change your nesting, if your form starts inside .row but closes outside of it, that's invalid too. — Stuart, Mar 31 '16 at 01:04
@Stuart, the first form works fine on it's own regardless of the row and divs. When the second form comes in, it doesn't work anymore — Yohan Blake, Mar 31 '16 at 01:07
The first one will still "work", it's just invalid HTML. -- Again, you can not have a form inside another form, you just can't, it will not work, you should rethink your approach. — Stuart, Mar 31 '16 at 01:08
@Stuart, so since I can't define a form inside a form, is there a way to call a form from somewhere else in the file? That's my question — Yohan Blake, Mar 31 '16 at 01:10
It's unclear what you mean by "call a form"..? Include one? If so then of course you can, you ca include anywhere in that the file, but not inside another form! Can't you just close the search form after the inputs that are in it, so the search form sits in that left grid column (and gallery form in the right column)...? — Stuart, Mar 31 '16 at 01:14

score 1 · Answer 1 · edited May 23 '17 at 11:50

Instead of using two <form> constructs (and nested, to boot) why not:

(1) Change the forms to ordinary DIVs

(2) Use jQuery to trap a button click

(3) Read the values into variables (this allows you to do any required field validation without negating the form's default action)

(4) Using javascript/jQuery, construct a composite HTML <form> (combining the two forms) in a variable, then

(5) Use jQuery to append() the form to the bottom of the page, and use

(6) $('form').submit() to submit the composite form.

A bit more work, but it will work. Note that Bootstrap uses/requires jQuery, so the library is already loaded. Might as well use it.

Code example:

Obviously, this example is not appropriate for your application, just showing you what you can do and how to get around your <form> problem, via jQuery/javascript.

$('#btnOne').click(function(){
   var fn = $('#fn').val();
   var ln = $('#ln').val();
   var ag = $('#age').val();
  
   if (ln==''){
     alert('Please complete all fields');
     return false;
   }
  
   var myFrm = '\
      <form id="myForm" action="postFile.php" method="post">\
         <input name="fname" value="' +fn+ '" />\
         <input name="lname" value="' +ln+ '" />\
         <input name="age" value="' +ag+ '" />\
      </form>
   ';
   $('body').append(myFrm);
   $('#myForm').submit();
});

#frmOne{}
#frmTwo{background:wheat;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="frmOne">
  First Name: <input id="fn" type="text" /><br>
  Last Name: <input id="ln" type="text" /><br>
  <div id="frmTwo">
    Age: <input id="age" type="text" />
  </div>
</div>
<button id="btnOne">Form One Clicker</button>

You should also look into AJAX (what it is, why use it -- it's quite simple!) and see if it could be of use. This post contains a link to another post with some simple examples that you should study. I included both posts because each has something you might find informative. Twenty minutes of poring of these examples could save you days of design frustration.

Ying Rui Wong · Answer 2 · 2016-03-31T04:07:35.263

No form can having another form inside, I tried before.
Suggest apply Ajax or XMLHttpRequest (XHR)

<div class="row">
<div class="col-lg-6" align="center">
<h4>Search For Galleries</h4>
<form action="newsearch.php" method="post">
<br>
    <input type="text" name="valueToSearch" placeholder="Search"><br><br>
    <input type="submit" name="search" value="Search"><br><br>
</div>
<div class="col-lg-6" align="center">
    <h4>Create new Gallery</h4>
    <a href="#" data-toggle="modal" data-target="#new"><!--bootstrap modal-->
</div>
</form>
<form name="new_form" id="new_form" method="post" action="">
    <div class="modal fade" id="new" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog">
        <div class="modal-dialog" role="document" >
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span style="font-size:21px;margin:-15px -10px 0 0;display:inline-block" aria-hidden="true">&times;</span></button>
                    <h3 style="">create gallery</h3>            
                    <input type="button" name="create" id="create" class="btn btn-default" value="Create Gallery" />                
                </div>
            </div>
        </div>
    </div>
</form>
</div>

<script type="text/javascript">
        $(function(){
            $("#create").click(function(){
                $.ajax({
                    type: "POST",
                    url: "new.php",
                    data: { data:data },
                    success:  
                        function(){ 
                            alert('success');
                        },
                    error:
                        function(){
                            alert('Error!');
                        }
                });
            });
        });
    </script>

From question, Yohan asking form inside another form. So I ask him do as separate forms. — Ying Rui Wong, Mar 31 '16 at 03:47

Forms inside forms HTML

2 Answers2