• 操作表单 -------JavaScrip


    本文摘要:http://www.liaoxuefeng.com/

    HTML表单的输入控件主要有以下几种:

    • 文本框,对应的<input type="text">,用于输入文本;

    • 口令框,对应的<input type="password">,用于输入口令;

    • 单选框,对应的<input type="radio">,用于选择一项;

    • 复选框,对应的<input type="checkbox">,用于选择多项;

    • 下拉框,对应的<select>,用于选择一项;

    • 隐藏文本,对应的<input type="hidden">,用户不可见,但表单提交时会把隐藏文本发送到服务器。

    取值:

      

    设置值

    提交表单

    最后,JavaScript可以以两种方式来处理表单的提交(AJAX方式在后面章节介绍)。

    方式一是通过<form>元素的submit()方法提交一个表单,例如,响应一个<button>click事件,在JavaScript代码中提交表单:

    <!-- 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>
    

    这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单,或者用户在最后一个输入框按回车键。

    因此,第二种方式是响应<form>本身的onsubmit事件,在提交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>
    

    注意要return true来告诉浏览器继续提交,如果return false,浏览器将不会继续提交form,这种情况通常对应用户输入有误,提示用户错误信息后终止提交form。

    在检查和修改<input>时,要充分利用<input type="hidden">来传递数据。

    注:没有name属性的<input>的数据不会被提交。

  • 相关阅读:
    (64)通信协议之一xml
    (63)通信协议之一json
    (61)C语言预处理命令详解
    (60) 结构体指针、结构体变量嵌套、结构体指针嵌套、函数指针、数组指针、指针数组、typedef 综合运用
    (59)Linux操作系统深入应用
    (58)PHP开发
    (57)Linux驱动开发之三Linux字符设备驱动
    (56)Linux驱动开发之二
    (55)Linux驱动开发之一驱动概述
    (54)LINUX应用编程和网络编程之九Linux网络通信实践
  • 原文地址:https://www.cnblogs.com/Sea1ee/p/7127475.html
Copyright © 2020-2023  润新知