javascript_操作表单_原生

Posted 2020-11-04 mexding

<!-- javascript_操作表单_原生 -->

<!--代码1：-->
<label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
<label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
<script>
    var mon = document.getElementById(‘monday‘);
    var tue = document.getElementById(‘tuesday‘);
    mon.value; // ‘1‘
    tue.value; // ‘2‘
    mon.checked; // true或者false
    tue.checked; // true或者false
</script>
<!-- 代码1解说：-->
<!-- 1.表单获取值的.value方法 -->
<!-- 2.单选框和多选框获取值用.checked方法 -->

<!-- 代码2： -->
<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>
<!-- 代码2解说： -->
<!-- 1. 第2种表单提交方式，form元素的submit()方法 -->

<!-- 代码3： -->
<!-- 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>
<!-- 代码3解说： -->
<!-- 1. 代码3：第2种表单提交方式，这种方式是被推荐的 -->

<!-- 代码4： -->
<!-- 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>
<!-- 代码4解说： -->
<!-- 1. 没有name属性的数据不会被提交 -->