Question

我有一个注册表单，我使用JS分成三个独立的字段集。我还编写了一个JS函数来实际处理表单数据。表单本身看起来很棒，而Previous和Next按钮工作正常，但提交按钮只是按下而不是正在提交。是signup（）函数中的问题吗？

表格如下：

<body>
<!-- multistep form -->

<form id="signupform">
    <!-- progressbar -->


    <ul id="progressbar">

        <li class="active">Personal Profile</li>

        <li>Second Profile</li>

        <li>Additional Details</li>

   </ul>


<!-- fieldsets -->


<fieldset>

    <h2 class="fs-title">Create your account</h2>

    <h3 class="fs-subtitle">This is step 1</h3>

    <input type="text" id="username" onblur="checkusername()" onkeyup="restrict('username')" maxlength="100" placeholder="Username" />
    <span id="unamestatus"></span>
        <input type="text" id="email" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88" placeholder="Email" />
        <input type="password" id="pass1" onfocus="emptyElement('status')" maxlength="100" placeholder="Password" />
        <input type="password" id="pass2" onfocus="emptyElement('status')" maxlength="100" placeholder="Confirm Password" />
    <input type="button" name="next" class="next action-button" value="Next" />

</fieldset>


<fieldset>

    <h2 class="fs-title">Second Profile</h2>

    <h3 class="fs-subtitle">The Second You</h3>


    <select id="favorite genre" onfocus="emptyElement('status')" placeholder="Favorite Genre" />
            <?php include("template_genre_list.php"); ?>
        </select>

        <select id="second favorite genre" onfocus="emptyElement('status')" placeholder="Second Favorite Genre" />
            <?php include("template_genre_list.php"); ?>
        </select>

    <select id="tfg" onfocus="emptyElement('status')" placeholder="Third Favorite Genre" />
            <?php include("template_genre_list.php"); ?>
        </select>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />

</fieldset>


<fieldset>

    <h2 class="fs-title">Additional Details</h2>

    <h3 class="fs-subtitle">The Additional Things</h3>


    <select id="gender" onfocus="emptyElement('status')" placeholder="Gender" />
            <option value=""></option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>

    <select id="state" onfocus="emptyElement('status')" placeholder="State" />
            <option value=""></option>
            <option value="Alabama">Alabama</option>
            <option value="Alaska">Alaska</option>
            <option value="Arizona">Arizona</option>
            <option value="Arkansas">Arkansas</option>
            <option value="California">California</option>
            <option value="Colorado">Colorado</option>
            <option value="Connecticut">Connecticut</option>
            <option value="Delaware">Delaware</option>
            <option value="Florida">Florida</option>
            <option value="Georgia">Georgia</option>
            <option value="Hawaii">Hawaii</option>
            <option value="Idaho">Idaho</option>
            <option value="Illinois">Illinois</option>
            <option value="Indiana">Indiana</option>
            <option value="Iowa">Iowa</option>
            <option value="Kansas">Kansas</option>
            <option value="Kentucky">Kentucky</option>
            <option value="Louisiana">Louisiana</option>
            <option value="Maine">Maine</option>
            <option value="Maryland">Maryland</option>
            <option value="Massachusetts">Massachusetts</option>
            <option value="Michigan">Michigan</option>
            <option value="Minnesota">Minnesota</option>
            <option value="Mississippi">Mississippi</option>
            <option value="Missouri">Missouri</option>
            <option value="Montana">Montana</option>
            <option value="Nebraska">Nebraska</option>
            <option value="Nevada">Nevada</option>
            <option value="New Hampshire">New Hampshire</option>
            <option value="New Jersey">New Jersey</option>
            <option value="New Mexico">New Mexico</option>
            <option value="New York">New York</option>
            <option value="North Carolina">North Carolina</option>
            <option value="North Dakota">North Dakota</option>
            <option value="Ohio">Ohio</option>
            <option value="Oklahoma">Oklahoma</option>
            <option value="Oregon">Oregon</option>
            <option value="Pennsylvania">Pennsylvania</option>
            <option value="Rhode Island">Rhode Island</option>
            <option value="South Carolina">South Carolina</option>
            <option value="South Dakota">South Dakota</option>
            <option value="Tennessee">Tennessee</option>
            <option value="Texas">Texas</option>
            <option value="Utah">Utah</option>
            <option value="Vermont">Vermont</option>
            <option value="Virginia">Virginia</option>
            <option value="Washington">Washington</option>
            <option value="West Virginia">West Virginia</option>
            <option value="Wisconsin">Wisconsin</option>
            <option value="Wyoming">Wyoming</option>
        </select>

    <input type="text" id="city" onfocus="emptyElement('status')" onkeyup="restrict('city')" maxlength="200" placeholder="City (or General Location)">

    <input id="biography" type="text" onfocus="emptyElement('status')" onkeyup="restrict('biography')" maxlength="200" placeholder="A Short But Awesome Bio" />

    <input type="button" name="previous" class="previous action-button" value="Previous" />

    <button id="signupbtn" onclick="signup()">Create Account</button>

    <span id="status"></span>

</fieldset>

</form>

<!-- jQuery -->


<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>


<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>



<script src="signupjs/signup.js"></script>

</body>

并且signup（）函数如下：

function signup(){
    var u = _("username").value;
    var e = _("email").value;
    var p1 = _("pass1").value;
    var p2 = _("pass2").value;
    var sta = _("state").value;
    var cit = _("city").value;
    var g = _("gender").value;
    var bio = _("biography").value;
    var status = _("status");
    if(u == "" || e == "" || p1 == "" || p2 == "" || sta == "" || cit == "" || g == "" || bio == ""){
    status.innerHTML = "Please fill out all the fields! ";
} else if(p1 != p2){
    status.innerHTML = "Your password fields do not match";
} else {
    _("signupbtn").style.display = "none";
    status.innerHTML = 'Please Wait ...';
    var ajax = ajaxObj("POST", "signup.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if(ajax.responseText != "signup_success"){
                status.innerHTML = ajax.responseText;
                _("signupbtn").style.display = "block";
            } else {
                window.scrollTo(0,0);
                _("signupform").innerHTML = "OK "+u+", check your email inbox and junk mail box at <u>"+e+"</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
            }
        }
    }
    ajax.send("u="+u+"&e="+e+"&p="+p1+"&sta="+sta+"&cit="+cit+"&c="+c+"&g="+g+"&pi="+pi+"&si="+si+"&ai="+ai+"&fg="+fg+"&sfg="+sfg+"&tfg="+tfg+"&fa="+fa+"&hi="+hi+"&av="+av+"&bio="+bio);
}
}

Answer 1

您是否尝试过使用event.preventDefault（）;在你的signup（）函数？这样可以防止按钮的默认处理，这可以解决您的问题。

提交按钮Javascript导致表单无法提交

1 个答案: