I am passing variable from jquery to php, and trying to submit my form through submit button also, but my variable is not visible in $_POST['submit'].
I have an html page with a list where I am choosing more than one value and concatenating it with ':' and passing it to PHP. once I press the submit button on the form I want to insert that selected list in my database table.
Please, can someone explain. HTML
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="new_page.php" method="post">
<select class= "sweet" name="sweets" multiple="multiple">
<option>Chocolate</option>
<option >Candy</option>
<option>Taffy</option>
<option>Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<input type="submit" name ="submit" value ="submit" />
<script>
$(function(){
var s_type="";
$('.sweet').click(function() {
if(s_type.length){
s_type+= " : " + $(this).val();
}else{
s_type+= $(this).val();
}
$.post('new_page.php', 'sweet=' +s_type, function (response){
alert(response);
});
});
});
</script>
</body>
</html>`
PHP Page new_page.php
<?php
if(isset($_POST['sweet'])){
$filename = $_POST['sweet'];
}
if(isset($_POST['submit'])) {
if(isset($_POST['sweet'])){
$filename = $_POST['sweet'];
echo '*****profile ' .$filename;
}
$id= 'A';
$db = new PDO("sqlite:test.db");
$q1 = $db->prepare('INSERT INTO test_sweet(id,sweets) values(?,?)');
$q1->execute(array($id,$filename));
}
?>
Edit: I'll add this remark here aswell: If you want multiple values from your <select> change it into <select multiple> and you're done, this JS is a rather unintuitive workaround. (Even moreso since you can't easily remove values you selected without reloading the whole page)
Might give this a try, mind you it's drycoded (untested):
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form id="sweetForm">
<select id="selSweets" name="sweets" multiple="multiple">
<option>Chocolate</option>
<option >Candy</option>
<option>Taffy</option>
<option>Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<input id="submit" type="submit" name="submit" value="submit" />
</form>
<script>
$(function() {
var sweets = [];
$('#selSweets').change(function() {
var val = $(this).val();
if (sweets.indexOf(val) == -1) // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Browser_compatibility for browser compatibility on indexOf()
sweets.push(val);
});
$("#sweetForm").submit(function(e)
{
$.post(
'new_page.php',
{
sweets: sweets
},
function(data, status, jqXHR)
{
console.log(data);
}
);
e.preventDefault();
});
});
</script>
</body>
</html>