0

I have researched code that does exactly what is required by my client. When choosing the number of boxes they are to send and submitting the result, the correct number of rows appears below. This is even better than I first wanted as the number of rows (boxes) can also be reduced if the wrong quantity is original submitted. This all works fine until..... This is to be added to within an existing form. When this code is submitted, the complete form is replaced by the rows ONLY, the existing form disappears. From investigating this problem, I get that you cannot put a form within a form. Can you please confirm this and if an alternative is possible, some help with the solution. Thanks in advance.

Boxes code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>Boxes</title>

<style id="boxes-css">
table>tr>td{width:60px;}
table>tr>td input{width:40px;}
#row1 {display: none; }
</style>

</head>
<body>
    Number of boxes<br>
    <input type="number" id="table-row-num" value="3">
    <button id="submit">Submit</button>
    
    <div id="table-gen">
        <!--<p>Table generated here after clicking submit</p>-->
        <table cellpadding="1" cellspacing="1" border="1">
          <tr id="row1">
            <td>Box 1</td>
            <td><input type="name" placeholder="Material..."></td>
            <td><input type="name" placeholder="Weight (kg)..."></td>
            <td><input type="name" placeholder="Size (HxWxD)..."></td>
          </tr>
        </table>
    </div>
<script>
$('button').on('click', generate);

    function generate(e) {
      var rows = $('#table-row-num').val();
      var html = '';
      for (var i = 0; i < rows; i++) {
        html += '<tr>' +
          '<td>' + (i + 1) + '</td>' +
          '<td><input type="name" placeholder="Material"></td>' +
          '<td><input type="name" placeholder="Weight (kg)..."></td>' +
          '<td><input type="name" placeholder="Size (HxWxD)..."></td>' +
          '</tr>';
      }
      $('table').html(html);
    }
</script>
</body>
</html>
Technical Graphics
  • 23
  • 4
  • Why do you ask about _"a form within a form"_ ([which is not allowed](https://html.spec.whatwg.org/multipage/forms.html#the-form-element:concept-element-content-model)) when there's no `
    ` at all in your question/example? o.O
     – Andreas Aug 09 '21 at 08:35
  • 1
    Does this answer your question? [Are nested forms valid in HTML5?](https://stackoverflow.com/questions/26536861/are-nested-forms-valid-in-html5) – Achtung Aug 09 '21 at 08:37
  • True, there is no
    tag, but both the coding above and the form it is going into have a 'Submit' button, hence I used the generalisation of 'form'.
     – Technical Graphics Aug 09 '21 at 13:12
  • Achtung - Your link certainly makes it clear what I am asking is not possible. Nested forms are 'supported' but not 'valid in HTML5. My problem is that I am adding this code to an already complex fom that was not created in HTML5, so even if it did work I would have to start from scratch. – Technical Graphics Aug 09 '21 at 15:38

0 Answers0