Jquery的表单序列化发送重复信息
我使用Jquery's $("form").serialize()方法发送表单数据。我将序列化数据显示为alert($("form").serialize());，并找到了一些重复的消息。
那里可能出现什么问题？
已记录的消息显示在附加图像中。
有重复的数据（下划线）。对于stories=3&bedrooms=2&bathrooms=2，第一个很好three SELECT elements。然后有另一个带有bedrooms=Bedrooms&bathroom=Bathrooms的重复消息，然后我在服务器上的PHP代码捕到了第二个消息，并且值永远不会改变。
stories=3&bedrooms=2&bathrooms
是three SELECT elements，bedrooms and bathrooms的默认选项是Bedrooms and Bathrooms。由于重复数据，无论我在bedrooms and bathrooms更改其他选项，都不会更改发送到服务器的值。
可能是什么问题以及如何解决？
感谢
编辑：
我的HTML代码很长。我只是Web应用程序的初学者，不确定它们是否以适当的方式，无论如何它们如下。有两个步骤验证，一个位于功能function validatelanded( event )的客户端，另一个位于服务器function sendtoServer()。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#header { background-color:green; color:white; text-align:center; padding:5px;}
#background {background: url(register_background.png);}
body {
background-color: #cccccc;
}
.star { color: red;}
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;
}
.button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
.overflow { height: 200px; }
select[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
select[required] + label:after {
content:'*';
color: red;
}
input[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
input[required] + label:after {
content:'*';
color: red;
}
input[need] + text{
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
</style>
</head>
<body>
<div id="header">
<h1>Please add your landed property to advertise</h1>
</div>
<div id="background">
<form name="advertiseForm" id="advertiseForm" method="post" >
<br /><br />
<div class="form_box">
<div class="input_box ">
<input type="radio" name="purpose" value="Sell" >To sell
<input type="radio" name="purpose" value="Rent" required="required">To rent
<label for="purpose">Please select transaction type</label>
<div id="purpose-error" class="error-box" style="color:#FF0000">
</div>
</div>
<div class="clear"></div>
</div>
<br /><br />
<div class="form_box">
<div class="input_box ">
<input class="type" type="radio" name="type" value="No_building" >No building
<input class="type" type="radio" name="type" value="With_RC">With RC
<input class="type" type="radio" name="type" value="With_BrickNorcal" required="required">With BrickNorcal
<label for="type">Please select building type</label>
<div id="type-error" class="error-box" style="color:#FF0000"></div>
</div>
<div class="clear"></div>
</div>
<br /><br /><br />
<select name="stories" id="stories" required="required"/>
<option value="Stories" >Number of stories</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="morethan4">More than 4</option>
<select/>
<label for="stories">Please select for number of stories</label>
<div id="stories-error" class="error-box" style="color:#FF0000"></div>
<br /><br /><br />
<select name="bedrooms" id="bedrooms" required="required"/>
<option value="Bedrooms" >Number of bedrooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<select/>
<label for="numbedrooms">Please select for number of bedrooms</label>
<div id="bedrooms-error" class="error-box" style="color:#FF0000"></div>
<br /><br /><br />
<select name="bathrooms" id="bathrooms" required="required"/>
<option value="Bathrooms" >Number of Bathrooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<select/>
<label for="bathrooms">Please select for number of bathrooms</label>
<div id="bathrooms-error" class="error-box" style="color:#FF0000"></div>
<br /><br /><br />
<select name="divs_states" id="divs_states" required="required"/>
<optgroup label="Divisions">
<option value="Division">Please select one of the following divisions</option>
<option value="jquery">jQuery.js</option>
<option value="jqueryui">ui.jQuery.js</option>
</optgroup>
<optgroup label="States">
<option value="State">Please select one of the following states</option>
<option value="somefile">Some unknown file</option>
<option value="someotherfile">Some other file with a very long option text</option>
</optgroup>
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box" style="color:#FF0000"></div>
<br /><br /><br />
<select name="township" id="township" required="required"/>
<option value="Township" >Township</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<select/>
<label for="township">Please select a nearest township</label>
<div id="township-error" class="error-box" style="color:#FF0000"></div>
<br /><br /><br />
<div class="form_box">
<div class="input_box">
<input maxlength="100" type="price" name="price" id="price" required="required" />
<label for="price">Price</label>
<div id="price-error" class="error-box" style="color:#FF0000"></div>
</div>
<div class="clear"></div>
</div>
<br /><br />
<div class="form_box">
<div class="input_box">
<input maxlength="100" type="length" name="length" id="length" required="required" />
<label for="length">Length in feet</label>
<input maxlength="100" type="width" name="width" id="width" required="required" />
<label for="width">Width in feet</label>
<br />
<div id="length-error" class="error-box" style="color:#FF0000"></div>
<div id="width-error" class="error-box" style="color:#FF0000"></div>
</div>
<div class="clear"></div>
</div>
<br />
<input type="radio" name="havetelephone" value="yes" checked>Yes
<input type="radio" name="havetelephone" value="no" need="need">No
<text for="havetelephone">Landline telephone installed at home?</text>
<br /><br />
<input type="radio" name="haveaircon" value="yes">Yes
<input type="radio" name="haveaircon" value="no" required="required">No
<label for="haveaircon">Aircon installed?</label>
<div id="haveaircon-error" class="error-box" style="color:#FF0000"></div>
<br /><br /><br />
<select name="possession" required="required"/>
<option value="Possession" >Possession</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<select/>
<label for="possession">Please select a possession type</label>
<div id="possession-error" class="error-box" style="color:#FF0000"></div>
<br /><br /><br />
<input maxlength="100" type="text" name="date" id="date" required="required" />
<label for="date">Please specify an available date for start use</label>
<div id="date-error" class="error-box" style="color:#FF0000"></div>
<br /><br /><br />
<textarea rows="20" cols="70" name="textarea" id="textarea" placeholder="Please enter additional information here..."></textarea>
<div id="textarea-error" class="error-box" style="color:#FF0000"></div>
<br /><br />
<div style="color:#0000FF">
<h3>Contact address</h3>
</div>
<br />
<input type="radio" name="agentowner" value="Agent" >Agent
<input type="radio" name="agentowner" value="Owner" required="required">Owner
<label for="agentowner">Please specify</label>
<div id="agentowner-error" class="error-box" style="color:#FF0000"></div>
<br /><br />
<div class="form_box">
<div class="input_box ">
<input maxlength="60" type="text" name="name" id="name" required="required" />
<label for="name">Name</label>
<div id="name-error" class="error-box" style="color:#FF0000"></div>
</div>
<div class="clear"></div>
</div>
<br /><br />
<div class="form_box">
<div class="input_box ">
<input maxlength="60" type="text" name="phone" id="phone" required="required" />
<label for="phone">Phone</label>
<div id="phone-error" class="error-box" style="color:#FF0000"></div>
</div>
<div class="clear"></div>
</div>
<br /><br />
<div class="form_box">
<div class="input_box">
<input maxlength="64" type="text" name="email" id="email" required="required" />
<label for="email">Email</label>
<div id="email-error" class="error-box" style="color:#FF0000"></div>
</div>
<div class="clear"></div>
</div>
<br /><br />
<textarea rows="10" cols="50" name="address" id="address" placeholder="Please key in full address if you are ok..."></textarea>
<!-- Check on the page itself first -->
<br /><br /><br />
<div style="text-align:center">
<input class="button button2" id="submitbutton" type="button" value="Submit" />
</div>
</form>
</div>
</body>
<script>
$("#textarea")
.focus(function() {
if ($("#textarea").val() == null) return;
if ($("#textarea").val() == "Please enter additional information here...")
$("#textarea").val('');
})
.blur(function() {
if ($("#textarea").val() == null) return;
if ($("#textarea").val() == '')
$("#textarea").val('Please enter additional information here...');
});
$("#address")
.focus(function() {
if ($("#address").val() == null) return;
if ($("#address").val() == "Please key in full address if you are ok...")
$("#address").val('');
})
.blur(function() {
if ($("#address").val() == null) return;
if ($("#address").val() == '')
$("#address").val('Please key in full address if you are ok...');
});
$(function() {
$( "#date" ).datepicker();
});
function trimAll( str ) {
return str.replace( /^\s+|\s+$/g, '' );
}
function sendtoServer() {
alert($("form").serialize());
$.ajax({
url: "advertisementdatavalidationatserver.php",
type: "POST",
data: $("form").serialize(),
success: function(ret){
alert(ret);
if(ret.error == true){
if(ret.message.indexOf("Purposeerror")>=0){
$('#purpose-error').css('display', 'block');
$('#purpose-error').html('Please enter to rent or to sell');
}else{
$('#purpose-error').html('');
}
if(ret.message.indexOf("Typeerror")>=0){
$('#type-error').css('display', 'block');
$('#type-error').html('Please enter your building type');
}else{
$('#type-error').html('');
}
if(ret.message.indexOf("Storieserror")>=0){
$('#stories-error').css('display', 'block');
$('#stories-error').html('Please enter number of stories at your building');
}else{
$('#stories-error').html('');
}
if(ret.message.indexOf("Bedroomserror")>=0){
$('#bedrooms-error').css('display', 'block');
$('#bedrooms-error').html('Please enter number of bedrooms at your building');
}else{
$('#bedrooms-error').html('');
}
if(ret.message.indexOf("Bathroomserror")>=0){
$('#bathrooms-error').css('display', 'block');
$('#bathrooms-error').html('Please enter number of bathrooms at your building');
}else{
$('#bathrooms-error').html('');
}
if(ret.message.indexOf("Divisionerror")>=0){
$('#divs_states-error').css('display', 'block');
$('#divs_states-error').html('Please select a Division or a State');
}else{
$('#divs_states-error').html('');
}
if(ret.message.indexOf("Townshiperror")>=0){
$('#township-error').css('display', 'block');
$('#township-error').html('Please select a Township');
}else{
$('#township-error').html('');
}
if(ret.message.indexOf("Priceerror")>=0){
$('#price-error').css('display', 'block');
$('#price-error').html('Please include the price');
}else{
$('#price-error').html('');
}
if(ret.message.indexOf("Priceinvalid")>=0){
$('#price-error').css('display', 'block');
$('#price-error').html('Price accepts only neumerical digits');
}else{
$('#price-error').html('');
}
}else{
$('#purpose-error').html('');
$('#type-error').html('');
$('#stories-error').html('');
$('#bedrooms-error').html('');
$('#bathrooms-error').html('');
$('#divs_states-error').html('');
$('#township-error').html('');
$('#price-error').html('');
}
},
error: function(){
// the AJAX request failed as in timed out / bad url etc.
}
});
}
$( "#submitbutton" ).on( "click", validatelanded );
function validatelanded( event ){
if (!$("input[name='purpose']:checked").val()) {
$('#purpose-error').css('display', 'block');
$('#purpose-error').html('Please select to Sell or to Rent');
return false;
}else{
$('#purpose-error').html('');
}
if (!$("input[name='type']:checked").val()) {
$('#type-error').css('display', 'block');
$('#type-error').html('Please select one of the Building types');
return false;
}else{
$('#type-error').html('');
}
if($("input[name='type']:checked").val() == "With_RC" || $("input[name='type']:checked").val() == "With_BrickNorcal"){
if($( "#stories" ).val() == "Stories"){
$('#stories-error').css('display', 'block');
$('#stories-error').html('Please select number of stories at the building');
return false;
}else{
$('#stories-error').html('');
}
if($( "#bedrooms" ).val() == "Bedrooms"){
$('#bedrooms-error').css('display', 'block');
$('#bedrooms-error').html('Please select number of bedrooms at the building');
return false;
}else{
$('#bedrooms-error').html('');
}
if($( "#bathrooms" ).val() == "Bathrooms"){
$('#bathrooms-error').css('display', 'block');
$('#bathrooms-error').html('Please select number of bathrooms at the building');
return false;
}else{
$('#bathrooms-error').html('');
}
}
if($( "#divs_states" ).val() == "Division" || $( "#divs_states" ).val() == "State"){
$('#divs_states-error').css('display', 'block');
$('#divs_states-error').html('Please select a Division or a State');
return false;
}else{
$('#divs_states-error').html('');
}
if($( "#township" ).val() == "Township" ){
$('#township-error').css('display', 'block');
$('#township-error').html('Please select a township');
return false;
}else{
$('#township-error').html('');
}
var price = $('#price').val();
if ($.trim(price) == '' ) {
$('#price-error').css('display', 'block');
$('#price-error').html('Please include price');
return false;
}else if(!price.match(/^\d+$/)){
$('#price-error').css('display', 'block');
$('#price-error').html('Price can include only numerical digits');
return false;
}else{
$('#price-error').html('');
}
var length = $('#length').val();
if ($.trim(length) == '' ) {
$('#length-error').css('display', 'block');
$('#length-error').html('Please include length of the land');
return false;
}else if(!length.match(/^\d+$/)){
$('#length-error').css('display', 'block');
$('#length-error').html('Please include length in correct format');
return false;
}else{
$('#length-error').html('');
}
var width = $('#width').val();
if ($.trim(width) == '' ) {
$('#width-error').css('display', 'block');
$('#width-error').html('Please include width of the land');
return false;
}else if(!width.match(/^\d+$/)){
$('#width-error').css('display', 'block');
$('#width-error').html('Please include width in correct format');
return false;
}else{
$('#width-error').html('');
}
if (!$("input[name='haveaircon']:checked").val()) {
$('#haveaircon-error').css('display', 'block');
$('#haveaircon-error').html('Please select for the aircon');
return false;
}else{
$('#haveaircon-error').html('');
}
if($( "#possession" ).val() == "Possession"){
$('#possession-error').css('display', 'block');
$('#possession-error').html('Please select possession type');
return false;
}else{
$('#possession-error').html('');
}
if ($.trim($('#date').val()) == '' ) {
$('#date-error').css('display', 'block');
$('#date-error').html('Please include available date for start use');
return false;
}else{
$('#date-error').html('');
}
if ($('#textarea').val() == "" || $('#textarea').val() =="Please enter additional information here...")
{
$('#textarea-error').css('display', 'block');
$('#textarea-error').html('Please enter additional information in the above text area...');
return false;
}else{
$('#textarea-error').html('');
}
if (!$("input[name='agentowner']:checked").val()) {
$('#agentowner-error').css('display', 'block');
$('#agentowner-error').html('Please select Agent or Owner');
return false;
}else{
$('#agentowner-error').html('');
}
var name = $('#name').val();
if( $.trim(name) == '' ){
$('#name-error').css('display', 'block');
$('#name-error').html('Please include name of the person who submit this advertisement.');
return false;
}else{
$('#name-error').html('');
}
var phone= $('#phone').val();
if ($.trim(phone) == '') {
$('#phone-error').css('display', 'block');
$('#phone-error').html('Please include phone number to contact.');
return false;
} else if(phone.length < 6){
$('#phone-error').css('display', 'block');
$('#phone-error').html('Please include valid phone number to contact.');
return false;
}else if (!phone.match(/^[0-9]+$/)){
$('#phone-error').css('display', 'block');
$('#phone-error').html('Please include valid phone number to contact.');
return false;
}else{
$('#phone-error').html('');
}
var email= $('#email').val();
if ($.trim(email) == '') {
$('#email-error').css('display', 'block');
$('#email-error').html('Please include email number to contact.');
return false;
}else if (!email.match(/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i)) {
$('#email-error').css('display', 'block');
$('#email-error').html('Please include valid email number to contact.');
return false;
}else{
$('#email-error').html('');
}
sendtoServer();
}
</script>
</html>
1 个答案:
答案 0 :(得分：1)
当我处理多个表单时，我会为每个开始<form>标记一个唯一的ID，并序列化该特定ID的数据。您的编辑中的表单具有“advertiseForm”ID，而不是“表单”。在js中编写id时，不要忘记#字符。
您的js应如下所示：$("#advertiseForm").serialize()，这将使用ID“advertiseForm”序列化表单。另一个表单还必须具有唯一的id或类名才能正确序列化。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？