JavaScript-- action form (verification)

JavaScript is operating with a similar form and operation DOM, DOM tree because the form itself.

However, the input box form, like drop-down box may receive user input, the operation with JavaScript form, user input may be obtained, or to set a new content input box.

HTML form input controls are the following:

The purpose of the form: Submit information

• Text box, corresponding <input type="text">, for input text;
• Password block, corresponding <input type="password">for inputting a password;
• Radio buttons, corresponding <input type="radio">, for selecting one;
• Check box corresponding to <input type="checkbox">, for selecting a number;
• Drop-down box, corresponding <select>, for selecting one;
• Hidden text, corresponding <input type="hidden">, invisible to the user, but will hide the text sent to the server when the form is submitted.

Get the value

If we get a <input>node reference, you can directly call valueto get user input corresponding to the value of:

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>

    <!--多选框的值，就是定义好的value -->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl"> 女
    </p>

</form>

<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'


    // 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中~
    girl_radio.checked = true; //赋值

</script>

submit Form

1, embodiment 1 (Submit)

By <form>element submit()submits a form in a method, e.g., a response to <button>the clickevent, the form is submitted in the JavaScript code:

<!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

Disadvantages: disrupting the browser submits to form properly. Click on the browser's default <button type="submit">submit the form, or the user presses the Enter key at the end of an input box. Thus, with the second approach.

2, mode 2 (the onsubmit)

The second way is to respond to <form>their own onsubmitevent, be modified upon submission form:

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
}
</script>

Note: Note To return truetell the browser to continue to submit, if return falsethe browser will not continue to submit form, which usually corresponds to the user input is incorrect, an error message prompts the user to terminate after submission form.

3, MD5 encryption

Inspection and modification <input>when to make full use <input type="hidden">to transmit data.

For example, many users want to login form to enter a user name and password, however, security considerations, does not transmit passwords in clear text form is submitted, but the password MD5.

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var pwd = document.getElementById('password');
    // 把用户输入的明文变为MD5:
    pwd.value = toMD5(pwd.value);
    // 继续下一步:
    return true;
}
</script>

Disadvantages: This approach looks nothing issue, but when the user enters a password submission, the password box to appear suddenly from a few *to become 32 *(MD5 because there are 32 characters)

In order not to change the user's input, can be used <input type="hidden">to achieve:

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把用户输入的明文变为MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 继续下一步:
    return true;
}
</script>

Notice idto md5-passwordthe <input>marked name="password", and user input idis input-passwordof <input>no nameproperty. No nameattribute <input>data will not be submitted.