我有一个通过AJAX提交的表单。一切都很完美，只有少数输入值总是空的。
注意：我只发布了我的HTML片段（只有相关的输入），因为它太大而无法发布所有内容。
HTML
<!-- This input gets submitted successfully-->
<p id="other_lang">
<strong>Define the other languages you use?</strong>
<input type="text" value="" class="rad" id='radio29_7' name='other'>
</p>
<!-- This input doesn't submit and are always empty-->
<p id="visualstudio">
<strong>How many licenses do you have?</strong>
<input type="text" value="" class="rad" id='radio77_8' name='lqvs'>
</p>
<!-- This input doesn't submit and are always empty-->
<p id="os">
<strong>For which operating systems?</strong>
<input type="text" value="" class="rad" id='radio77_9' name='lqos'>
</p>
<!-- This input doesn't submit and are always empty-->
<p id="ms">
<strong>Would you be willing to explore building some aspects of your technology on the Microsoft platform?</strong>
<input type="text" value="" class="rad" id='radio77_10' name='lqms'>
</p>
所以<input type="text" value="" class="rad" id='radio29_7' name='other'>成功提交，但其他3个输入始终为空。
JQUERY
var langformData = {
'lq1' : $('input.lang:checked').serialize().replace(/%5B%5D/g, '[]').replace(/%23/g, '#'),
'lq2' : $('input[name=lq2]:checked').val(),
'lq3' : $('input[name=lq3]:checked').val(),
'lq4' : $('input[name=lq4]:checked').val(),
'lq5' : $('input[name=lq5]:checked').val(),
'lq6' : $('input[name=lq6]:checked').val(),
'lq7' : $('input[name=lq7]:checked').val(),
'lq8' : $('input[name=lq8]:checked').val(),
'lq9' : $('input[name=other]').val(),
'lq10' : $('input[name=lqvs]').val(),
'lq11' : $('input[name=lqos]').val(),
'lq12' : $('input[name=lqms]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'lang_ajax.php', // the url where we want to POST
data : langformData, // our data object
success : function() {
console.dir (langformData);
},
error : function() {
console.log ('Error submitting');
}
})
以下是我在控制台中的内容：
Object
lq1: "lq1[]=Java&lq1[]=JavaScript&lq1[]=Other"
lq2: "Yes"
lq3: "Yes"
lq4: "No"
lq5: "Level 100 (Novice)"
lq6: "Limited"
lq7: "Level 200 (Intermediate)"
lq8: "Limited"
lq9: "Haskell"
lq10: ""
lq11: ""
lq12: ""
请注意lq10, lq11 and lq12为空。
我试过给输入一个值，但是没有用。我检查了语法错误等，但没有任何效果。
更新1
使用jquery .hide()隐藏有问题的输入。当用户选中其中一个复选框时，输入将使用.fadeIn()淡入。这可能是导致数据丢失的原因吗？
更新2
以下是它基本上如何运作的小提琴：http://jsfiddle.net/ggChris/foon38az/
这是我的完整JS文件的小提琴：http://jsfiddle.net/ggChris/ngpvozuh/
基本上我正在建立一个测验，一次只显示一个问题。当用户单击按钮（它不是提交按钮）时，将显示下一个问题。
不确定完整的JS文件是否有助于解决问题，因为数据提交正常，只有部分输入不起作用。
更新3
这是完整的HTML（包括PHP）：
<?php session_start();
require '../check_client_session.php';
require_once '../conf/conf.php';
/* Select queries return a resultset */
$query = "SELECT * FROM lang_questions";
$result = $con->query($query);
include 'lang_header.php';
?>
<div class="block">
<a class="logout" href="?logout=1">Log Out</a>
<h1 class="h1">Applications & Languages</h1>
<span class="errors"></span>
<form method='post' id='quiz_form'>
<?php while($row = $result->fetch_array(MYSQLI_ASSOC)){ ?>
<div id="question_<?php echo $row['id'];?>" class='questions'>
<h4 id="question_<?php echo $row['id'];?>"><span><?php echo "Q" . $row['id']. "."?></span><?php echo $row['question_name'];?></h4>
<div class='align single-question <?php if ($row['class'] == "lang"){ echo 'col-6';} ?>'>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php if ($row['class'] != "isv"){echo $row['answer1'];} else echo $string1; ?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio1_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans1_<?php echo $row['id'];?>' for='radio1_<?php echo $row['id'];?>'><?php echo $row['answer1'] ?></label>
</p>
<p class="<?php if (empty($row['answer2'])) echo 'hide'; ?>">
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer2'];?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio2_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans2_<?php echo $row['id'];?>' for='radio2_<?php echo $row['id'];?>'><?php echo $row['answer2'] ?></label>
</p>
<p class="<?php if (empty($row['answer3'])) echo 'hide'; ?>">
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer3'];?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio3_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans3_<?php echo $row['id'];?>' for='radio3_<?php echo $row['id'];?>'><?php echo $row['answer3'];?></label>
</p>
<p class="<?php if (empty($row['answer4'])) echo 'hide'; ?>">
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer4'];?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio4_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans4_<?php echo $row['id'];?>' for='radio4_<?php echo $row['id'];?>'><?php echo $row['answer4'];?></label>
</p>
<p id="visualstudio">
<strong>How many licenses do you have?</strong>
<input type="text" value="" class="rad" id='radio77_8' name='lqvs'>
</p>
<p id="os">
<strong>For which operating systems?</strong>
<input type="text" value="" class="rad" id='radio77_9' name='lqos'>
</p>
<p id="ms">
<strong>Would you be willing to explore building some aspects of your technology on the Microsoft platform?</strong>
<input type="text" value="" class="rad" id='radio77_10' name='lqms'>
</p>
<input type="radio" checked='checked' value="5" style='display:none' id='radio4_<?php echo $row['id'];?>' name='<?php echo $row['id'];?>'>
</div>
<?php if ($row['class'] == "lang"){ ?>
<div class='align single-question col-6 no-marginl'>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer5'] ?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio5_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans1_<?php echo $row['id'];?>' for='radio5_<?php echo $row['id'];?>'><?php echo $row['answer5'] ?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer6']?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio6_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans2_<?php echo $row['id'];?>' for='radio6_<?php echo $row['id'];?>'><?php echo $row['answer6'] ?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer7'];?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio7_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans3_<?php echo $row['id'];?>' for='radio7_<?php echo $row['id'];?>'><?php echo $row['answer7'];?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer8'];?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio8_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans4_<?php echo $row['id'];?>' for='radio8_<?php echo $row['id'];?>'><?php echo $row['answer8'];?></label>
</p>
</div>
<div class='align single-question col-6'>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer9'] ?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio9_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans1_<?php echo $row['id'];?>' for='radio9_<?php echo $row['id'];?>'><?php echo $row['answer9'] ?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer10']?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio10_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans2_<?php echo $row['id'];?>' for='radio10_<?php echo $row['id'];?>'><?php echo $row['answer10'] ?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer11'];?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio11_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans3_<?php echo $row['id'];?>' for='radio11_<?php echo $row['id'];?>'><?php echo $row['answer11'];?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer12'];?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio12_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans4_<?php echo $row['id'];?>' for='radio12_<?php echo $row['id'];?>'><?php echo $row['answer12'];?></label>
</p>
</div>
<div class='align single-question col-6 no-marginl'>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer13'] ?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio13_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans1_<?php echo $row['id'];?>' for='radio13_<?php echo $row['id'];?>'><?php echo $row['answer13'] ?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer14']?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio14_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans2_<?php echo $row['id'];?>' for='radio14_<?php echo $row['id'];?>'><?php echo $row['answer14'] ?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer15'];?>" class="rad <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio15_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans3_<?php echo $row['id'];?>' for='radio15_<?php echo $row['id'];?>'><?php echo $row['answer15'];?></label>
</p>
<p>
<input type="<?php echo $row['type'] ?>" value="<?php echo $row['answer16'];?>" class="rad other_lang_option <?php if (!(empty($row['class']))) echo $row['class'] ?>" id='radio16_<?php echo $row['id'];?>' name='<?php echo $row['name'] ?>'>
<label class="labels" id='ans3_<?php echo $row['id'];?>' for='radio16_<?php echo $row['id'];?>'><?php echo $row['answer16'];?></label>
</p>
<p id="other_lang">
<strong>Define the other languages you use?</strong>
<input type="text" value="" class="rad" id='radio29_7' name='other'>
</p>
</div>
<?php } ?>
<br/>
<input type="button" id='next<?php echo $row['id'];?>' value='Next' name='question' class='butt'/>
</div>
<div class="clear"></div>
<?php }?>
</form>
<div id="errors" class="hide">
<div id='error'></div>
</div>
<?php
/* free result set */
$result->free();
/* close connection */
$con->close();
?>
<div class="progress">
<p>PROGRESS <span id="no_questions"></span></p>
<div class="meter">
<span id="inner-meter"></span>
</div>
</div>
<div id="result">
</div>
答案 0 :(得分：0)
$(document).ready(function(){
$('form').submit(function(e){
e.preventDefault();
var formData = {};
$.each($(this).find('input'),function(i,v){
formData[$(v).attr("name")] = $(v).val();
});
console.log(formData);
});
});
见fiddle。您使用的选择器肯定有问题，尽管.serialize()始终是转换表单的最佳解决方案。
答案 1 :(得分：-2)
在jquery中写这个男女同校：
var langformData = {
'lq1' : $('input.lang:checked').serialize().replace(/%5B%5D/g, '[]').replace(/%23/g, '#'),
'lq2' : $('input[name=lq2]:checked').val(),
'lq3' : $('input[name=lq3]:checked').val(),
'lq4' : $('input[name=lq4]:checked').val(),
'lq5' : $('input[name=lq5]:checked').val(),
'lq6' : $('input[name=lq6]:checked').val(),
'lq7' : $('input[name=lq7]:checked').val(),
'lq8' : $('input[name=lq8]:checked').val(),
'lq9' : $('input#radio29_7').val(),
'lq10' : $('input#radio77_8').val(),
'lq11' : $('input#radio77_9').val(),
'lq12' : $('input#radio77_10').val()
};