Я не уверен, что то, что я пытаюсь сделать, просто или нет, но вот оно:
У меня есть строки данных в таблице. Последние 3 поля представляют собой текстовые поля, которые вводят пользовательский ввод. Каждая строка имеет собственную кнопку UPDATE.
Я использую следующий код, чтобы попытаться сделать сообщение jQuery .ajax но я вижу свою проблему. Я назначаю идентификаторы для полей ввода, и вы можете иметь только один идентификатор, указанный на странице, поэтому я уверен, что это один вопрос.
Я пытаюсь сделать так, что, когда вы нажимаете кнопку UPDATE, он передает переменные из этой строки в поля INPUT и скрытое поле INPUT для идентификатора rowID и вызывает файл .php который обновляет базу данных.
$(function() { $(".submit").click(function() { var status = $("#status").val(); var ly = $("#ly").val(); var rt = $("#rt").val(); var offerout = $("#offerout").val(); var lineid = $("#lineid").val(); var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&lineid=' + lineid; $.ajax({ type: "POST", url: "post/updatedata.php", data: dataString, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); return false; }); });
и по строке моей формы (каждая строка такая же, но с другой скрытой идентификационной переменной):
<form method="POST" name="form"> <td>This one</td><td>Los Angeles</td> <td>CA</td><td>94591</td> <td>220000</td> <td>20000</td><td>24500</td> <td>-5500</td><td>12</td> <td>0</td><td>0.167</td><td>4</td> <td>1</td><td>1898</td> <td></td><td>1</td><td>211335190</td> <td><input size="6" type="text" id="status" name="status"></td> <td><input size="6" type="text" id="ly" name="ly"></td> <td><input size="6" type="text" id="rt" name="rt"></td> <td><select id="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td> <input type="hidden" name="lineid" id="lineid" value="97"> <td><input type="submit" class="submit" value="Update"></td> </form>
Заранее спасибо, работал в течение нескольких дней на этом!
Я удаляю скрытое поле и назначаю идентификатор базы данных, чтобы обновить кнопку, так как кнопка будет нажимать на получение этого идентификатора и соответствующих данных.
<table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <form method="POST" name="form"> <td>CA</td><td>94591</td> <td>220000</td> <td>20000</td><td>24500</td> <td>-5500</td><td>12</td> <td>0</td><td>0.167</td><td>4</td> <td>1</td><td>1898</td> <td></td><td>1</td><td>211335190</td> <td><input size="6" type="text" id="status_97" name="status"></td> <td><input size="6" type="text" id="ly_97" name="ly"></td> <td><input size="6" type="text" id="rt_97" name="rt"></td> <td><select name="offerout" id="offerout_97"><option value="No">No</option><option value="Yes">Yes</option></select></td> <td><input type="submit" class="submit" value="Update" name="97"></td> </form> </tr> <tr> <form method="POST" name="form"> <td>CA</td><td>94591</td> <td>220000</td> <td>20000</td><td>24500</td> <td>-5500</td><td>12</td> <td>0</td><td>0.167</td><td>4</td> <td>1</td><td>1898</td> <td></td><td>1</td><td>211335190</td> <td><input size="6" type="text" id="status_96" name="status"></td> <td><input size="6" type="text" id="ly_96" name="ly"></td> <td><input size="6" type="text" id="rt_96" name="rt"></td> <td><select name="offerout" id="offerout_96"><option value="No">No</option><option value="Yes">Yes</option></select></td> <input type="hidden" name="lineid" id="lineid_96" value="96"> <td><input type="submit" class="submit" value="Update" name="96"></td> </form> </tr> </table>
код сценария java
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> $(function() { $(".submit").click(function() { var rowToUpdate = $(this).attr('name'); var status = $("#status_"+rowToUpdate).val(); var ly = $("#ly_"+rowToUpdate).val(); var rt = $("#rt_"+rowToUpdate).val(); var offerout = $("#offerout_"+rowToUpdate).val(); var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&rowToUpdate='+ rowToUpdate; $.ajax({ type: "POST", url: "post/updatedata.php", data: dataString, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); return false; }); }); </script>
Я надеюсь, что это поможет вам..
Дублирование атрибутов id вызовет проблемы. Когда вы скажете $("#ly") , вы, вероятно, получите первый на странице, и это обычно не тот, который вы хотите. Это легко решить:
id в пользу атрибутов class . Вы также можете использовать селектор атрибутов . Сначала HTML:
<td><input size="6" type="text" class="status" name="status"></td> <td><input size="6" type="text" class="ly" name="ly"></td> <td><input size="6" type="text" class="rt" name="rt"></td> <td><select class="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td> <input type="hidden" name="lineid" class="lineid" value="97">
Затем ваш jQuery:
var $form = $(this).closest('form'); var status = $form.find(".status").val(); var ly = $form.find(".ly").val(); var rt = $form.find(".rt").val(); var offerout = $form.find(".offerout").val(); var lineid = $form.find(".lineid").val();
Кроме того, поскольку вы выполняете запрос POST, вы должны просто передать jQuery объект и позволить ему беспокоиться о его сериализации:
var data = { status: status, ly: ly, rt: rt, offerout: offerout, lineid: lineid }; $.ajax({ type: "POST", url: "post/updatedata.php", data: data, success: function() { $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } });
Это должно заботиться о ваших проблемах с клиентами.
Вы можете сохранить переменную данных номера строки в каждом представлении и использовать ее, чтобы определить, какая строка была нажата, и, следовательно, какие входы вам нужно извлечь.
$(function() { $(".submit").each(function () { var rowNum = $(this).attr('data-rownum'); $(this).click(function () { var status = $("#status" + rowNum).val(); var ly = $("#ly" + rowNum).val(); var rt = $("#rt" + rowNum).val(); .... }); }); }); <form method="POST" name="form"> .... <td><input size="6" type="text" id="status1" name="status"></td> <td><input size="6" type="text" id="ly1" name="ly"></td> <td><input size="6" type="text" id="rt1" name="rt"></td> <input type="hidden" name="lineid" id="lineid1" value="97"> <td><input type="submit" class="submit" value="Update" data-rownum="1"></td> </form>