how we can use in Laravel Jquery onchange element in select? - javascript

<script>
$('#brand_id').on('change',function(e){
console.log(e);
var brand_id = e.target.value;
//ajax
$.get('/product_id?brand_id =' + brand_id, function(data));
//success data
$.each(data, function(upload_form, product_cat){
$('product_category').empty();
$('product_category').append('<option value="'+ product_cat.id +'">'+ product_cat.product_hierarchy +'</option>');
});
});
Above is my Jquery code check this and point out me what is the problem.
<form enctype="multipart/form-data" action="{{action('BrandController#upload_csv')}}" method="post">
Brand Code
<select name="brand_id" id="brand_id" Select="" class="form-control">
<option value="">--Select Brand Code--</option>
<?php foreach ($brands as $row) { ?>
<option value="<?= $row->brand_id ?>"><?= $row->brand_name ?></option>
<?php } ?>
</select>
Product Id
<select name="product_category" id="product_category" Select="" class="form-control">
</select>
Status
<select name="status" Select="" class="form-control">
<option value="">--Select Product Status--</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="hidden" name="_token" value="<?= csrf_token(); ?>">
Upload Valid csv file
<input type="file" name="csv" required class="form-control">
<br/>
<input type="submit" value="Upload" class="btn btn-primary">
</form>
This is my form. in the form there is a select in which onchange element i want to show sub categories in next select. Below is my Route file code.
Route::get('/product_id', function(){
$brand_id = Input::get('brand_id');
$product_id = product_hierarchy::where('bcategory_code','=',1)->get();
return Response::json($product_id);
});

In Laravel 5.2 we have to pass the csrf token to execute the request.
just try like this...
<script>
$('#brand_id').on('change',function(e){
console.log(e);
var brand_id = e.target.value;
//ajax
$.get('/product_id?brand_id =' + brand_id,{"_token":$("input[name='_token']").val()}, function(data));
//success data
$.each(data, function(upload_form, product_cat){
$('product_category').empty();
$('product_category').append('<option value="'+ product_cat.id +'">'+ product_cat.product_hierarchy +'</option>');
});
});
</script>
I just add this line of code to your get request:
{ "_token" : $("input[name='_token']").val() }
Good Luck.. Happy Coding!!!
Edited
For detailed information about this you can found on the below linked tutorials:
Laravel CRUD Using jQuery AJAX PART – 1
Laravel CRUD Using jQuery AJAX PART – 2

Related

save previous value from posted select

I am having problem passing two select to $_POST
i have two select and when i post from the first the value is not been saved ,so when i post from the second select doesn't remember the first select value ,I want to pass the first select and save the value to select.
<form method="post" action="index.php">
<select id="city" name="city" class="styled-select">
<option value="all" selected="selected">all</option>
<option value="Van">Vancouver</option>
<option value="vic">Victoria</option>
</form>
<form method="post" action="index.php">
<select id="dept" name="dept" class="styled-select">
<option value="all" selected="selected">all</option>
<option value="1">First</option>
<option value="2">Second</option>
</form>
and i am using jquery to submit the form in change
when first form submitted select does not save the value of the selected option
$(document).ready(function() {
$('#city').change(function() {
$(this).find("option[selected='true']").removeAttr('selected');
$(this).find('option:selected').attr('selected', 'true');
this.form.submit();
});
$('#dept').change(function() {
$(this).find("option[selected='true']").removeAttr('selected');
$(this).find('option:selected').attr('selected', 'true');
this.form.submit();
});
});
I noticed you were missing some commas and that you didn't pass any data. Try this instead.
$("#city").change(function()
{
var selected = $("#city").find(':selected').val();
$.ajax({
url: "index.php",
type: 'POST',
data: {
"city": selected
},
success: function(data) {
console.log("success");
}
});
});
Also, you should be able to get the value of a select via val() e.g. $("#city").val().
For normal submit:
<form method="post" action="index.php">
<select id="city" name="city" class="styled-select">
<option value="all" <?php echo $_POST['city']==="all" ? "selected" : "" ?>>all</option>
<option value="Van" <?php echo $_POST['city']==="Van" ? "selected" : "" ?>>Vancouver</option>
<option value="vic" <?php echo $_POST['city']==="vic" ? "selected" : "" ?>>Victoria</option>
</form>

Search data using select tags with multiple option in php using ajax

