Как отправить несколько форм, используя ajax и одну кнопку отправки? - PullRequest
0 голосов
/ 17 января 2019

Как мне отправить несколько форм в ajax с помощью одной кнопки отправки?

В настоящее время я использую несколько отправленных форм ajax для отправки каждой формы в отдельности, но я уверен, что есть более простой способ отправить форму сразу, и я не уверен, как.

$('#submit').click(function(){            
           $.ajax({  
                url:"answer.php",  
                method:"POST",  
                data:$('#add_answer').serialize(),  
                success:function(data)  
                {  
                     location.reload(); 
                     $('#add_answer')[0].reset();

                }  
           });  
      }); 

        $('#submit1').click(function(){            
           $.ajax({  
                url:"answer.php",  
                method:"POST",  
                data:$('#add_answer1').serialize(),  
                success:function(data)  
                {  
                     location.reload();  

                }  
           });  
      }); 

      $('#submit2').click(function(){            
           $.ajax({  
                url:"answer.php",  
                method:"POST",  
                data:$('#add_answer2').serialize(),  
                success:function(data)  
                {  
                     location.reload();  

                }  
           });  
      }); 

      $('#submit3').click(function(){            
           $.ajax({  
                url:"answer.php",  
                method:"POST",  
                data:$('#add_answer3').serialize(),  
                success:function(data)  
                {  
                     location.reload();  

                }  
           });  
      }); 

      $('#submit4').click(function(){            
           $.ajax({  
                url:"answer.php",  
                method:"POST",  
                data:$('#add_answer4').serialize(),  
                success:function(data)  
                {  
                     location.reload();  

                }  
           });  
      }); 

      $('#submit5').click(function(){            
           $.ajax({  
                url:"answer.php",  
                method:"POST",  
                data:$('#add_answer5').serialize(),  
                success:function(data)  
                {  
                     location.reload();  

                }  
           });  
      }); 
 });

У меня также есть несколько форм, похожих на приведенную ниже, только с разными значениями.

<form name="add_answer5" id="add_answer5">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field5">  
                                    <tr> 
                                         <label><?php echo $question ?></label>
                                         <td><input type="text" name="answer[]" placeholder="Enter your Answer" value="<?php echo $answer; ?>" class="form-control name_list" /></td> 
                                         <input type="hidden" name="id[]" placeholder="<?php echo $id?>" value="<?php echo $id; ?>" class="form-control name_list" />                                    
                                         <input type="hidden" name="dg_no[]" placeholder="<?php echo $dg_no;?>" value="<?php echo $dg_no;?>" class="form-control name_list" />
                                         <input type="hidden" name="code_no[]" placeholder="<?php echo $code_no;?>" value="<?php echo $code_no;?>" class="form-control name_list" />
                                         <input type="hidden" name="question[]" placeholder="<?php echo $question;?>" value="<?php echo $question;?>" class="form-control name_list" />

                                    </tr>
                    <?php }?>

                               </table>
                               <button type="button" name="add" id="add5" class="btn btn-success">Add More</button>
                               <input type="button"  class="btn btn-info" id="submit5" value="Submit" />  
                          </div>  
                     </form>  

Так, как бы я отправил формы сразу? Я размышлял о том, как поместить все команды ajax submit в одну функцию и вызывать эту функцию при нажатии кнопки submit, но опять же я не уверен, что это правильный способ сделать это.

1 Ответ

0 голосов
/ 17 января 2019

