Blogger Information
Blog 18
fans 0
comment 0
visits 14889
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js_submit
牛粪也香的博客
Original
1142 people have browsed it

```html

<form action="" method="" id="forms">

    <input type="text" name="username" value="" />

    <input type="password" name="pwd" value="" />

    <input type="submit" value="提交"/>

</form>

```


```html

<!--HTML-->

<form action="" method="" id="test_form">

    <input type="text" name="username" value="" />

    <input type="password" name="pwd" value="" />

    <button type="button" onclick='doSubmitForm()'>提交<button/>

</form>

<script>

var form = document.getElementById('test_form');

//再次修改input内容

form.submit();

</script>

```


**这种方法有个缺点就是,打乱正常的表单提交程序,通常用户输入 *完成后点击回车键就可以提交*,但是这个方法实现不了,所以,使用下面的方法便可以解决这个问题,,通过form自身的onsubmit方法,来触发提交,然后进行input的修改:**


```html

<!--HTML-->

<form id='test_form' action='' method='' omsubmit='return checkForm()'>

    <input type='text' name='username' value=''/>

    <input type='password' name='pwd' value =''/>

    <button type='submit'>提交<button/>

<form/>


<script>

function checkForm(){

    var form = document.getElementById('test_form');

    //可在此修改input            

    //进行下一步

    return true;

}

<script/>

```


**注意,checkForm()方法中,return true时,表单才会正常提交,为false时,浏览器将不会提交,通常是用户的密码输入错误时,终止提交。**


**之前说过,为安全考虑用户提交时,一般对密码进行加密处理,代码如下**:


```html

<!--HTML-->

<form id='test_form' action='' method='' omsubmit='return checkForm()'>

    <input type='text' name='username' value=''/>

    <input type='password' name='pwd' id='pwd' value =''/>

    <button type='submit'>提交<button/>

<form/>


<script>

function checkForm(){

    var pwd= document.getElementById('pwd');

   pwd.value= toMD5(pwd.value);            

    //进行下一步

    return true;

}

<script/>

```


**这种做法看上去没问题,但是当用户输入完成后,提交会发现密码框的 * 会由几个瞬间变成 32个,这是由于MD5加密造成的(MD5有32个字符);如果想避免出现这种情况,需要充分利用到<input type='hidden'>,代码如下:**


```php+HTML

<!--HTML-->

<form id='test_form' action='' method='' omsubmit='return checkForm()'>

    <input type='text' name='username' value=''/>

    <input type='password'  id='input_pwd' value =''/>

    <input type='hidden' name='pwd' id='md5_pwd' value=''/>

    <button type='submit'>提交<button/>

<form/>


<script>

function checkForm(){

    var input_pwd= document.getElementById('input_pwd');

    var md5_pwd= document.getElementById('md5_pwd');

     md5_pwd.value= toMD5(input_pwd.value);            

    //进行下一步

    return true;

}

<script/>


```


 **注意,<input type='password'/>是用户输入密码的input框并,没有设置 name 属性,而是给 <input type='hidden' /> 设置了 name='pwd',这样表单提交只会提交带有name属性的输入框,从而解决了上面的那个问题。**


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post