0

I have working on my project where I created table with multiple rows. Now I want to submit elements from table row where user enter their information but not entire from. So I was wondering what is the best way to pass all the element from that table row to hidden from that way I can submit just information from that specific row. Here is my code:

<form name='slotsPtc' id='slotsPtc' method='POST'>
   <table>
     <tbody>
       <tr>
          <td>Slot_Label</td>
          <td><span>
              <input type='text' name='EMAIL' value='' class="email"/>
              <input type='button' name='slot' value='Save' onClick='saveSlot(this)'></span>
              <input type='hidden' value='userID'/>
              <input type='hidden' value='dateSignUp'/>
          </td>
       </tr>
    </tbody>
  </table>
</form>

function saveSlot(btn){
   //Here I want to submit my form with information entered in table row.
}

Should I pass information to my function after onClick event and then create dynamically form and pass all information? Or there is some better way to do this?

2
  • you can use Ajax to send your information as a json to the server without creating a new form Apr 1, 2016 at 16:34
  • A regular submit will submit all inputs inside your <form> but you can do a custom submit with jQuery with a custom data member.
    – PinkTurtle
    Apr 1, 2016 at 16:35

3 Answers 3

2

My proposal is:

function saveSlot(btn){
  var frm = document.getElementById('slotsPtc');
  // disable the button until the form is successfully submitted or on failure
  // this to avoid to submit while submitting the same data
  btn.disabled = true;
  $.ajax({
    url: frm.action,
    type: frm.method,
    data: $(btn).parent('tr').find(':input').serialize(),
    success: function(result) {
      // enable again the button
      btn.disabled = false;
      // form submitted with success
    },
    error: function(jqXHR, textStatus, errorThrown ) {
      // enable again the button in any case
      btn.disabled = false;
      // form submitted with failure
    }
  });
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<form name='slotsPtc' id='slotsPtc' method='POST'>
    <table>
        <tbody>
        <tr>
            <td>Slot_Label</td>
            <td><span>
              <input type='text' name='EMAIL' value='' class="email"/>
              <input type='button' name='slot' value='Save' onClick='saveSlot(this)'></span>
                <input type='hidden' value='userID'/>
                <input type='hidden' value='dateSignUp'/>
            </td>
        </tr>
        <tr>
            <td>Slot_Label1</td>
            <td><span>
              <input type='text' name='EMAIL1' value='' class="email"/>
              <input type='button' name='slot1' value='Save' onClick='saveSlot(this)'></span>
                <input type='hidden' value='userID1'/>
                <input type='hidden' value='dateSignUp1'/>
            </td>
        </tr>
        </tbody>
    </table>
</form>

1
  • I tried this code and for some reason my form is empty after I submit the form. I'm not sure why. Apr 1, 2016 at 17:48
1

My recommendation would be to do something like this, then POST your form data found via the selector:

$('#save').click(function(){
    console.log($(this).parents('tr').find('td input'));
});

Example (check your console for the object from the selector):

https://jsfiddle.net/yLk07esz/

1

So instead of using this:

data: $(btn).parent('tr').find(':input').serialize()

I had to use this:

data:$j(btn).closest('td').find(':input').serialize()

For some reason when I used first line of code my form was empty after I submitted. Then I switched and used closest('td').find(':input') and that gave me correct input fields with valid values.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.