В качестве примера того, что я имел в виду с комментарием выше (используя объект FormData), я быстро соединил демонстрацию, чтобы указать, как вы можете достичь поставленной цели. Нет jQuery, просто простой, ванильный Javascript, но вы можете легко (я уверен) изменить его, чтобы использовать jQuery, если вам нужно.

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();

        echo "process the request, send a response, live long & prosper!";

        exit();
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>multiple forms: one submit</title>
        <script>
            const submitall=function(e){
                const callback=function(r){
                    console.info( 'response: %o',r )
                }

                const ajax=function(url,data,callback){
                    let xhr=new XMLHttpRequest();
                    xhr.onreadystatechange=function(){
                        if( this.readyState==4 && this.status==200 )callback( xhr.response );
                    };
                    xhr.open( 'POST', url, true );
                    xhr.send( data )
                };

                /* add all data from each form to this object */
                let fd=new FormData();

                /* get references to all forms */
                let oCol=document.querySelectorAll( 'form' );

                /* process each form */
                for( let n in oCol ){
                    if( oCol[ n ].nodeType==1 ){
                        let tmp={};
                        for( i in oCol[ n ].elements ){
                            if( typeof( oCol[n][i] )!='undefined' && oCol[n][i].nodeType==1 ){
                                tmp[ oCol[n][i].name ]=oCol[n][i].value;
                            }
                        }
                        fd.append( oCol[n].name, JSON.stringify( tmp ) );
                    }
                }
                ajax.call( this, location.href, fd, callback )
            }

            document.addEventListener('DOMContentLoaded',function(){
                document.getElementById('master').onclick=submitall;
            });
        </script>
    </head>
    <body>

        <input type='button' id='master' value='Gather all & submit' />

        <form name='add_answer1' id='add_answer1'>  
              <div class='table-responsive'>  
                   <table class='table table-bordered' id='dynamic_field1'>  
                        <tr> 
                             <label>question 1</label>
                             <td>
                                <input type='text' name='answer[]' placeholder='Enter your Answer' value='answer 1' class='form-control name_list' />
                                <input type='hidden' name='id[]' placeholder='id' value='id 1' class='form-control name_list' />                                    
                                <input type='hidden' name='dg_no[]' placeholder='dg_no' value='dg_no 1' class='form-control name_list' />
                                <input type='hidden' name='code_no[]' placeholder='code_no' value='code_no 1' class='form-control name_list' />
                                <input type='hidden' name='question[]' placeholder='question' value='question 1' class='form-control name_list' />
                            </td>
                        </tr>
                   </table>
                   <button type='button' name='add' id='add1' class='btn btn-success'>Add More</button>
              </div>
        </form>

        <form name='add_answer2' id='add_answer2'>  
              <div class='table-responsive'>  
                   <table class='table table-bordered' id='dynamic_field2'>  
                        <tr> 
                             <label>question 2</label>
                             <td>
                                <input type='text' name='answer[]' placeholder='Enter your Answer' value='answer 2' class='form-control name_list' /> 
                                <input type='hidden' name='id[]' placeholder='id 2' value='id 2' class='form-control name_list' />                                    
                                <input type='hidden' name='dg_no[]' placeholder='dg_no 2' value='dg_no 2' class='form-control name_list' />
                                <input type='hidden' name='code_no[]' placeholder='code_no 2' value='code_no 2' class='form-control name_list' />
                                <input type='hidden' name='question[]' placeholder='question 2' value='question 2' class='form-control name_list' />
                             </td>
                        </tr>
                   </table>
                   <button type='button' name='add' id='add2' class='btn btn-success'>Add More</button>
              </div>
        </form>

        <form name='add_answer3' id='add_answer3'>  
              <div class='table-responsive'>  
                   <table class='table table-bordered' id='dynamic_field3'>  
                        <tr> 
                             <label>question 3</label>
                             <td>
                                 <input type='text' name='answer[]' placeholder='Enter your Answer' value='answer 3' class='form-control name_list' /> 
                                 <input type='hidden' name='id[]' placeholder='id 3' value='id 3' class='form-control name_list' />                                    
                                 <input type='hidden' name='dg_no[]' placeholder='dg_no 3' value='dg_no 3' class='form-control name_list' />
                                 <input type='hidden' name='code_no[]' placeholder='code_no 3' value='code_no 3' class='form-control name_list' />
                                 <input type='hidden' name='question[]' placeholder='question 3' value='question 3' class='form-control name_list' />
                             </td>
                        </tr>
                   </table>
                   <button type='button' name='add' id='add3' class='btn btn-success'>Add More</button>
              </div>
        </form>

        <form name='add_answer4' id='add_answer4'>  
              <div class='table-responsive'>  
                   <table class='table table-bordered' id='dynamic_field4'>  
                        <tr> 
                             <label>question 4</label>
                             <td>
                                 <input type='text' name='answer[]' placeholder='Enter your Answer' value='answer 4' class='form-control name_list' /> 
                                 <input type='hidden' name='id[]' placeholder='id 4' value='id 4' class='form-control name_list' />                                    
                                 <input type='hidden' name='dg_no[]' placeholder='dg_no 4' value='dg_no 4' class='form-control name_list' />
                                 <input type='hidden' name='code_no[]' placeholder='code_no 4' value='code_no 4' class='form-control name_list' />
                                 <input type='hidden' name='question[]' placeholder='question 4' value='question 4' class='form-control name_list' />
                             </td>
                        </tr>
                   </table>
                   <button type='button' name='add' id='add4' class='btn btn-success'>Add More</button>
              </div>
        </form>

    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...