gpt4 book ai didi

JavaScript/Ajax : Multiple Forms for one Script. 如何只考虑提交的?

转载 作者:行者123 更新时间:2023-11-30 14:27:19 24 4
gpt4 key购买 nike

我在一个页面上有多个具有不同 ID 的表单,这些 ID 使用 AJAX 执行:

<form action="comment.php" class="testForm" id="1" method="POST">
<input type="text" name="name">
<input type="text" name="comment">
<input type="submit">
</form>

<form action="comment.php" class="testForm" id="2" method="POST">
<input type="text" name="name">
<input type="text" name="comment">
<input type="submit">
</form>

AJAX 实际上运行良好,但只考虑第一种形式的输入值。我很确定这是因为它们都是同一个类,并且 ID (1,2..) 之间没有区别

<script>
$(document).ready(function() {

$('.testForm').submit(function(event) {

var formData = {
'name' : $('input[name=name]').val(),
'comment' : $('input[name=comment]').val()
};

$.ajax({
type : 'POST',
url : 'comment.php',
data : formData,
dataType : 'json',
encode : true
})

.done(function(data) {
console.log(data);

if (data.success) {
$('.testForm input[type="submit"]').addClass('red');
}

});

event.preventDefault();

});

});
</script>

我只想在已单击的提交按钮上添加 red 类。

很抱歉我缺乏知识,我对此很陌生,我找不到有用的东西。

最佳答案

只需使用this.id:

$('.testForm#'+form.id+' input[type="submit"]').addClass('red');

$(document).ready(function() {

$('.testForm').submit(function(event) {
var form = this; // capture correct this
console.log(form.id) // should be 1 or 2 depending on the form

var formData = {
'name': $(form).find('input[name=name]').val(),
'comment': $(form).find('input[name=comment]').val()
};

console.log(JSON.stringify(formData));

$.ajax({
type: 'POST',
url: './',
data: formData,
dataType: 'json',
encode: true
})

.done(function(data) {
console.log(data);
console.log(form.id)

if (data.success) {
$(form).find('input[type=submit]').addClass('red')
}

});

event.preventDefault();

});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="comment.php" class="testForm" id="1" method="POST">
<input type="text" name="name" value="n1">
<input type="text" name="comment" value="c1">
<input type="submit">
</form>

<form action="comment.php" class="testForm" id="2" method="POST">
<input type="text" name="name" value="n2">
<input type="text" name="comment" value="c2">
<input type="submit">
</form>

<form action="comment.php" class="testForm" id="3" method="POST">
<input type="text" name="name" value="n3">
<input type="text" name="comment" value="c3">
<input type="submit">
</form>

<form action="comment.php" class="testForm" id="4" method="POST">
<input type="text" name="name" value="n4">
<input type="text" name="comment" value="c4">
<input type="submit">
</form>

您还可以使用 jQuery 的 $.fn.find() 捕获正确的形式,例如 @pschichtel在他的评论中写道:

$(form).find('input[type=submit]').addClass('red')

关于JavaScript/Ajax : Multiple Forms for one Script. 如何只考虑提交的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51725575/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com