This is my view file code
<?php for($i=0; $i<4; $i++) { ?>
<div class="box22">
<div class="mcm">
<input type="text" placeholder="Myself" id="coworkers" name="coworkers[]" />
<span class="bar"></span>
</div>
<div class="select2">
<select id="category_<?php echo $i; ?>" name="category[]" class="chosen-select ref-sel1" multiple >
<?php
foreach($genre as $gen){
echo '<option value='.$gen->genre_id.'>'.$gen->genre_name.'</option>';
}
?>
</select>
</div>
</div>
<?php } ?>
my script : when i chose one or more from option, it does not comes into script. How to get multiple values under loop
$(document).ready(function()
{
$('form#shortfilm').submit(function(e)
{
e.preventDefault();
var form = $(this);
var foo = [];
$('#category :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
});
});
change text to val()
$('option:selected').each(function(i, selected){
foo.push($(selected).val());
});
or:
var foo = [];
$('.box22').each(function(x,v){
var temp =[]
$(v).find('option:selected').each(function(i, selected){
temp.push($(selected).val());
});
foo.push(temp)
});
see demo for the second option here
Please run this sample code. This may help you
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form id="shortfilm" name="data">
<?php $genre=array(1=>'AAAAAAAAAAAAAA',2=>'BBBBBBBBBBBBBBB',3=>'CCCCCCCCC',4=>'DDDDDDDDDDDDDD',5=>'EEEEEEEEEEEEEEE');
for($i=0; $i<4; $i++) { ?>
<div class="box22">
<div class="mcm">
<input type="text" placeholder="Myself" id="coworkers" name="coworkers<?php echo$i?>[]" />
<span class="bar"></span>
</div>
<div class="select2">
<select class="category" name="category<?php echo$i?>[]" class="chosen-select ref-sel1" multiple >
<?php
foreach($genre as $key => $gen){
echo '<option value='.$key.'>'.$gen.'</option>';
}
?>
</select>
</div>
</div>
<?php } ?>
<input type="submit" value="submit" />
</form>
<script>
$(document).ready(function()
{
$('form#shortfilm').submit(function(e)
{
e.preventDefault();
var form = $(this);
var foo = [];
$('.category :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
console.log(foo);
});
});
</script>
</body>
</html>
Using the .val() function on a multi-select list will return an array of the selected values:
var selectedValues = $('#category').val();
And in your html <select id="category" multiple="multiple">
Also put the values of the $gen->genre_id in a variable and so like this
foreach($genre as $gen){
$genId = $gen->genre_id;
$genName = $gen->genre_name;
echo '<option value='.$genId.'>'.$genName.'</option>';
}
Also <select id="category" in a forloop will have many select elements with the same id,change that to category[$i] or use class
Related
index.php
<?php
//index.php
$connect = new PDO("mysql:host=localhost;dbname=test", "root", "");
function fill_unit_select_box($connect)
{
$output = '';
$query = "SELECT * FROM tbl_unit ORDER BY unit_name ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output .= '<option value="'.$row["unit_name"].'">'.$row["unit_name"].'</option>';
}
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</h3>
<br />
<h4 align="center">Enter Item Details</h4>
<br />
<form method="post" id="insert_form">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Enter Item Name</th>
<th>Enter Quantity</th>
<th>Select Unit</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';
html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td>';
html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
$('#insert_form').on('submit', function(event){
event.preventDefault();
var error = '';
$('.item_name').each(function(){
var count = 1;
if($(this).val() == '')
{
error += "<p>Enter Item Name at "+count+" Row</p>";
return false;
}
count = count + 1;
});
$('.item_quantity').each(function(){
var count = 1;
if($(this).val() == '')
{
error += "<p>Enter Item Quantity at "+count+" Row</p>";
return false;
}
count = count + 1;
});
$('.item_unit').each(function(){
var count = 1;
if($(this).val() == '')
{
error += "<p>Select Unit at "+count+" Row</p>";
return false;
}
count = count + 1;
});
var form_data = $(this).serialize();
if(error == '')
{
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
if(data == 'ok')
{
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
}
else
{
$('#error').html('<div class="alert alert-danger">'+error+'</div>');
}
});
});
</script>
insert.php
<?php
//insert.php;
if(isset($_POST["item_name"]))
{
$connect = new PDO("mysql:host=localhost;dbname=test", "root", "");
$order_id = uniqid();
for($count = 0; $count < count($_POST["item_name"]); $count++)
{
$query = "INSERT INTO tbl_order_items
(order_id, item_name, item_quantity, item_unit)
VALUES (:order_id, :item_name, :item_quantity, :item_unit)
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':order_id' => $order_id,
':item_name' => $_POST["item_name"][$count],
':item_quantity' => $_POST["item_quantity"][$count],
':item_unit' => $_POST["item_unit"][$count]
)
);
}
$result = $statement->fetchAll();
if(isset($result))
{
echo 'ok';
}
}
?>
What I need is:
I don't want to show bags option selected in the first row inside the Select Unit dropdown of the second row.
That is, I want the user to select only one option from the Select Unit dropdown. The selection of the same option from the Select unit dropdown must be restricted.
Have a look at jquery fiddle link: https://jsfiddle.net/fyxog73t/3/
HTML Code:
<div class="row">
<div class="col-md-6">1st Row</div>
<div class="col-md-6">
<select id="select_1">
<option value="">Choose</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">2st Row</div>
<div class="col-md-6">
<select id="select_2">
<option value="">Choose</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">3st Row</div>
<div class="col-md-6">
<select id="select_3">
<option value="">Choose</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
</select>
</div>
</div>
JS Code:
$(document).on('change', '[id^="select_"]', function(){
var dropdown_value = $(this).val();
var dropdown_id = $(this).attr('id');
// code to update options from other dropdowns excluding currently selected dropdown
if(dropdown_value != "") {
$('[id^="select_"]:not([id="'+dropdown_id+'"])').find("option[value='"+dropdown_value+"']").attr('disabled', true);
}
// code to check, if any disabled option is present with it's value not present in other dropdown as selected option. If so then removing disabled option for that dropdown
$('[id^="select_"]:not([id="'+dropdown_id+'"])').find("option[value!='"+dropdown_value+"']:disabled").each(function(){
dropdown_value = $(this).val();
dropdown_id = $(this).parent().attr('id');
if($('[id^="select_"]:not([id="'+dropdown_id+'"])').find("option[value='"+dropdown_value+"']:selected").length == 0) {
$(this).removeAttr('disabled');
}
});
});
Had used below steps to achieve the required output:
1) On change method written for each dropdown.
2) In that on change method, disabling other dropdown's option whose value is same as selected option from current dropdown.
3) Then checked, is their any disabled option in other dropdown's(excluding currently selected dropdown). Checking whether that disabled value is present as selected value in other dropdown's or not. If not selected then remove it's disabled attribute.
standard input, select box and multiple select box can also get the desired value, it works.. but how can i get the value with jquery in this code snippet?
<script>
$(document).ready(function(){
jQuery('#checkboxesmarka').change(function(){
var id=jQuery('#checkboxesmarka').val();
alert(id);
});
});
</script>
<div id="checkboxesmarka">
<?php
while($markacek=$markasor->fetch(PDO::FETCH_ASSOC)) { ?>
<label for="<?php echo "marka".$markacek['marka_id'] ?>">
<input type="checkbox" id="<?php echo "marka".$markacek['marka_id'] ?>" name="marka_id[]" value="<?php echo $markacek['marka_id'] ?>" /><?php echo $markacek['marka_name'] ?> </label>
<? } ?>
</div>
$(function(){
$('#checkboxesmarka').click(function(){
var valSelected = [];
$(':checkbox:checked').each(function(i){
valSelected[i] = $(this).val();
});
console.log(valSelected);
});
});
In console all selected value
My goal is to show a second "select" in a "div" with options depending on the selection made by the user on the first "select".
The first "select" is a list of regions, while the second is the list of provinces in the forementioned region.
The function 'change' should update the div 'province', passing a value to another php file used for determining the provinces, with the second select but that doesn't happen.
Main page:
<?php
$region= array("","Abruzzo", "Basilicata", "Calabria");
?>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
function change(value) {
$('province').load('select.php?id='+ value);
}
</script>
<body>
<div>
<select onchange="change.call(this.value)">
<?php
for($i=0;$i<count($region);$i++)
{
echo "<option value=".$i.">".$region[$i]."</option>";
}
?>
</select>
</div>
<div id="province"></div>
</body>
</html>
Script for updating:
<?php
$vector=array(1 =>array("CH","AQ","PE","TE"),
2 => array("MT","PZ"),
3 => array("CZ","CS","KR","RC","VV"));
$id = $_GET['id'];
if($id==0)
{
echo "";
}
else{
for($i=1;$i<(count($vector)+1);$i++)
{
$n=key($vector)
if($n==$i)
{
echo "<select>";
$content=current($vector);
for($k=0;$k<count($content);$k++)
{
echo "<option>".$content[$k]."<option>";
}
echo "</select>";
break;
}
else
{
next($vector);
}
}
}
?>
You're missing the id selector # in :
$('#province').load('select.php?id='+ value);
Hope this helps.
function change(_this) {
console.log(_this.value)
$('#province').load('select.php?id='+ _this.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select onchange="change(this)">
<option value="0"></option>
<option value="1">Abruzzo</option>
<option value="2">Basilicata</option>
<option value="3">Calabria</option>
</select>
</div>
<div id="province"></div>
You are missing the # from the id selector and the ; from $n=key($vector) in your PHP file used for update. Also, if you tagged your question jQuery you should use it. Inline onchange is deprecated and I will recommend you NOT to use it anymore.
Change this:
$n=key($vector)
to this:
$n=key($vector);
jQuery code should look like this:
$('select').on('change', function() {
var selected = $(this).find(":selected").val();
$('#province').load('send.php?id=' + selected);
});
And HTML like this:
<div>
<select name='select'>
<?php for($i=0;$i<count($region);$i++) { echo "<option value=".$i. ">".$region[$i]. "</option>"; } ?>
</select>
</div>
<div id="province"></div>
**Main page:**
<?php
$region= array("","Abruzzo", "Basilicata", "Calabria");
?>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#region").change(function(){
var value=$(this).val();
$("#province").load('select.php?id='+value);
});
});
</script>
<body>
<div>
<select id="region" >
<?php
for($i=0;$i<count($region);$i++)
{
echo "<option value=".$i.">".$region[$i]."</option>";
}
?>
</select>
</div>
<div id="province"></div>
</body>
</html>
**Script for updating:**
<?php
$vector=array(1 =>array("CH","AQ","PE","TE"),
2 => array("MT","PZ"),
3 => array("CZ","CS","KR","RC","VV"));
$id = $_GET['id'];
if($id==0)
{
echo "";
}
else{
if(array_key_exists($id,$vector))
{
echo "<select>";
for($i=0;$i<(count($vector[$id]));$i++)
{
echo "<option>".$vector[$id][$i]."</option>";
}
echo "</select>";
}
}
?>
Dynamically generate a drop down on click of button and when a drop down create in that display a data of product from product table in option tag. So how do I embedded PHP code in option tag in jQuery?
This is my code for generating a dropdown:
jQuery(document).ready(function ($) {
$('.my-form .add-box').click(function () {
var n = $('.text-box').length + 1;
var box_html = $('<p class="text-box"><label>Product: </label><select name="boxes[]" value="" id="box' + n + '" style="width:450px; height:40px;"><option>Select Product</option></select> Delete<br><br></p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function () {
$(this).parent().fadeOut("slow", function () {
$(this).remove();
$('.box-number').each(function (index) {
$(this).text(index + 1);
});
});
return false;
});
Already I done this:
<div class="my-form">
<p class="text-box">
<label>Product: </label>
<select id="box1" class="email" name="box[]" style="width:450px; height:40px;">
<option value="">Select Product</option>
<?php
while ($row = mysql_fetch_array($result))
{
?>
<option value="<?php echo $row['product_id']; ?>"><?php echo $row['product_name']; ?></option>
<?php
}
?>
</select>
<a class="btn btn-success addmore add-box"> Add Product </a><br><br>
</p>
</div>
And dropdown also dynamically generated but the problem is in jQuery code in option tag how to apply above php code to display a product name that I don't know
<script>
$(document).ready(function() {
$("#update_item").change(function (e) {
var update_item = $("#update_item").serialize();
$.post("item.php", {"update_item": update_item}, function (data) {
$('#details').html(data);
});
});
});
</script>
<select name="update_item" multiple="multiple" class="form-control" style="width:59%" id="update_item">
<option value="fff">fffffff</option>
<option value="ffff">Select Supplier</option>
<?php
$result = mysql_query("select * from item");
while ($row = mysql_fetch_array($result)){?>
<option value="<?php echo $row['item_name'];?>"><?php echo $row['item_name'];?></option>
<?php } ?>
</select>
<div id="details">
hii
</div>
Current output: update_item=fff&update_item=ffff&update_item=fdgdfgjkljklkj
Expected Output: fff,ffff,fdgdfgjkljklkj (implode post values).
You should define your HTML variable as an array ('update_item[]') and then serialize it so when you do:
var_dump($_POST['update_item'])
there will be an array data type, check:
<script>
$(document).ready(function() {
$("#update_item").change(function (e) {
$.post("item.php", $(this).serialize(), function (data) {
$('#details').html(data);
});
});
});
</script>
<select name="update_item[]" multiple="multiple" class="form-control" style="width:59%" id="update_item">
<option value="fff">fffffff</option>
<option value="ffff">Select Supplier</option>
<?php
$result = mysql_query("select * from item");
while ($row = mysql_fetch_array($result)){?>
<option value="<?php echo $row['item_name'];?>"><?php echo $row['item_name'];?></option>
<?php } ?>
</select>
<div id="details">
hii
</div>
Hope it helps!