How to capture the input element using foreach

Question

I am trying to send records of my table as form using javascript. I have tried using method below.

I know my foreach function is not capturing the tag. How do I solve it so i can send to php and receive as POST['SHOWTITLE']

<tbody>
  <tr id="0">
    <td class="d-none">
      <input type="text" class="form-control transparent-input" name="1" value="1">
    </td>
    <td>
      <input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" disabled="">
    </td>
  </tr>
  <tr>
  <td>
    <button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
  </td>
  </tr>
</tbody>

function submitRowAsForm(id) {
  form=document.createElement('form');
  form.method='POST';
  form.action='orderTicket.php';

  $("#"+id+" td").children().each(function() {
    $(this).clone().appendTo(form);
  });

  document.body.appendChild(form);
  form.submit();
}

`` after `` please write your code well and explain what are you trying to do .. and why you not just take a values from inputs without create a form?? — Mohamed-Yousef, Dec 26 '18 at 06:24
you are using id as "0" in html but accessing it as "0 td" in jquery — Sahil Raj Thapa, Dec 26 '18 at 06:25
@Mohamed-Yousef I was trying to follow Nisse Engström example => https://stackoverflow.com/questions/4035966/create-a-html-table-where-each-tr-is-a-form/15600151#15600151 ... my table is created via ajax and javascript. So i need to create button for each row and when clicked submit the one row as a form — KIRPAL SINGH, Dec 26 '18 at 06:28
@SRThapa There is space in between. It is $(#0 td) .. its same like $(#0 > td) — KIRPAL SINGH, Dec 26 '18 at 06:30
is it possible for you to create a HTML `
` inside `` with `` so that you don't need to write any javascript to post the form — Shailesh Rathod, Dec 26 '18 at 06:31
@ShaileshRathod I tried earlier and read somewhere we cannot create form inside table — KIRPAL SINGH, Dec 26 '18 at 06:32
In that case you can write `table` inside `form`, this will require some CSS based on your UI. so there are multiple form in your page with submit button on each form, let me know if that's help you, so I'll write full example code here. — Shailesh Rathod, Dec 26 '18 at 06:35
@ShaileshRathod Yes, that will help me. Let me explain briefly. Every row has one additional column for button. Upon button press send all columns in the row as form to desired page. Its same like my code above — KIRPAL SINGH, Dec 26 '18 at 06:40
My javascript is working. You dont need to create table for me. My problem is getting the values from each input element in the same row and pass it my form. Thats why in my code i have foreach. I follow the example above from link. But its not working — KIRPAL SINGH, Dec 26 '18 at 06:41
Issue solved. I knew i had to iterate the child element but was doing it wrong. I have posted my answer below for others who want to learn — KIRPAL SINGH, Dec 26 '18 at 06:51

score 0 · Answer 1 · answered Dec 26 '18 at 06:37

Please try this i.e. remove disabled="" to readonly. If an element is disabled, its value is not sent to the server. So, the correct code is as below:

<tbody>
  <tr id="0">
    <td class="d-none">
      <input type="text" class="form-control transparent-input" name="1" value="1">
    </td>
    <td>
      <input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
    </td>
  </tr>
  <td>
    <button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
  </td>
</tbody>

function submitRowAsForm(id) {
  form=document.createElement('form');
  form.method='POST';
  form.action='orderTicket.php';

  $("#"+id+" td").children().each(function() {
    $(this).clone().appendTo(form);
  });

  document.body.appendChild(form);
  form.submit();
}

score 0 · Accepted Answer · answered Dec 26 '18 at 06:40

0

You could iterate all input tags like this:

function submitRowAsForm(id) {
  form=document.createElement('form');
  form.method='POST';
  form.action='orderTicket.php';

  $("tbody input[type=text]").each(function() {
    $(this).clone().appendTo(form);
  });

  document.body.appendChild(form);
  form.submit();
}

answered Dec 26 '18 at 06:40

McBern

549
1
4
8

thanks ... I actually solved it by doing the same thing but slightly different implementation. I have posted my answer below – KIRPAL SINGH Dec 26 '18 at 06:52

score 0 · Answer 3 · answered Dec 26 '18 at 06:49

function submitRowAsForm(id) {
    form=document.createElement('form');
    form.method='POST';
    form.action='orderTicket.php';

    $("#"+id).children().each(function() {
      $(this).children().each(function(){
          $(this).clone().appendTo(form);
      });

    });
    document.body.appendChild(form);
    form.submit();

}

score 0 · Answer 4 · answered Dec 26 '18 at 06:50

This html is not require any javascript to submit the form and yes you need to write CSS to make those inner DIV inline that can be easily achieve using CSS flex and please keep in mind this is only for one row, you have to iterator the whole html to create another row.

<div>
    <form action="orderTicket.php" method="POST">
        <div>
            <input type="text" class="form-control transparent-input" name="1" value="1">
        </div>
        <div>
            <input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
        </div>
        <div>
            <button type="submit" class="btn btn-outline-success">Room</button>
        </div>
    </form>
</div>

How to capture the input element using foreach

4 Answers4