Question

我正在尝试创建一个简单的Jquery提交表单，其中用户单击是或否来回答问题并提交表单。提交表单后，我将用提交的数据替换字段集。但由于某种原因，没有任何反应。我甚至尝试过发出警报，看看代码是否有效，但我不确定是什么问题。

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;background-color:white;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;background-color:white;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;background-color:white;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//Quiz Submit Button
            $("form").submit( function () {    
                $.ajax({   
                        type: "POST",
                        data : $(this).serialize(),
                        cache: false,  
                        url: "http://www.cwu.edu/~janvik/CS250/echo.php",   
                        success: function(data){
                            alert('it worked');
                            $("fieldset").html(data);                       
                        }   
                    });  return false; 
                });      
</script>

            <h1>Eligibility</h1><hr>
            <h2>Check if you're eligible to vote on the 2014 Referendum?</h2>

<p class="article"><span></span>
<form action="#" onClick='submitDetailsForm()' name="form" class="form" id="form">
    <fieldset>
        <legend>Eligibility Questionnaire</legend>
        <label id="birthdate">Were you born on or before 18 September 1998?</label></br> 
        <input id="birthdate" type="radio" name="birthdate" value="yes" required="required">Yes</input>
        <input id="birthdate" type="radio" name="birthdate" value="no" required="required">No</input>
        </br></br>
        <label id="birthplace">Are you currently residing in Scotland?</label></br> 
        <input id="birthplace" type="radio" name="birthplace" value="yes" required="required">Yes</input>
        <input id="birthplace" type="radio" name="birthplace" value="no" required="required">No</input>
        </br></br>
        <label id="citizen">Are you a British citizen?</label></br> 
        <input id="citizen" type="radio" name="citizen" value="yes" required="required">Yes</input>
        <input id="citizen" type="radio" name="citizen" value="no" required="required">No</input>
        </br></br>
        <label id="eucitizen">Are you a citizen of the Republic of Ireland and/or other EU countries?</label></br> 
        <input id="eucitizen" type="radio" name="eucitizen" value="yes" required="required">Yes</input>
        <input id="eucitizen" type="radio" name="eucitizen" value="no" required="required">No</input>
        </br></br>
        <label id="eucitizen">Are you a current Service/Crown personnel serving in the UK or overseas in the Armed Forces or with Her Majesty's Government who are registered to vote in Scotland?</label></br> 
        <input id="crownservice" type="radio" name="crownservice" value="yes" required="required">Yes</input>
        <input id="crownservice" type="radio" name="crownservice" value="no" required="required">No</input>
    </fieldset>

    </br>
    <input id="submit" type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

<div id="results">Test</div>
</p>

Answer 1

执行脚本时，＆lt; form＆gt;元素不存在。尝试将您的脚本放在$（）函数中，让它在加载所有内容时运行：

<script>
    $(function() {
            $("form").submit( function () {    
                $.ajax({   
                        type: "POST",
                        data : $(this).serialize(),
                        cache: false,  
                        url: "http://www.cwu.edu/~janvik/CS250/echo.php",   
                        success: function(data){
                            alert('it worked');
                            $("fieldset").html(data);                       
                        }   
                    });  return false; 
                });      
    });
</script>

您也可以在声明＆lt; form＆gt;。

之后放置脚本

Answer 2

我认为你需要添加

（文档）$。就绪（函数（）{

}）;

<script>
//Quiz Submit Button
$(document).ready(function(){
        $("form").submit( function () {    
            $.ajax({   
                    type: "POST",
                    data : $(this).serialize(),
                    cache: false,  
                    url: "http://www.cwu.edu/~janvik/CS250/echo.php",   
                    success: function(data){
                        alert('it worked');
                        $("fieldset").html(data);                       
                    }   
                });  return false; 
            });      


});
</script>

希望这有帮助！

Jquery Submit不会做任何动作

2 个答案: