sending multiple values of same input field via ajax.

Published 1 month ago by Roshanay

The products are displayed. And there is an option of adding to the cart. When the user clicks on the button, it displays the quantity window. The user types the quantity and clicks on edit button. The issue previously was that only the data of first input field was going. So I changed the code and made the following ajax call:

$('.addd').click(function () {

    $('quantity').each(function(){
        var mydata = $(this).val();
        window.alert(mydata);
    });

    $.ajax({

        type: "get",
        url: "{{route('add')}}",
        data: mydata,
        cache: false,
        success: function (quantity) {
            console.log(quantity);
        }
    });
});

Now, the issue is that console shows that mydata is undefined variable. I think I am not putting the issue is with ('quantity'). I guess the issue is with html. Following is the html. Please let me know how to resolve this issue.

Quantity Add!
Cronix
Cronix
1 month ago (169,770 XP)

Your HTML isn't showing. Need to see what quantity HTML looks like.

Is quantity an ID, or class? You're not using either in your code so not sure how jquery is supposed to know what you're referring to.

$('quantity').each(function(){

quantity needs a '.quantity' if it's a class or '#quantity' if it's an ID. I'm assuming class since you're doing a $.each() and iterating. That's probably why it's coming up as undefined.

Also, is quantity a form input? If not, you should't use $.val() on it, since that only works for form controls to get the value property from it. You probably need to use $.text() or $.html() if it's a regular html tag and not a form input.

Roshanay
Quantity Add!
Cronix
Cronix
1 month ago (169,770 XP)

That's text.

<div class="quantity">Quantity Add!</div>

is html.

Roshanay

I don't know what the issue is but the html code is not displaying.

In the first div, there's id="{{ $quantityy }}" then the input has id="quantityid" and name="quantity" and then submit button has class="addd" (the function call) and divAdd="{{$addd}}

Cronix
Cronix
1 month ago (169,770 XP)

To show the code, use 3 backticks (```) before the code on its own line. Then your code. Then 3 more backticks on its own line.

Roshanay
 <div id="{{ $quantityy }}" style="display: none;">
            <label for="quantity" >Quantity</label>
            <input type="number" id="quantityid" name="quantity">
            <button class="addd" divAdd="{{$addd}}">Add!</button>
        </div> ``` 
Cronix
Cronix
1 month ago (169,770 XP)
<input type="number" id="quantityid" name="quantity">

You're setting the name to quantity, and then trying to access it like $('quantity'). You can't do that. It's easier to add a class name instead of using a name, otherwise you'd need to access it like $('input[name="quantity"]')

https://api.jquery.com/attribute-equals-selector/

Roshanay
$('.addd').click(function () {

       $('input[name="quantity"]').each(function(){
           var mydata = $(this).val();
       });

       $.ajax({

           type: "get",
           url: "{{route('add')}}",
           data: mydata,
           cache: false,
           success: function (quantity) {
               console.log(quantity);
           }
       });
   });

Still same error of mydata being undefined.

Cronix
Cronix
1 month ago (169,770 XP)
<div id="{{ $quantityy }}" style="display: none;">
    <label for="quantity" >Quantity</label>
    // use classname instead of id. ID needs to be unique (one per page)
    <input type="number" class="quantityid" name="quantity">
    <button class="addd" divAdd="{{$addd}}">Add!</button>
</div>
$('.addd').click(function(e) {
    e.preventDefault();  // prevent normal click function

    // get the quantity value for each input
    $('.quantityid').each(function(e) {
        console.log($(this).val());
    });
});

Try this and check in your browser console. You should see each quantity printed out.

Cronix
Cronix
1 month ago (169,770 XP)

Also, mydata is defined within a closure, so it's only available from within the closure. Define mydata in the global scope.

var mydata;

$('input[name="quantity"]').each(function(){
    mydata = $(this).val();
});

https://www.w3schools.com/js/js_function_closures.asp

Roshanay
$('.addd').click(function(e) {
    e.preventDefault();  // prevent normal click function

    // get the quantity value for each input
    $('.quantityid').each(function(e) {
        console.log($(this).val();
    });
});

should I replace my function with this?

Cronix
Cronix
1 month ago (169,770 XP)

should I replace my function with this?

Yes, as well as the HTML I posted.... just for testing.

Roshanay
$('.addd').click(function () {

        var mydata;


        $('input[name="quantity"]').each(function(){
            mydata = $(this).val();
           // window.alert(mydata);
        });

        $.ajax({

            type: "get",
            url: "{{route('add')}}",
            data: mydata,
           //data: {quantity: $('#quantityid').val()},
            cache: false,
            success: function (quantity) {
                console.log(quantity);
            }
        });
    });

This?

Roshanay

Using your function and html, the values are fine. Like each time I click on add on different input fields, the values are fine, however, they are being repeated.

Like for example, if I add 1 in the first row and 3 in the second. When I click on 3rd row and write 5, then all 1, 3, and 5 are added again. Do you understand?

Cronix
Cronix
1 month ago (169,770 XP)

Yes, that's what it's supposed to do. I'm going by your code here:

$('quantity').each(function(){
        var mydata = $(this).val();
        window.alert(mydata);
    });

That's saying 'get every quantity on the page and assign it to mydata'. If that's not what you're wanting to do then describe what you're trying to do. I'm going by your original code and trying to fix the numerous mistakes.

Are you trying to only get the quantity within the same div that the Add button was clicked? Are you trying to add together all quantities? What's it supposed to do?

Please sign in or create an account to participate in this conversation.