2

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="[email protected]" 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

Improve this question
1
  • is it submitting with normal form, without your jquery code of rendering multiple textbox? Commented Dec 20, 2017 at 10:06

4 Answers 4

Reset to default
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.

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

2 Comments

But how would that number increment? because the x is in the script. That would mean that I have to put the X in that field ON the submit of the form. that isnt possible right? because it would post the form and fill the field. so the field wouldnt be send with the post.
You can catch the event at almost any time, in your case you could do $(form).on('submit', function(){}) prevent the default submission, add the X field, increment and then send the request manually.
1

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

Improve this answer

Comments

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

Improve this answer

10 Comments

ye thanks for that. problem however, there isnt something in it becouse i didnt want to post my try and error code's, but thanks tho
what do you mean by that?
That this doesnt fix my problem. and i already have it in my version. i push all data out of alert() to debug. that is why i said thanks, becouse i know what you mean but already had it.
do a var_dump($_POST) and see if you have any results
ye thats a problem. i did that but it returns: See question i will add it now.
|
1

jQuery.ajax({ type: "POST",

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

});

Improve this answer

2 Comments

Please use commenting and explaining your answer.
Yes plz ill try this in a sec tho.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.