Question

我想知道如何制作我的网页表单，以便用户必须在框中输入所有数据，然后才能点击提交按钮。

以下是我对webform的代码：

<form id="form"> 

<input id="messageType" type="hidden" name="messageType" value="0"> 

<h1>Section 1 | Personal Information</h1>
<input id="Text2" type="text" name="firstname" required placeholder="First name"/><br />
<input id="Text3" type="text" name="lastname" required placeholder="Last name"/><br />
<input id="Birth" type="text" name="birth" required placeholder="ddmmyyyy" /><br />
<input id="Social" type="text" name="social" required placeholder="Social Insurance #" /><br />

<h1>Section 2 | Contact Information</h1>
<input id="Address" type="text" name="address" required placeholder="Main Address"/><br />
<input id="City" type="text" name="city" required placeholder="City"/><br />
<input id="State" type="text" name="state" required placeholder="Province or State"/><br />
<input id="Country" type="text" name="country" required placeholder="Country"/><br />
<input id="Postal Code" type="text" name="postal" required placeholder="Postal code"/><br />

<h1>Section 3 | Account Information</h1>
<input id="Email" type="text" name="email" required placeholder="Email address"/><br />
<input id="Username" type="text" name="username" required placeholder="Create Username" /><br />
<input id="Password" type="password" name="password" required placeholder="Create Password" /><br />
<input id="Amount" type="text" name="amount" required placeholder="Deposit Amount" /><br />
<br /></form>
<form method="post"><input id="input" type="submit" name="submit" value="Sign Up" />
</form>

这是我提交按钮的JS：

$(document).ready(function () {
        $('#input').click(function () {

           alert($("#form").formToJSON());              //<----------------- USED TO SHOW THE JSON POST, UNCOMMENT IF WANT TO SEE!

            var send = $("#form").formToJSON();
            $.ajax({
                url: //*****ENTER URL OF BANK SERVER HERE*****
                type: "POST",
                data: send,
                async: false,

                //error: function (xhr, error) {
                //   alert('Error! Status = ' + xhr.status + ' Message = ' + error);
                //},

                success: function (data, textStatus, jqXHR) {
                    alert(''+ data.details + '. Your Account #: ' + data.accountNumber);
                }

            });
            return false;
        });
    });

Answer 1

您的<form>问题检查以下工作代码和演示

<form id="form" method="post"> 

<input id="messageType" type="hidden" name="messageType" value="0"> 

<h1>Section 1 | Personal Information</h1>
<input id="Text2" type="text" name="firstname" required placeholder="First name"/><br />
<input id="Text3" type="text" name="lastname" required placeholder="Last name"/><br />
<input id="Birth" type="text" name="birth" required placeholder="ddmmyyyy" /><br />
<input id="Social" type="text" name="social" required placeholder="Social Insurance #" /><br />

<h1>Section 2 | Contact Information</h1>
<input id="Address" type="text" name="address" required placeholder="Main Address"/><br />
<input id="City" type="text" name="city" required placeholder="City"/><br />
<input id="State" type="text" name="state" required placeholder="Province or State"/><br />
<input id="Country" type="text" name="country" required placeholder="Country"/><br />
<input id="Postal Code" type="text" name="postal" required placeholder="Postal code"/><br />

<h1>Section 3 | Account Information</h1>
<input id="Email" type="text" name="email" required placeholder="Email address"/><br />
<input id="Username" type="text" name="username" required placeholder="Create Username" /><br />
<input id="Password" type="password" name="password" required placeholder="Create Password" /><br />
<input id="Amount" type="text" name="amount" required placeholder="Deposit Amount" /><br />
<br />
<input id="input" type="submit" name="submit" value="Sign Up" />
</form>

DEMO

Webform HTML - 在提交之前必须填写所有框

1 个答案: