Saving value from html input > date using ajax

Question

I'm trying to save date using html input = date and ajax. but it didn't save.

html code:

<td class="dtreq"><input type="text" class="dtreq" name="dtreq" id="dtreq"></td>

Ajax:

$('#save').click(function(){
var dtreq = [];

$('.dtreq').each(function(){
    dtreq.push($(this).val());
    });

    $.ajax({
      url:"insert_punchlist_form.php",
      method:"POST",
      data:{dtreq:dtreq},
      success:function(data){
        alert(data);
        $("td[contentEditable='true']").text("");
        $('select').prop('selectedIndex',0);
        for(var i=2; i<= count; i++){
          $('tr#'+i+'').remove();
        }
      }
    });
});

dtreq is a same class for td and input ?? .. Also id should be unique don't use the same id for more than one element — Mohamed-Yousef
– Mohamed-Yousef, Commented May 18, 2019 at 2:16
if you removed the class from input you need to use $(this).find('input').val() because td doesn't have value — Mohamed-Yousef
– Mohamed-Yousef, Commented May 18, 2019 at 4:04
Possible duplicate of jQuery - Getting form values for ajax POST — miken32
– miken32, Commented May 18, 2019 at 4:16

Behrouz Goudarzi · Accepted Answer · 2019-05-18 05:31:21Z

2

$('#save').click(function(){
var dtreq = [];

$('input.dtreq').each(function(){

    dtreq.push($(this).val());
    });
    
    console.log(dtreq);
    $.ajax({
      url:"insert_punchlist_form.php",
      method:"POST",
      data:{dtreq:dtreq},
      success:function(data){
        alert(data);
        $("td[contentEditable='true']").text("");
        $('select').prop('selectedIndex',0);
        for(var i=2; i<= count; i++){
          $('tr#'+i+'').remove();
        }
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="dtreq"><input type="text" class="dtreq" name="dtreq" id="dtreq"></td>
<td class="dtreq"><input type="text" class="dtreq" name="test1" id="test1"></td>
<td class="dtreq"><input type="text" class="dtreq" name="test2" id="test2"></td>
<button id="save">Save</button>

answered May 18, 2019 at 5:31

Behrouz Goudarzi

714 bronze badges

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

1 Comment

Carsten Massmann Over a year ago

Good point, the selector 'input.dtreq'! The importance of this could not be demonstrated in @RonakChauhan's answer, because the html is faulty: the <td>s are floating around without being in a proper table. Maybe you can fix this in your answer?

Konstantinos A · Accepted Answer · 2019-05-18 04:52:25Z

0

data : { "dtrec" : dtrec } the key in the data JSON object should be quoted or else it is parsed as a variable and of course the variable dtrec of the value part of data JSON object should be serialized as valid json

answered May 18, 2019 at 4:52

Konstantinos A

1262 silver badges6 bronze badges

Comments

Ronak Chauhan · Accepted Answer · 2019-05-18 04:59:15Z

Hello I have modified your code please check.

$('#save').click(function(){
var dtreq = [];

$('.dtreq').each(function(){
    console.log($(this).val());
    dtreq.push($(this).val());
    });

    $.ajax({
      url:"insert_punchlist_form.php",
      method:"POST",
      data:{dtreq:dtreq},
      success:function(data){
        alert(data);
        $("td[contentEditable='true']").text("");
        $('select').prop('selectedIndex',0);
        for(var i=2; i<= count; i++){
          $('tr#'+i+'').remove();
        }
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="dtreq"><input type="text" class="dtreq" name="dtreq" id="dtreq"></td>

<button id="save">Save</button>

Collectives™ on Stack Overflow

Saving value from html input > date using ajax

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related