• form表单嵌套,用标签的form属性来解决表单嵌套的问题


    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>标签的form属性</title> 
    </head>
    <body>
    

    <form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    </form>

    <p> "Last name" 字段没有在 form 表单之内,但它也是 form 表单的一部分。</p>

    Last name: <input type="text" name="lname" form="form1">

    <p><b>注意:</b> IE 不支持 form 属性</p>

    </body>
    </html>

    上面是对标签form属性的一个理解,下面来看一个问题

    <form action="form.jsp" id="form1">  
        <input type="text" name="value1" />  
        <form action="12.jsp" id="form2">  
            <input type="text" name="value2" />  
        </form>  
        <input type="text" name="value3" />  
        <input type="submit" value="提交" onclick="submitForm();"/>  
    </form>  
    
    <script type="text/javascript">  
        function submitForm(){  
            document.getElementById("form1").submit();  
        }  
    </script>  

    如上代码,只能获取到value1和value2的值,value3的值将丢失。 因为form标签不能嵌套,嵌套后会导致第一个form后的数据都不能提交
    下面来看用标签的form属性来解决这个问题,还是以问题代码为列。

    <form action="form.jsp" id="form1">  
        <input form="form1" type="text" name="value1" />
        <input form="form2" type="text" name="value2" />
        <input form="form1" type="text" name="value3" />  
        <input type="submit" value="提交1" onclick="submitForm1();"/>  
    </form>  
    <form action="12.jsp" id="form2">
         <input type="submit" value="提交2" onclick="submitForm1();"/>
    </form>
    
    <script type="text/javascript">  
        function submitForm1(){  
            document.getElementById("form1").submit();  
        }  
        function submitForm(){  
            document.getElementById2("form2").submit();  
        }
    </script>  

    这样利用标签的form属性就可以不用改变表单的结构,就可以提交表单中的某一部分。

  • 相关阅读:
    ActiveMQ (一) 简介
    MSMQ .NET下的应用
    MSMQ
    RabbitMq C# .net 教程
    Rabbit MQ
    Dynamics 365—脚本
    DNS服务器地址汇总
    特殊字符 编码
    4s前置摄像头调用
    登陆前后导航栏处理 2015-12-12
  • 原文地址:https://www.cnblogs.com/jpfss/p/9468293.html
Copyright © 2020-2023  润新知