gpt4 book ai didi

javascript - 如何在javascript中正确提交后出现成功警报

转载 作者:行者123 更新时间:2023-12-03 07:52:39 24 4
gpt4 key购买 nike

我想向用户展示一个表单,使用内置警报的 Bootstrap ,使用 JavaScript 正确发送警报消息。

当我运行代码时,我得到了值的对象数组(检查控制台日志中的页面)。我想要做的是发送后显示成功警报(如果成功)。

test4.sj 包含 javascript 代码,然后是 main.php,它是表单的代码。

到目前为止我拥有的代码位于代码片段中。

$('form.ajax').on('submit', function() {
var that = $(this),
type = that.attr('action'),
data = {};

that.find('[name]').each(function(index, value) {
//console.log(value);
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});

console.log(data);

/* $.ajax({
url: url,
type: type,
data: data,

success: function(response){
console.log(response);
}
})*/

return false;
})

<body>
<form method="post" class="ajax">
<div>
<input name="name" type="text" placeholder="Your name" required>
</div>
<div>
<input name="lName" type="text" placeholder="Your Last Name">
</div>
<div>
<textarea name="message" placeholder="Your Message"></textarea>
</div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>

最佳答案

只需添加隐藏的警报面板并在 AJAX 成功时显示它。

HTML:

<form method="post" class="ajax">
<div class="alert alert-success js-alert hidden" role="alert">
Form was successfully sent!
</div>

...

<div>
<input name="name" type="text" placeholder="Your name">
</div>

...

<button type="submit" class="btn js-btn">Send</button>
</form>

JS:

$('form').on('submit', function( event ) {
var $form = $( this );

event.preventDefault();
$('.js-alert').addClass('hidden');
$('.js-btn').button('loading');

$.ajax({
url: '/someurl',
type: 'POST',
data: $form.serialize(),
success: function(response){
$('.js-alert').removeClass('hidden');
$('.js-btn').button('reset');
}
});
});

检查 fiddle : https://jsfiddle.net/xw63db57/1/

关于javascript - 如何在javascript中正确提交后出现成功警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34939745/

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