#jquery #ajax
#jquery ( jquery ) #ajax
Вопрос:
У меня есть рабочий Ajax-скрипт, который успешно отправляет форму и отображает содержимое в DIV, но на данный момент он работает только тогда, когда у меня есть 1 форма, но на моей странице мне нужно иметь несколько форм, которые должны использовать этот скрипт для отправки формы и ответа пользователю.
Ajax:
<script>
$(function () {
$("form").validate();
});
$( "form" ).on( "submit", function(e) {
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "update_userdata.asp",
data: dataString,
success: function () {
$("#EconomyColumnsResponse2").html("<div id='message' style='background-color: #28a745;'></div>");
$("#message")
.html("<font style='color: white;'>Løn Information er nu opdateret <i class='fas fa-check-circle'></i></font>")
.hide()
.fadeIn(1500, function () {
$("#message").append(
""
);
});
}
});
e.preventDefault();
});
setTimeout(function(){
$('#EconomyColumnsResponse2').fadeOut('slow');
}, 15000)
</script>
Допустим, у меня есть 2 формы (их будет еще много с тем же именем, но с другим прикрепленным идентификатором, например EconomyColumns1 = Name ID), которые выглядят следующим образом:
<div id="EconomyColumnsResponse1">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="name" id="name_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="email" id="email_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="phone" id="phone_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<input type="submit" name="submit" id="submit_btn" value="Send" />
</fieldset>
</form>
<div id="EconomyColumnsResponse2">
</div>
<form name="EconomyColumns2" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="2">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="name" id="name_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="email" id="email_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="phone" id="phone_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<input type="submit" name="submit" id="submit_btn" value="Send" />
</fieldset>
</form>
Как я могу сделать так, чтобы мой Ajax становился динамичным, чтобы мне не нужно было иметь столько Ajax-скриптов, сколько у меня форм, а нужно было только иметь on? .. в качестве небольшого поворота, $(«#message») .. должно отличаться в зависимости от отправляемой формы.
Надеюсь, кто-нибудь сможет помочь 🙂
С наилучшими пожеланиями
Стиг 🙂
Ответ №1:
Установите переменную в DIV перед формой и используйте ее в функции обратного вызова.
$("form").on("submit", function(e) {
var dataString = $(this).serialize();
let response_div = $(this).prev();
$.ajax({
type: "POST",
url: "update_userdata.asp",
data: dataString,
success: function() {
response_div.html("<div id='message' style='background-color: #28a745;'></div>");
$("#message")
.html("<font style='color: white;'>Løn Information er nu opdateret <i class='fas fa-check-circle'></i></font>")
.hide()
.fadeIn(1500, function() {
$("#message").append(
""
);
});
}
});
e.preventDefault();
});
Комментарии:
1. Привет, Бармар.. Я только что обновил свой код с помощью вашего скрипта и нового кода формы.. Я вижу, что ваш код дает некоторый результат, который мне нужен, но все же есть некоторые проблемы .. 1. Сообщение $(«#message») как я могу отправить эту динамику из формы в скрипт? .. 2 Несмотря на то, что моя кнопка target form =»EconomyColumns1″ проверяет ввод на форма «Initials2». .. 3. response_div отображает правильный div при первой отправке og EconomyColumns1, но если я отправлю второй раз, он будет нацелен на DIV в Initials2. .. 4. Как мне динамически обрабатывать setTimeout(function().
2. Поместите
setTimeout
вsuccess
функцию, затем она может использоватьresponse_div.fadeOut('slow')
3. Что-то вроде
<form data-message="This is something that should be displayed in #message">
. Затем вы можете использоватьlet message = $(this).data("message");
4. То же место, которое вы поставили
let response_div
.5.
$("#message").html(`<font style='color: white;'>${message} <i class='fas fa-check-circle'></i></font>`)
Ответ №2:
@Barmar .. Вот обновленная HTML-форма
<div id="response_div">
</div>
<form name="Initials2" id="Initials2" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
Комментарии:
1. Не используйте ответ для дополнительных вопросов. Добавьте его в вопрос (не удаляя исходный код).