Формы внутри форм HTML

Question

Я знаю, что этот вопрос задан раньше, но прочитайте, чтобы узнать, почему то, что я прошу, отличается. Моя первая форма похожа на это, где newsearch.php - это имя файла php, в который включена форма. Я хочу слушать любые вызовы POST внутри этого php-файла, так как здесь есть код if(isset($_POST.

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

Итак, я использую загрузчик макет страницы, и у меня есть другая форма, я хочу, чтобы включить в <div class="row">, которая находится внутри формы я упоминал ранее. Я спрашиваю, могу ли я добавить код html формы в другое место в файле php и вызвать его, чтобы он появился внутри <div>?

То, что я хочу, это способ сделать это:

<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> 

Как вы можете видеть, первая форма не закрывается. Это намного меньше, чем в файле.

Моя вторая форма такова:

 <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

Вместо использования двух <form> конструкции (и вложенные в придачу) почему нет:

(1) Изменение формы для обычных DIVs

(2) Используйте jQuery, чтобы щелкнуть мышью на кнопке

(3) Считать значения в переменных (это позволяет делать какие-либо проверки требуемого поля не отрицая действие по умолчанию форме в)

(4) Использование JavaScript/JQuery, построить составную HTML <form> (сочетание двух форм) в переменной, а затем

(5) Используйте jQuery для append() в нижней части страницы и используйте

(6) $('form').submit() Чтобы отправить композитную форму.

Немного больше работы, но оно будет работать. Обратите внимание, что Bootstrap использует/требует jQuery, поэтому библиотека уже загружена. Можно также использовать его.

Пример код:

Очевидно, что этот пример не подходит для вашего приложения, просто показывая вам, что вы можете сделать и как получить вокруг <form> проблем, с помощью 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>

---

Вы также должны взглянуть на AJAX (что это такое, зачем его использовать - это очень просто) и посмотреть, если это может быть полезным. This post содержит ссылку на another post с некоторыми простыми примерами, которые вы должны изучить. Я включил обе должности, потому что у каждого есть что-то, что вы можете найти информативным. Двадцать минут после этих примеров могут сэкономить вам дни разочарования в дизайне.

Answer 2

Никакая форма не может иметь другую форму внутри, я пробовал раньше.
Предлагайте применять Ajax или 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>