Forms inside forms HTML - php

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>

Answer 1

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.

Answer 2

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">×</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>