发表新帖
发表新帖

Embed an HTML <form> within a larger <form>?

前端 未结
关注
9 1892
我寻月下人不归
我寻月下人不归 2020-12-06 03:46

I want to have an HTML form embedded in another form like so:
相关标签:
9条回答
  • 别跟我提以往
    2020-12-06 04:22

    You cannot have nested forms (source) so this will not work.

    Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested

    0 讨论(0)
  • 野性不改
    2020-12-06 04:26

    A possible solution : Instead of having the nested form, add an onClick event to the form2 button which will call a JS method that could get your specific items (val2 input in this case) from form1 and using AJAX or simply xmlHTTPRequests() to perform the desired POST methods.

    0 讨论(0)
  • 忘了有多久
    2020-12-06 04:26

    I think there may be issues with the UI for this. It'd be very confusing for a user if only part of (what appears to be) a single form was submitted/saved.

    Rather than nesting forms, which, as stated, is invalid, I think you need to look at perhaps implementing some AJAX calls instead to update subset of data.

    0 讨论(0)
  • 孤城傲影
    2020-12-06 04:27

    quite late but you can do this:

      <form id="form1"></form>
  <form id="form2"></form>
  <input ***form="form1"*** name="val1"/>
  <input ***form="form1"*** name="val2" type="hidden" />

  <input ***form="form2"*** name="val2"/>
  <input ***form="form2"*** type="button" name="Submit Form 2 ONLY">

  <input ***form="form1"*** type="button" name="Submit Form 1 data including form 2" 
         onsubmit="return copyFromForm2Function()">

    The "form" element within the input tag has been added to get around the inability to nest forms.

    0 讨论(0)
  • 星月不相逢
    2020-12-06 04:28

    What you have described will not work.

    One workaround would be to create two forms that are not nested. You would use hidden inputs for your original parent form that duplicate the inputs from your original nested form. Then use Javascript/DOM manipulation to hook the submit event on your "parent" form, copying the values from the "nested" form into the hidden inputs in the "parent" form before allowing the form to submit.

    Your form structure would look something like this (ignoring layout HTML):

    <form id="form1">
  <input name="val1"/>
  <input name="val2" type="hidden" />
  <input type="button" name="Submit Form 1 data including form 2" 
         onsubmit="return copyFromForm2Function()">
</form>
<form id="form2">
  <input name="val2"/>
  <input type="button" name="Submit Form 2 ONLY">
</form>
    0 讨论(0)
  • 醉酒成梦
    2020-12-06 04:29

    Here is the definitive working answer. I didn't need to create an extra parent DIV and name it id="place_here". Naming a table cell id="place_here" and making it the parent to DIV id="div_2" was enough. This is a brilliant little work around. Someone on another thread helped me with this.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
<title>test / crtp</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    position_mdiv()();
    $(window).resize(function() {
        position_mdiv();
    });
})

function position_mdiv(){

    var pos = $('#place_here').position();
    var width = $('#place_here').outerWidth();

    $('#div_2').css({
    position: "absolute",
    top: pos.top +2 + "px",
    left: (pos.left -300 + width) + "px"
});

}

</script>
<body>

<form id="CTRP_Form">
<table border="1">
<tr>
<td>
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type="text"><input type=submit></div>
</td>
<td id="place_here" style="background:yellow;width:300px;padding:0px;border:solid 2px #CCC"></td>
</tr>
</table>
</form>


<div id="div_2"><form id="query_Form"><input id="MyQuery" name="MyQuery" form="query_Form" type="text"><input type=submit></form></div>

</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题