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屬性就可以不用改變表單的結構,就可以提交表單中的某一部分。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM