JavaScript 06 操作表单 提交表单

操作表单

表单是什么 form DOM树

  • 文本框 text
  • 下拉框 select
  • 单选框 radio
  • 多选框checkbox
  • 隐藏域 hidden
  • 密码框 password

表单的目的:提交信息

<form action="post">
  <p>
  <span>username: </span><input type="text" id="username">
</p>
<!--多选框的值,就是定义好的-->
    <p>
    <span>sex</span>
<input type = "radio" name = "sex" value = "male" id = "male">male
<input type = "radio" name = "sex" value = "female" id = "female">female
</p>

</form>
<script>
  var input_text = document.getElementById('username');
var male_radio = document.getElementById('male');
var female_radio = document.getElementById('female');
// 得到输入框的值
input_text.value 
// 修改输入框的值
input_text.value = '123'

// 对于单选框,多选框等等固定的值,male_radio.value只能取到当前的值
male_radio.checked; // 查看返回的结果是否为true
// 如果是true,则被选中
male_radio.checked = true; // 让该选项被选中
</script>

提交表单

md5加密密码,表单优化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  </head>
  <body>
    <!--表单绑定提交事件
onsumbit 绑定一个提交检测的函数 true false
将这个结果返回给表单,使用onsubmit接收
-->

    <form action="https://www.baidu.com/" method = "post" onsubmit = "return aaa">
      <p>
        <span>username: </span><input type="text" id="username" name = "username">
      </p>
      <!--多选框的值,就是定义好的-->
      <p>
        <span>password: </span><input type = "password" id = "input-password">
      </p>
      <input type="hidden" id="md5-password" name = "password">
      <!-- 绑定事件 -->
      <button type = "submit" onclick = "aaa()">submit</button>
      <!-- <input type = "submit"> -->
    </form>
    <script>
      function aaa(){
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);

        // console.log(uname.value);
        // // MD5 algo
        // pwd.value = md5(pwd);
        // console.log(pwd.value);

        // 可以校验判断表单内容,true就是通过提交,false:阻止提交
        return true;

      }
    </script>
  </body>
</html>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 HTML 表单JavaScript 来实现表单提交。下面是一个简单的例子,假设你有一个包含用户名和密码输入框的表单: ```html <form id="my-form"> <label>用户名:</label> <input type="text" name="username"><br> <label>密码:</label> <input type="password" name="password"><br> <input type="submit" value="提交"> </form> ``` 然后使用 JavaScript 代码来拦截表单提交事件,并通过 AJAX 发送表单数据到服务器端: ```javascript document.getElementById("my-form").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为 var xhr = new XMLHttpRequest(); xhr.open("POST", "/submit-form"); // 替换成服务器端接口地址 xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求头 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); // 在控制台输出响应结果 } }; xhr.send(JSON.stringify({ username: document.getElementsByName("username")[0].value, password: document.getElementsByName("password")[0].value })); // 将表单数据转换为 JSON 字符串并发送到服务器端 }); ``` 上面的代码中,我们使用了 `preventDefault()` 方法来阻止表单的默认提交行为,然后创建了一个 XMLHttpRequest 对象,设置请求头和回调函数,并使用 `send()` 方法将表单数据发送到服务器端。在服务器端,你需要解析请求体中的 JSON 数据并进行相应的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值