HTML несколько форм Ajax submit

У меня есть таблица с несколькими строками и несколькими формами, и я пытаюсь отправить каждую форму в свой PHP-скрипт.HTML несколько форм Ajax submit

Если вы не используете Ajax, все формы обновляются правильно. Однако с Ajax я не могу заставить скрипт PHP работать. Как я могу заставить Ajax работать?

В части HTML у меня есть несколько строк, которые принадлежат одной форме (в приведенном ниже примере все строки принадлежат одной форме, и у меня их несколько). Я прочитал, что тэг FORM не может находиться под тегом TR и даже знать, когда я смотрю на код, он выглядит довольно уродливо, но я не уверен, как еще я могу построить таблицу.

Ajax

$(document).ready(function(){ 
     // click on button submit 
     $("#submit").on('click', function(){ 
      // send ajax 
      $.ajax({ 
       url: 'post.php', // url where to submit the request 
       type : "POST", // type of action POST || GET 
       dataType : 'json', // data type 
       data : $(this).serialize(), // post data || get data 
      }) 
     }); 
    });

HTML

<tbody> 
<tr> 
    <form id="form1" method="POST" action=""></form> 
    <input type="hidden" name="ID" value=""> 
    <td rowspan="6">bls</td> 
    <td rowspan="6">[email protected]</td> 
    <td>Records</td> 
    <td>10</td> 
    <td>1</td> 
    <td><input type="text" size="1" value="" name="Records"></td> 
    <td>Contact</td> 
    <td></td> 
    <td><input type="text" size="1" value="" name="Contact"></td> 
    <td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td> 
    <td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td> 
</tr> 
<tr> 
    <td>Centers</td> 
    <td>15</td> 
    <td>1</td> 
    <td><input type="text" size="1" value="" name="Centers"></td> 
    <td>Company</td> 
    <td>Tadas</td> 
    <td><input type="text" size="1" value="" name="Company"></td> 
</tr> 
<tr> 
    <td>Duration</td> 
    <td>10</td> 
    <td>0</td> 
    <td><input type="text" size="1" value="" name="Duration"></td> 
    <td>Address</td> 
    <td></td> 
    <td><input type="text" size="1" value="" name="Address"></td> 
    <td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td> 
</tr> 
<tr> 
    <td>GCP</td> 
    <td>0</td> 
    <td></td> 
    <td><input type="text" size="1" value="" name="GCP"></td> 
    <td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td> 
    <td><a target="_blank" href="mailto:[email protected]" class="btn btn-success>Email</a></td> 
</tr> 
<tr> 
    <td>RAND</td> 
    <td>0</td> 
    <td>0</td> 
    <td><input type="text" size="1" value="" name="RAND"></td> 
    <td>City</td> 
    <td>Amsterdam</td> 
    <td><input type="text" size="1" value="" name="City"></td> 
</tr> 
<tr> 
    <td>Price</td> 
    <td>€39</td> 
    <td>€18</td> 
    <td><input type="text" size="1" value="" name="Price"></td> 
    <td>Departm</td> 
    <td>IT</td> 
    <td><input type="text" size="1" value="" name="Departm"></td> 
</tr>

источник

2015-11-09 tadalendas

У вас есть недопустимый HTML-разметку.

Только td и th элементы могут быть дочерними элементами tr.

И вы немедленно закрываете свой тег form. Это означает, что у вас нет полей внутри вашей формы.

Вы должны положить все ваше table внутри вашего form.

<form id="form1" method="POST" action=""> 
    <input type="hidden" name="ID" value=""> 
    <table> 
     <tbody> 
      <tr> 
       <td rowspan="6">bls</td> 
       <td rowspan="6">[email protected]</td> 
       <td>Records</td> 
       <td>10</td> 
       <td>1</td> 
       <td><input type="text" size="1" value="" name="Records"></td> 
       <td>Contact</td> 
       <td></td> 
       <td><input type="text" size="1" value="" name="Contact"></td> 
       <td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td> 
       <td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td> 
      </tr> 
      <tr> 
       <td>Centers</td> 
       <td>15</td> 
       <td>1</td> 
       <td><input type="text" size="1" value="" name="Centers"></td> 
       <td>Company</td> 
       <td>Tadas</td> 
       <td><input type="text" size="1" value="" name="Company"></td> 
      </tr> 
      <tr> 
       <td>Duration</td> 
       <td>10</td> 
       <td>0</td> 
       <td><input type="text" size="1" value="" name="Duration"></td> 
       <td>Address</td> 
       <td></td> 
       <td><input type="text" size="1" value="" name="Address"></td> 
       <td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td> 
      </tr> 
      <tr> 
       <td>GCP</td> 
       <td>0</td> 
       <td></td> 
       <td><input type="text" size="1" value="" name="GCP"></td> 
       <td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td> 
       <td><a target="_blank" href="mailto:[email protected]" class="btn btn-success>Email</a></td> 
      </tr> 
      <tr> 
       <td>RAND</td> 
       <td>0</td> 
       <td>0</td> 
       <td><input type="text" size="1" value="" name="RAND"></td> 
       <td>City</td> 
       <td>Amsterdam</td> 
       <td><input type="text" size="1" value="" name="City"></td> 
      </tr> 
      <tr> 
       <td>Price</td> 
       <td>€39</td> 
       <td>€18</td> 
       <td><input type="text" size="1" value="" name="Price"></td> 
       <td>Departm</td> 
       <td>IT</td> 
       <td><input type="text" size="1" value="" name="Departm"></td> 
      </tr> 
     </tbody> 
    </table> 
</form>

Вы также должны обрабатывать submit событие в вашей форме или ваша страница будет перезагружена.
Вы можете сделать это, вызвав e.preventDefault() внутри обработчика.

$(function(){ 
    // click on button submit 
    $("#form1").on("submit", function(e){ 
     e.preventDefault(); // prevent page reload on submit 
     // send ajax 
     $.ajax({ 
      url: 'post.php', // url where to submit the request 
      type : "POST", // type of action POST || GET 
      dataType : 'json', // data type 
      data : $(this).serialize(), // post data || get data 
     }) 
    }); 
});

источник

2015-11-10 00:07:07

HTML несколько форм Ajax submit

ответ

Смежные вопросы