Form doesn't accept all inputs rows in my form (input names missing(

Question

I have this code and I need to get the count of inputs that I put in inserting the rows and input text form. Please can anyone help me?

function myFunction() {
  var table = document.getElementById("mytable");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount - 1);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  cell1.innerHTML = table.rows[0].cells[0].innerHTML;
  cell2.innerHTML = table.rows[0].cells[1].innerHTML;
}

<table id="mytable">
  <form method="POST">
    <tr>
      <td>
        <input name="s1[]" type="text" />
      </td>
      <td>
        <input name="s2[]" type="text" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" name="submit" value="insert" />
      </td>
    </tr>
  </form>
</table>

<button onclick="myFunction()">more</button>

<?php if(isset($_POST[ 'submit']))
  {
    $count = count($_POST[ 's1']); 
    echo "<script>alert('".$count. "');</script>"; 
  } 
?>

When i click the button "more" the function Javascript insert a row to the table with input type= text but when i submit and click submit the row count of input text return all times 1 — nuddzz
– nuddzz, Commented Nov 10, 2015 at 20:54
Hi @nuddzz : I posted my answer. Please check it out. Thanks. :) — Nana Partykar
– Nana Partykar, Commented Nov 10, 2015 at 21:38

Community · Accepted Answer · 2017-05-23 11:59:23Z

1

A form is not allowed to be a child element of a table, tbody or tr.

You can have an entire table inside a form. You can have a form inside a table cell. You cannot have part of a table inside a form.

Use one form around the entire table. Then either use the clicked submit button to determine which row to process (to be quick) or process every row (allowing bulk updates).

Everything fine. Put your <form> & </form> outside table. <table></table> should be inside <form></form>

<form method="POST">
    <table id="mytable">
        <tr>
          <td>
            <input name="s1[]" type="text" />
          </td>
          <td>
            <input name="s2[]" type="text" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" name="submit" value="insert" />
          </td>
        </tr>
    </table>
</form>

For more info, check this

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Nov 10, 2015 at 21:35

Nana Partykar

10.5k10 gold badges50 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nuddzz Over a year ago

thank you dear Partykar it worked very well after i put <from> outside the table i really appreciate your help.

Nana Partykar Over a year ago

Hi @nuddzz: Glad to help :). If you think, my answer helped you, then please mark it as correct answer as other user's will find this answer easily. Thanks.

Nana Partykar Over a year ago

What happened @nuddzz , why u unanswered my answer.

Niranjan N Raju Over a year ago

oh... how are you now??

The fourth bird · Accepted Answer · 2015-11-09 19:15:22Z

0

Perhaps you should put the table inside the form:

<form method="POST">
    <table id="mytable">
        <tr>
            <td>
                <input name="s1[]" type="text" />
            </td>
            <td>
                <input name="s2[]" type="text" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" name="submit" value="insert" />
            </td>
        </tr>
    </table>
</form>

answered Nov 9, 2015 at 19:15

The fourth bird

165k16 gold badges61 silver badges75 bronze badges

3 Comments

nuddzz Over a year ago

I tried this and noth change, look when I add <tr> <td> <input type ="text" name="s1[ ]"..... Manually i works perfectly so iii think the prob is from Javascript because when i insert the row it doesn't appear with form

The fourth bird Over a year ago

So when you put the table inside the form, you click on "more" a few times and then you click "insert", the alert still returns 1?

The fourth bird Over a year ago

Does the page reload then you press "insert"? I've added this to the button to prevent that. <button onclick="myFunction(); return false;">more</button> Does that work for you?

Collectives™ on Stack Overflow

Form doesn't accept all inputs rows in my form (input names missing(

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related