Retrieve values from dynamically added selects using Jquery in PHP
Question
I wanted to chain 3 selects and I got it working using this code. http://jsfiddle.net/FJFFJ/1/
<div id="filter">
<a id="clone" href="#">+</a> <a id="remove" href="#">-</a>
</div>
<div id="template">
<select class="pais">
<option value="1">Argentina</option>
<option value="2">Chile</option>
</select>
<select class="provincia">
<option value="1" class="1">San Juan</option>
<option value="2" class="1">Mendoza</option>
<option value="3" class="2">La Serena</option>
<option value="4" class="2">Santiago</option>
</select>
<select class="ciudad">
<option value="1" class="1">Rawson</option>
<option value="2" class="2">Godoy Cruz</option>
<option value="3" class="3">Coquimbo</option>
<option value="4" class="4">Chiñihue</option>
</select>
</div>
The issue I now have is, how do I fetch the selected values from each dropdown in PHP? For example, the above creates 3 select boxes when the page is opened. When I click on "+" button and add more rows of selects, how do I fetch the values from all selects which were added dynamically?
this is what I did now? but still doesnt work.
<?php
if(isset($_POST['submit'])){
foreach($_POST['semester'] as $sem){
echo $sem;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://www.appelsiini.net/download/jquery.chained.mini.js"></script>
<style type='text/css'>
#template{
display:none;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
// Form element cloning
var i = 0;
$('#clone').click(function() {
$('#template').clone().appendTo('#filter');
$('#filter #template').attr('id', 'duplicate' + i);
$('#filter div:hidden').show();
chainItWithId(i);
i++;
});
$('#remove').click(function() {
$('#filter > div').last().remove();
});
$('#clone').click();
});
function chainItWithId(id) {
$('#duplicate' + id + ' .department').chained('#duplicate' + id + ' .semester');
$('#duplicate' + id + ' .subject').chained('#duplicate' + id + ' .department');
}
function chainTemp() {
$('#template .department').chained('#template .semester');
$('#template .subject').chained('#template .department');
}
});//]]>
</script>
</head>
<body>
<div id="filter">
<a id="clone" href="#">+</a> <a id="remove" href="#">-</a>
</div>
<form name="request" action="<?php $_SERVER['PHP_SELF']?>" method="post">
<div id="template">
<select class="semester" name="semester[]">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="department" name="department[]">
<option value="EEE" class="1">EEE</option>
<option value="ECE" class="1">ECE</option>
<option value="MECH" class="2">MECH</option>
<option value="CSE" class="2">CSE</option>
</select>
<select class="subject">
<option value="1" class="EEE ECE">S1</option>
<option value="2" class="ECE">S2</option>
<option value="3" class="MECH">S3</option>
<option value="4" class="CSE">S4</option>
<option value="5" class="MECH">S5</option>
<option value="6" class="CSE EEE">S6</option>
</select>
</div>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
2 answers
solution1
0 2013-08-26 09:47:42
add an id to your select box, for instance changes in html:
<select class="provincia" id="provincia" name="provincia">
<option value="1" class="1">San Juan</option>
<option value="2" class="1">Mendoza</option>
<option value="3" class="2">La Serena</option>
<option value="4" class="2">Santiago</option>
</select>
get selected value using jquery
var first = $("#provincia option:selected").text();
var second = $("#pais option:selected").text();
var third = $("#ciudad option:selected").text();
send those values to ajax call.now you can get in php.
if you dont know the id values then do it by serialize the form data using jquery serialize and it to php by using jax call.
example
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $(this).serialize() );
});
solution2
0 2013-08-26 09:53:11
1) You should wrap it all in tag. Use method='post' or method='get' and action='path/to/php_script.php' attributes of
2) You should use name attributes for your selects like
<select name="ciudad" class="ciudad">
3) Add subbmit button inside 4) After submiting in php_script.php you can use $_GET['select_name'] or $_POST['select_name'] arrays (depend on form method) to get a list selected value
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.