• form提交


    方法一:利用form的onsubmit()函数(经常使用)

    Html代码  收藏代码
    1. <script type="text/javascript">  
    2.     function validateForm(){  
    3.     if(document.reply.title.value == ""){ //通过form名来获取form  
    4.         alert("please input the title!");  
    5.         document.reply.title.focus();  
    6.         return false;  
    7.     }     
    8.     if(document.forms[0].cont.value == ""){ //通过forms数组获取form  
    9.         alert("please input the content!");  
    10.         document.reply.cont.focus();  
    11.         return false;  
    12.     }  
    13.     return true;  
    14.   }  
    15. <form name="reply"  method="post" onsubmit="return validateForm( );">  
    16.         <input type="text" name="title"  size="80" /><br />  
    17.         <textarea name="cont" cols="80" rows="12"></textarea><br />  
    18.         <input type="submit" value="提交" >  
    19. </form>  
    20. 注意:  
    21. 1.onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回  
    22. 2.validateForm一定要返回一个boolean类型的返回值  
    23. 3.提交按钮要写成submit类型的  

    方法二:利用input类型为submit组件的onclick()函数

        1.将上面form标签中的onsubmit="return validateForm()"属性,去掉。

        2.为“提交”按钮添加onclick事件,如下:

         <input type="submit" value="提交" onclick="return validateForm();">

    方法三:利用button组件的onclick()函数,手动提交

    Html代码  收藏代码
    1. <script type="text/javascript">  
    2.     function modifyItem() {  
    3.         if (trim(document.getElementById("itemName").value) == "") {  
    4.             alert("物料名称不能为空!");  
    5.             document.getElementById("itemName").focus();  
    6.             return;  
    7.         }   
    8.         with (document.getElementById("itemForm")) {  
    9.             method = "post";  
    10.             action = "item.do?command=modify&pageNo=${itemForm.pageNo}";  
    11.             submit();  
    12.         }  
    13.     }  
    14.     //返回  
    15.     function goBack() {  
    16.         window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";  
    17.     }  
    18. </script>  
    19. <form name="itemForm" id="itemForm">  
    20.       <input name="itemNo" type="text"   id="itemNo" value="${ item.itemNo }" >  
    21.       <input name="itemName" type="text"   id="itemName" value="${ item.itemName }" >  
    22.      <input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">  
    23. </form>  
    24. 注意:  
    25. 1.提交时,设置form的action和methods属性,然后利用form.submit()函数提交。  

     总结:

           1.对form中的组件验证时,前两个使用的是name属性,包括form自身的。

           2.如果提交表单时没有反应,同时确定提交表单部分代码没有问题,请查看提交表单前面的js代码,有时前面js的错误会引发莫名其妙的问题。

  • 相关阅读:
    Altium Designer 快捷键,长期更新
    代码: 0x80131500:应用商店崩溃怎么修复
    (转)stm32cubeMx配置使用encoder编码器
    STM32 PWM注意事项
    转载 STM32 使用Cubemx 建一个USB(HID)设备下位机,实现数据收发
    STM32Cube填坑,ST link 下载一次以后无法下载
    SuperSocket 学习笔记-客户端
    python-kaggle之旅
    Leetcode刷题记(9)——移除元素
    Leetcode刷题记(8)——删除排序数组中的重复项
  • 原文地址:https://www.cnblogs.com/zhang-boke/p/7243916.html
Copyright © 2020-2023  润新知