AJAX post trough Jquery to PHP

Question

Hi im trying to post some values with jquery to use them in PHP, problem howwever is that I cant get it to work.

Here's my code:

 <script type="text/javascript">
        $(document).ready(function() {
            var max_fields      = 100; //maximum input boxes allowed
            var wrapper         = $(".input_fields_wrap"); //Fields wrapper
            var add_button      = $(".add_field_button"); //Add button ID
            var buttonpressed = $(".Totalform"); //Add button ID

            var x = 1; //initlal text box count

            //first one needs the code to so here.
            var arrayFromPHP = <?php echo json_encode($a); ?>;
            $("#country" + x).select2({
                data: arrayFromPHP
            });

            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();

                if(x < max_fields){ //max input box allowed
                    x++; //text box increment

                    $(wrapper).append('' +
                        '<div>' +
                        '<select id="country'+ x +'" style="width:300px;" value="Selecteer uw artikel">' +
                        '</select>' +
                        '<a href="#" class="remove_field">Remove</a>' +
                        '</div>' +
                        '<div><input type="number" name="quantity'+ x +'" min="1" max="10"><a href="#" class="remove_field">Remove</a></div>'
                    );
                    //same code as above becouse need to apply this to the list again.
                    $("#country" + x).select2({
                        data: arrayFromPHP
                    });
                }

            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            });
        });

            // THIS PART IS POST
            $(buttonpressed).click(function(e){ //on add input button click
                e.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "submitsubform.php",
                    data: {teller: x},
                    success: function () {
                    }
                });
            });

    </script>

I put a comment in the code at my Post part. also I have this code in HTML:

<form method="post">
        Bedreifsnaam:<br>
        <input type="text" id="Bedrijfsnaam" name="Bedrijfsnaam" value="Autobanden.nl" disabled><br>
        Email:<br>
        <input type="text" name="lastname" value="voorbeeld@mail.com" disabled><br>
        product:<br>
        <div class="input_fields_wrap">
            <!-- This is the button I count X on. -->
            <button name="counterknop" value="Add item" class="add_field_button">Add product</button>
            <div>
                <select id="country1" style="width:300px;">
                    <!-- Dropdown List Option -->
                </select>
            </div>
            <div><input type="number" name="quantity1" min="1" max="10"></div>
        </div>
        <br><br>
        <input type="submit" id="Totalform" name="Totalform" value="Submit">
    </form>

So theoretically I want On click of button to do x++ and this works. then send it trough POST to my PHP file and put the value in an PHP variable there:

// This is in the index.php file like the Script and HTML
if(isset($_POST['Totalform']))
{
    include 'submitsubform.php';       
    echo 'test';
}

// This is in submitsubform.php
<?php
$var = $_POST['teller'];
echo $var;

So at this point I tried a lot of debugging but cant seem to find the problem the only error I get back from all this code is this:

Notice: Undefined index: teller in C:\\xampp\\htdocs\\OIA\\submitsubform.php on line 3

So when I try to click the button multiple times to increment x, and after that submit the form. It doesnt do anything. It just gives the above error.

After like 2 or 3 hours I thought I would post this here maybe someone sees something I dont see.

thanks in advance and happy coding!

ADDITION 1 :

When I do a var dump of the posted form, it doesnt see the dropdown menu or the 2 normal text fields. It only sees the "aantal" (the number fields)

array(3) { ["quantity1"]=> string(1) "3" ["quantity2"]=> string(1) "1" ["Totalform"]=> string(6) "Submit" }

EDIT:

was a brainfart from my end. i disabled the 2 text fields. however, it still doesnt see the select box as an field so it doest post that with it

Answer 1

Your ajax success function is empty

success: function () {}

so you don't return anything from the ajaxed page you need to change your php and js to return the result

try alerting the result of the ajax

success: function (data) {
 alert(data);
}

if the page is redirecting after the click on the submit button then you aren't doing ajax

Answer 2

This happens simply because you run two requests. One ajax with the post, and another post which is the html submit action. So the html submit action never gets the teller variable. You can just insert the teller variable as a hidden input and do not do ajax request at all.

Answer 3

I think you can't get the x variable. It is not a global variable.

the X variable still on $(document).ready(function(){}) tag

try to remove that tag or put your $(buttonpressed).click(function(e){}); tag inside $(document).ready(function(){})

hope that it is help

Answer 4

jQuery.ajax({ type: "POST",

 data: { "teller" : x},
 success: function () {
 }

});