Мой ajax submit onchange select работает только с первой строкой
У меня есть таблица HTML, в которой есть столбец с параметрами выбора, которые отправляются с использованием события onchange с использованием ajax. код отлично работает для первой строки каждой страницы (поскольку к таблице применяется нумерация страниц), но любая другая строка бесполезна.
Ранее я задавал вопрос, связанный с этим вопросом, и случайно наткнулся на этот вопрос, который, к счастью, мне очень помог, но не для всей таблицы. это оригинальная ссылка на вопросы и ответы: Отправить форму при выборе изменения через AJAX
мой индивидуальный HTML-код
<td>
<form action = "" method = "POST">
<select class = "changeStatus" name = "changeStatus" style = "margin-bottom:10px;">
<option value = "<?php echo $row["STATUS"]; ?>" > <?php echo $row["STATUS"]; ?></option>
<option value = "new">new</option>
<option value = "checking">checking</option>
<option value = "processing">processing</option>
<option value = "done">done</option>
</select>
<input class = "order_Id" type = "hidden" name = "order_Id" value = "<?php echo $row["ORDER_ID"];?>"/>
</form>
</td>
ajax-код
<script>
$(document).ready(function() {
$('select.changeStatus').change(function(){
$.ajax({
type: 'post',
url: 'test2.php',
data: {selectFieldValue: $('select.changeStatus').val(), order_Id: $('input[name$ = "order_Id"]').val()},
success: function(html){alert('Select field value has changed to' + $('select.changeStatus').val()); },
dataType: 'html'
});
});
});
</script>
примечание: предупреждение также повторяет только первую строку.
php-код
<?php
$connection = mysqli_connect('localhost' , 'root' ,'' ,'project_name');
$changeStatus=$_POST['selectFieldValue'];
$id=$_POST['order_Id'];
$sql='UPDATE new_order SET STATUS = "'.$changeStatus.'" WHERE ORDER_ID = "'.$id.'"';
$result = mysqli_query($connection, $sql);
?>
Я искал несколько дней, и пока это был мой единственный успешный код. заранее спасибо
к сожалению, это единственная форма на этой странице, и строка ORDER_ID уникальна, и когда я проверяю ее в Firefox, она показывает правильный идентификатор для каждой строки. Я изменил атрибут имени и класс, чтобы убедиться, что он не конфликтует с другими атрибутами, но без результата. либо. Спасибо, что зашли.
Сара, не могли бы вы прислать мне исходный код (ctrl+u), когда вы откроете эту страницу в firefox, этот код поможет понять, что происходит.
конечно не проблема, но как? Я совсем новичок в SOF.
Получил только что. Вернемся к вам как можно скорее.
отправил вам письмо, проверьте свой почтовый ящик.
Это работа для вас?
Я отправил вам электронное письмо о том, что произошло, пожалуйста, проверьте это.
@Shoaib, отправляющий вашу электронную почту для общения за пределами сайта, здесь совершенно неуместен. Поражение всей цели этого сайта
@charlietfl в этом ты прав. он сделал это, потому что никто из нас еще не может использовать функцию чата. надеюсь, он удалит его, так как я получил электронное письмо сейчас.
Ответы 1
При обработке события для нескольких объектов необходимо быть осторожным и обрабатывать только тот объект, для которого было запущено событие.
В вашем случае у вас есть обратный вызов события для каждого выбора с классом .changeStatus. Когда любой из них изменяется, вы публикуете данные
selectFieldValue: $('select.changeStatus').val()
Поскольку $('select.changeStatus') дает вам массив всех объектов, соответствующих селектору, а .val() возвращает значение только для первого объекта в массиве, вы эффективно обрабатываете только первую строку, независимо от того, какая строка была изменена. Вместо этого вам нужно использовать
selectFieldValue: $(this).val()
где this относится к объекту, на котором было запущено событие.
То же самое касается вашего оповещения; заменить $('select.changeStatus').val() на $(this).val().
Окончательный сценарий с этими изменениями будет таким:
<script>
$(document).ready(function() {
$('select.changeStatus').change(function(){
$.ajax({
type: 'post',
url: 'test2.php',
data: {selectFieldValue: $(this).val(), order_Id: $(this).siblings(".order_Id").val()},
//***only select that rows .order_Id by using $.siblings() with selector
success: function(html){alert('Select field value has changed to' + $(this).val()); },
dataType: 'html'
});
});
});
</script>
ваша точка зрения имеет смысл на самом деле. Я попробовал ваше предложение, но, похоже, что-то не так. мне нужно определить переменную для «changeStatus»? если да, пожалуйста, покажите мне, как.
@SarahFahad - та же проблема со скрытым вводом. Вам нужен конкретный для этой формы
Вы можете показать мне окончательный сценарий? Я буду оценен.
Я отредактировал свой пост, чтобы включить окончательный код, в том числе о том, как получить скрытый ввод этих строк, как указал @charlietfl
Это сработало!! вау я очень благодарен большое спасибо! но сообщение с предупреждением перестало работать, я не знаю, в чем причина?
Что ж, правда в том, что все сводится к одному и тому же; это никогда не работало. Подумайте об этом, alert($('select.changeStatus').val()); просто выведет значение первого объекта в массиве $('select.changeStatus'), а именно значение вашей первой строки. Неважно, где написана эта строка или какую строку вы имели в виду. Причина, по которой мое исправление не сработало [признаюсь, я отредактировал его, не подумав ;-)], заключается в том, что this в вашей функции обратного вызова больше не находится в события и, следовательно, не указывает на объект, вызвавший событие.
Я предполагаю, что вам больше не нужно это оповещение. Вы хотели бы обработать ответ сервера; хотя я заметил, что вы ничего не возвращаете в своем php-файле...
Я думаю, что у вас есть несколько записей и несколько форм на одной странице, и когда событие onChange запускается, вы используете одно и то же имя поля выбора. сделайте имя поля уникальным, и ваш код javascript сможет публиковать соответствующие сообщения.