[英]Send all data from form using AJAX
我使用Bootstrap创建的联系表单有问题。 我需要创建一个提交按钮,该按钮将尝试使用AJAX发送来自此表单的所有数据,但是我必须在没有任何JavaScript框架或库的情况下进行此操作(这是我在学校的作业,是的,我真的不能使用它们...) 。
我不知道如何在没有jQuery的情况下执行此操作,因此将不胜感激。
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="usr">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="usr" placeholder="Enter name" value="" aria-describedby="name-format" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="comment">Message:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-2 pull-right">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</div>
在表单中添加ID:
<form class="form-horizontal" role="form" id="idadd">
并使用:
$('#idadd').bind("submit", function() {
$.ajax({
type : "POST",
cache : false,
url : "toto.php",
data : $(this).serializeArray(),
success: function(msg){
// code
}
}
});
return false;
});
查找要发送的元素的每个值。 例如:
var user = document.getElementById('usr').value;
var email = = document.getElementById('email').value;
var comment = = document.getElementById('comment').value;
...
var data = 'user=' + encodeURIComponent(user) + '&email=' + ...;
....
xhr.send(data);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.