How do I pass value from Jquery to PHP ? HTML is a hidden input form field

Question

I have a form:

<form action="post.php" method="POST">
 <p class="select1">Northern Cape</p>
 <p class="select1">Eastern Cape</p>

 <p class="select2" >New Goods</p>
 <p class="select2" >Used Goods</p>

<input id="submt" type="submit" name="submit" value="Submit">
</form>

JQUERY .... appends input/value to the selected items:

$(document).ready(function() {
    $('.select1').click(function() {    
      if ($(this).text() == "Northern Cape"){
          $(this).append("<input id='firstloc' type='hidden' name='province' 
          value='Northern Cape' />");
          $("#firstloc").val('Northern Cape');
     }; // end of if statement

      if ($(this).text() == "Eastern Cape"){
          $(this).append("<input id='firstloc' type='hidden' name='province' 
          value='Eastern Cape' />");
          $("#firstloc").val('Eastern Cape');
     }; // end of if statement
}); // end of click function
}); // end of document ready

 $(document).ready(function() {
    $('.select2').click(function() {
        if ($(this).text() == "New Goods"){
            $(this).append("<input id='category' type='hidden' name='cat' 
            value='New Goods' />");
            $(this).val('New Goods');
         };

        if ($(this).text() == "Used Goods"){
            $(this).append("<input id='category' type='hidden' name='cat' 
            value='Used Goods' />");
            $("#category").val('Used Goods');
         };

});
});

How do I pass the values to PHP ie. first value Province second value Category?

<?php

$province = $_POST['province'];
$category = $_POST['cat'];
echo $province;
echo $category;
?>

I get a message Undefined index:cat when passing to PHP. User must select 2 items and values must be passed to PHP,I do not want to use a drop down menu with "options"

after selecting a value try to see the source to check if the input field is added or not in the html page — Exprator
– Exprator, Commented Jul 4, 2017 at 6:57
The html appears in the developers console but both values are not being passed, only one value gets passed — ticktock
– ticktock, Commented Jul 4, 2017 at 7:00

Nirav Joshi · Accepted Answer · 2017-07-04 07:10:05Z

Here is the solution.

You made a several mistakes in your code.

You are using ; after if statement
You didnot close $document.ready tag properly
You have to check in your post.php if data posted or not
And you only appends input type hidden you weren't remove it.

post.php

<?php
$province = '';
$category = '';
if(isset($_POST['province'])):
    $province = $_POST['province'];
endif;
if(isset($_POST['cat'])):
    $category = $_POST['cat'];
endif;
echo $province;
echo $category;
?>

$(document).ready(function() {
    $('.select1').click(function() {    
    if ($(this).text() == "Northern Cape"){
      $("#firstloc").remove();	
      $(this).append("<input id='firstloc' type='hidden' name='province' value='Northern Cape' />");
    } // end of if statement

    if ($(this).text() == "Eastern Cape"){
      $("#firstloc").remove();	
      $(this).append("<input id='firstloc' type='hidden' name='province' value='Eastern Cape' />");
    } // end of if statement
  });
  $('.select2').click(function() {
    if ($(this).text() == "New Goods"){
      $("#category").remove();
      $(this).append("<input id='category' type='hidden' name='cat' value='New Goods' />");
    }
    if ($(this).text() == "Used Goods"){
      $("#category").remove();
      $(this).append("<input id='category' type='hidden' name='cat' value='Used Goods' />");
    }
  }); // end of click function
}); // end of document ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<form action="post.php" method="POST">
   <p class="select1">Northern Cape</p>
   <p class="select1">Eastern Cape</p>
   <p class="select2" >New Goods</p>
   <p class="select2" >Used Goods</p>
   <input id="submt" type="submit" name="submit" value="Submit">
</form>
</html>

Try this code hope it will helps you.

Alexander Higgins · Accepted Answer · 2017-07-04 07:09:20Z

1

PHP does not set $_POST for all post operations, for example for text/xml:

Try adding adding application/x-www-form-urlencoded or multipart/form-data to your form just to make sure.

<form action="post.php" method="POST" enctype="multipart/form-data">

Also make sure you don't have broken HTML that is causing your form tag to be close prematurely. Verify what is getting posted and the content type using web developer tools.

You should also be using isset to check the existence of a variable:

if (isset($_POST["cat"])) {
    $cat = $_POST["cat"];
    echo $cat;
    echo " is the category";
} 
else 
{
    $cat = null;
    echo "no category supplied";
}

edited Jul 4, 2017 at 7:09

answered Jul 4, 2017 at 7:04

Alexander Higgins

6,9361 gold badge30 silver badges45 bronze badges

1 Comment

ticktock Over a year ago

Thanks ,that did it. So much thinking and a person misses the small things

Collectives™ on Stack Overflow

How do I pass value from Jquery to PHP ? HTML is a hidden input form field

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related