CODEWITHSUNDEEP
jqueryajax
alaa nabawy
alaa nabawy

Reputation: 65

Get value of every input separately jQuery

I have created a jQuery code to make an AJAX request with the values of html inputs

This is jQuery code: 

$(document).on('change keyup', '#quantityNumbeInvoiceItem, #itemDiscountInvoice', function() {
    var quantity  = $(this).parent('td').find('#quantityNumbeInvoiceItem'),
        discount  = $(this).parent('td').find('#itemDiscountInvoice'),
        item_name = $(this).parent('td').parent('tr').find( '#itemNameJsAjax span' ).text(),
        ajaxUrl   =  'requests/Ajax/item_full_amount.php?item_name=' + item_name + '&quantity=' + quantity + '&discount=' + discount,
        itemContainer = $(this).parent('td').parent('tr').find( '#fullAmountForItemJsAjax' );

    $.ajax({
        url: ajaxUrl,
        type: 'GET',
    })
    .done(function(res) {
        itemContainer.html( res );
    })
    .fail(function() {
        console.log("error");
    })
});

And this is HTML:

<tbody>
    <tr>
        <td style="width: 94px;">
            <img src="layouts/images/items/368988_2.jpeg" alt="gypsoid" title="gypsoid" style="width:94px;height: 70px;">   
        </td>
        <td id="itemNameJsAjax" style="position: relative;">
            <span>gypsoid</span>
        </td>
        <td>
            <input data-class=".quantityNumbeInvoiceItem" class="quantityNumbeInvoiceItems" id="quantityNumbeInvoiceItem" value="1" min="1" max="2" name="invoiceItemAmount" type="number" />
            <div class="availableQuantityInvoiceItem" style="margin:10px 0;">Available: 2 </div>
        </td>
        <td>
            <input id="itemDiscountInvoice" name="itemDiscountInvoice" value="0$" type="text">
        </td>
        <td id="fullAmountForItemJsAjax">$20</td>
        <td style="border:0;">
            <i id="removeLineSalesInvoices" style="color: #f00;font-weight: 900;border-radius: 50%;border: 1px solid #f00;padding: 3px;cursor: pointer;" class="ti-close"></i>
        </td>
    </tr>
</tbody>

When I change the value of quantity the value of discount become undefined and the same for discount.

If any one has a method to solve that I will be thankful.

Upvotes: 1

Views: 46

Answers (1)

Pedram
Pedram

Reputation: 16575

You have several mistake in your code, for example when you use #quantityNumbeInvoiceItem as selector, #itemDiscountInvoice is not parent of this element, or etc. Also you forgot to get val() of input elements. so, now you can get all variable.

$(document).on('change keyup', '#quantityNumbeInvoiceItem, #itemDiscountInvoice', function() {

  var quantity = $('#quantityNumbeInvoiceItem').val(),
    discount = $('#itemDiscountInvoice').val(),
    item_name = $('#itemNameJsAjax').find('span').text(),
    ajaxUrl = 'requests/Ajax/item_full_amount.php?item_name=' + item_name + '&quantity=' + quantity + '&discount=' + discount,
    itemContainer = $('#fullAmountForItemJsAjax').text();

  console.log('itemContainer: ' + itemContainer);
  console.log('item_name: ' + item_name);
  console.log('discount: ' + discount);
  console.log('quantity: ' + quantity);


  /* $.ajax({
       url: ajaxUrl,
       type: 'GET',
     })
     .done(function(res) {
       itemContainer.html(res);
     })
     .fail(function() {
       console.log("error");
     })*/


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="itemNameJsAjax" style="position: relative;">
      <span>gypsoid</span>
    </td>
  </tr>

  <tr>
    <td><input data-class=".quantityNumbeInvoiceItem" class="quantityNumbeInvoiceItems" id="quantityNumbeInvoiceItem" value="1" min="1" max="2" name="invoiceItemAmount" type="number">
      <div class="availableQuantityInvoiceItem" style="margin:10px 0;">Available: 2 </div>
    </td>
  </tr>

  <tr>
    <td><input id="itemDiscountInvoice" name="itemDiscountInvoice" value="0$" type="text"> </td>
    <td id="fullAmountForItemJsAjax">$20</td>
    <td style="border:0;"><i id="removeLineSalesInvoices" style="color: #f00;font-weight: 900;border-radius: 50%;border: 1px solid #f00;padding: 3px;cursor: pointer;" class="ti-close"></i></td>
  </tr>
</table>

Upvotes: 1

Related Questions