I was trying to search data from database using multiple select tags on onchange select tags, I have four select tags with multiple select option. here is form
<form method="GET" id="first_form" >
<div class="col-md-3">
<div class="form-group">
<label>Maintenance</label>
<select id="chkveg" name="maintenance[]" multiple="multiple">
<option value="21">Low</option>
<option value="23">Medium</option>
</select>
</div>
<input type="hidden" id="btnget" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Lighting </label>
<select id="chkveg1" name="lighting[]" multiple="multiple">
<option value="24">indoors: iow light</option>
<option value="25">indoors: medium light</option>
</select>
</div>
<input type="hidden" id="btnget1" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Shade </label><br/>
<select id="chkveg2" name="shade[]" multiple="multiple">
<option value="30">Low</option>
<option value="31">Medium</option>
</select>
</div>
<input type="hidden" id="btnget2" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Other</label><br/>
<select id="chkveg3" name="other[]" multiple="multiple">
<option value="40">Low</option>
<option value="41">Medium</option>
</select>
</div>
</div>
</form>
<div class="col-md-3" id="form-content">
</div>
and my database table structure is
search criteria is "If I select multiple options from one select tag, It should search using OR operator and If i select a option from second select tag, It should search using AND operator."
For example : In above form,If i select two option from maintenance tag, search using OR operator with one pl_maintenance_search column, If i select one option from lighting select tag, search using AND between pl_maintenance_search and pl_lighting_search. and same with other select tags.
I am submitting this form using this script
$("form select").on('change', function () {
var dataString = $("#chkveg, #chkveg1, #chkveg2, #chkveg3").serialize();
$.ajax({
url: 'ajax_file.php',
type: 'GET',
data: dataString,
dataType: 'html'
})
.done(function(data){
$('#form-content').html(data);
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
and here is my ajax_file.php code
$operator='OR';
$all_array = $_GET;
$unque_array = array();
$count=0;
foreach ($all_array as $main_key => $value )
{
if($main_key)
{
$count++;
}
if($count>1){ $operator='AND'; }
foreach ($value as $r_value)
{
$single = $r_value;
$query = "SELECT * FROM tbl_pl_details WHERE pl_maintenance_search LIKE ? $operator pl_lighting_search LIKE ? $operator pl_shade_search LIKE ? $operator pl_other_search LIKE ? ";
$params = array("%$single%", "%$single%", "%$single%", "%$single%" );
$select_maint_plants = $con->prepare($query);
$select_maint_plants->execute($params);
while($fetch_light_plants = $select_maint_plants->fetch(PDO::FETCH_ASSOC))
{
if(!in_array($fetch_light_plants['id'], $unque_array))
{
echo $fetch_light_plants['pl_name']; echo '<br/>';
}
$unque_array[]= $fetch_light_plants['id'];
}//End while loop
}//End foreach loop
}//End foreach loop
Above code is working with only single select tag, and not with others tag.
Please help me to solve this.

how to send parameters from js to php codeigniter

I don't know what i'm doing wrong and im stuck in this part of my project so any help would be appreciated
here is my html:
<form id="form_search" method="post" action="/controler/something">
<select id="tip_fam" maxlength="100" >
<option value="1">something 001</option>
<option value="2">something 002</option>
<option value="3">something 003</option>
<ul id="print" class="bot"><li>Print</li></ul>
</form>
JS:
$("#print").click(function(){
url = base_url+"index.php/almacen/product/create_pdf/"+$("#tip_fam").val();
window.open(url,'',"width=800,height=600,menubars=no,resizable=no;")
});
Php (codeigniter) :
public function create_pdf(){
$tip_fam = $this->input->post('tip_fam');
i thought i could get the value of the select this way but when i print it in a var_dump(), it shows me "boolean false".
to send value in url and to use in controller, you should capture that vales in parameter of the function. Change your code like this, it will work.
public function create_pdf($tip_fam){
echo $tip_fam;// will echo the value which you passed from view.
You don't actually have to use javascript. I would do it this way.
EDIT: You can have more than one submit button. Just check it in your function.
View:
<form id="form_search" method="post" action="/controller/something">
<select id="tip_fam" maxlength="100">
<option value="1">something 001</option>
<option value="2">something 002</option>
<option value="3">something 003</option>
</select>
<input type="submit" name="print" id="print" value="Print">
<input type="submit" name="print" id="print" value="PrintAndSave">
</form>
Controller:
public function something()
{
// Check which button was clicked
$submit_button = $this->input->post('print');
if( $submit_button == 'print' )
{
// Do print
}
elseif( $submit_button == 'printAndSave' )
{
// Do print and save
}
}

Select on change/submit inside Ajax

I have a form that gets submitted via ajax, inside that form there are two selects. these two selects get data from mysql using php.
I want is to show the second select only when the first select has been chosen, I've tried onchange and onsubmit but didn't get it to work. ajax script keeps preventing that! i even tried passing the value of the first select vie js to php, didn't work too.
<select class="form-control" name="sel1" onchange="recMarque();" required>
<option value="" hidden selected>Choose</option>
<?php
$r=$conn->query(sprintf("select * from stock")) or die(mysqli_error($conn));
while ($d=$r->fetch_assoc()){
echo '<option value="' . $d[0] . '"'. ((!empty($sel1))?($d[0]==$sel1)?'selected':null:null) .'>'.$d[0].'</option>';
}
?>
</select>
<script language="Javascript">
function recMarque(){
var p1 = $("select[name=sel1]").val();
alert(p1);
return p1;
}
</script>
<?php
$s1= "<script>document.writeln(recMarque());</script>";
echo $s1;
?>
<select class="form-control" name="sel2" required>
<option value="" hidden selected>Choose</option>
<?php
if(!empty($s1)){
$r=$conn->query(sprintf("select * from table where x='$s1'")) or die(mysqli_error($conn));
while ($d=$r->fetch_assoc()){
echo '<option value="' . $d[0] . '"'. ((!empty($sel2))?($d[0]==$sel2)?'selected':null:null) .'>'.$d[0].'</option>';
}
}
?>
</select>
Static html:
<select class="form-control" name="sel1" onchange="recMarque();" required>
<option value="" hidden selected>Choose</option>
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
</select>
<script language="Javascript">
function recMarque(){
var p1 = $("select[name=sel1]").val();
alert(p1);
return p1;
}
</script>
<script>document.writeln(recMarque());</script>
<select class="form-control" name="sel2" required>
<option value="" hidden selected>Choose</option>
</select>
I appreciate your help
Why are you using inline javascript while you are already loading the huge file of jQuery? Use jQuery change event and wrapp your hole code inside a jQuery DOM ready event. Additionnaly why are you mixing PHP with markup and javascript, this goes in contradition of AJAX purposes and of your goal descrption. You want to show the second select after selection from first select and the content depends on selected value (which require server side fetching) then send an XMLHTTPRequest to a separate (small) file and get the response.
$('select[name=sel1]').change(function(e) {
e.preventDefault();
var value = $('select[name=sel1] option:selected').val();
var text = $('select[name=sel1]',this).text();
var urlForSelect2 = $('select').attr('data-url');
// make an AJAX call and send value, text, and all your needed variable alongside
$.ajax({
type: "GET",
url: urlForSelect2,
dataType: 'html',
data: ({value: value, text: text}),
success: function(data){
$('select[name=sel1]').append(data);
});
return false;
});
And seperate the the php responsible for creating into another file with another url (urlForSelect2 in this case):
<option value="" hidden selected>Choose</option>
<?php
// Get the values sent along AJAX request using PHP $_GET, let's say $s1
if(!empty($s1)){
$r=$conn->query(sprintf("select * from table where x='$s1'")) or die(mysqli_error($conn));
while ($d=$r->fetch_assoc()){
echo '<option value="' . $d[0] . '"'. ((!empty($sel2))?($d[0]==$sel2)?'selected':null:null) .'>'.$d[0].'</option>';
}
}
?>
And the markup is becoming smaller and readable like:
<select class="form-control" name="sel1" data-url="recMarque();" required>
<option value="" hidden selected>Choose</option>
<?php
$r=$conn->query(sprintf("select * from stock")) or die(mysqli_error($conn));
while ($d=$r->fetch_assoc()){
echo '<option value="' . $d[0] . '"'. ((!empty($sel1))?($d[0]==$sel1)?'selected':null:null) .'>'.$d[0].'</option>';
}
?>
</select>
<select class="form-control" name="sel2" required>
<option value="" hidden selected>Choose</option>
</select>
Here is my solution
In the first select i've put onchange="selChange", the function is as follows:
<script type="text/javascript">
function selChange(){
var val = $("#sel1").serialize();
$.ajax({
type: "POST",
url: "select.php",
data: val,
success: function(data) {
$('#sel2').html(data);
}
});
return false;
}
</script>

Submit a form with JavaScript when the onchange event of an dropdown is fired

I have a dropdown with a submit button, but I would like to eliminate the button, and send the form via Ajax, when the user selects an option from the dropdown.
Here's the code:
<select name="pin" id="pin" class="search_box" >
<option value="">Zip Code</option>
<?php
include("conn.php");
$pin=$_REQUEST[pin];
$city=$_REQUEST[city];
$kk="select * from zip order by zip";
$jj=mysql_query($kk);
while($mm=mysql_fetch_array($jj))
{
?>
<option value="<?php echo $mm[zip]?>"<?php if($mm[zip]==$pin){echo "selected";}?>>
<?php
echo $mm[zip]
?>
</option>
<?php } ?>
</select>
<input type="button" id="findbutton" name="search_button" value="Go" />
Ok here is a version using jquery.
$('#pin').on('change', function(e){
e.preventDefault();
var form = this.form;
var data = $(form).serialize();
$ajax({
data: data,
url: form[0].action
})
})

Categories