Question

我有一个通过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>

Answer 1

$(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()始终是转换表单的最佳解决方案。

Answer 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()
};

通过AJAX提交表单 - 输入值为空

2 个答案: