jQuery Related (Dependent) Selects Plugin - php

I found this jquery plugin for dependent select box . This worked now but i have big problem ! when put this in submit form not worked because this plugin worked with form id and post/get data using json. Original Demo HERE
Problem e.x:
<div id="box">
<form action="search.php" method="POST" >
<form id="example-1">
<div class="field">
<label for="name">state :</label>
<select name="stateID">
<option value="">Choose State »</option>
<option value="MA">Massachusetts</option>
<option value="VT">Vermont</option>
</select>
</div>
<div class="field">
<label for="name">Country :</label>
<select name="countyID">
<option value="">Choose County »</option>
</select>
</div>
<div class="field">
<label for="name">town :</label>
<select name="townID">
<option value="">Choose Town »</option>
</select>
</div>
<div class="field">
<label for="name">village :</label>
<select name="villageID">
<option value="">Choose Village »</option>
</select>
</div>
</form>
</form>
</div>
If I Remove form action this plugin worked perfectly, Otherwise not worked. How To Fix This Thanks.

To elaborate on my comment, you can capture the submit of the form and do with it what you like.
$("form").submit(function(e){
e.preventDefault(); //stop the default behavior
$.ajax({
type: 'POST', //default is get, set to 'POST' if you want to post.
url: 'search.php',
success: function(data){
//if our data was returned from our search file as json, then...
$("#element").html(data.a) //returns the a value from our json object
$("#element").html(data.b) //returns the b value from our json object
//etc
}
});
});
The submit function stops the form from submitting per the usual fashion, and stops the page-reload. Then we use an ajax request to send our data through the 'POST' method to our file search.php. The returned data is sent in an object, and we access it through our success:function(data). Then, if our data was returned with JSON values, we can use data.a to get the a value, or data.b to get the b value of our JSON string.

Related

Set select input value unsing php echo

I have a select input for categories that set a list (category_id + category_value) from the database using the class categories_list. Now I want to set the value of selected category using get method when a user click on a specific category from another page. My get method is working fine, but the select input doesn't fetch the get variable with php echo.
I have tried to use instead jquery $("select[name='categories_id']").val(); but it works only if i add a clicked event that i don't want it .
<div class="control-group">
<label class="control-label alignL" for="categories_id">Catégories </label>
<select id="categories_id" class="form-control common_selector categories_list" name="categories_id" value" <?php if (isset($_GET["cat"])) { echo $categorytag; } ?>" >
</select>
</div>
Please consider the following example.
<div class="control-group">
<label class="control-label alignL" for="categories_id">Catégories </label>
<select id="categories_id" class="form-control common_selector categories_list" name="categories_id">
<option value="1001">Cat 1</option>
<option value="1002">Cat 2</option>
<option value="1003" selected>Cat 3</option>
<option value="1004">Cat 4</option>
<option value="1005">Cat 5</option>
</select>
</div>
The <select> element does not have a value attribute.
Attribute
Description
autofocus
Specifies that the drop-down list should automatically get focus when the page loads
disabled
Specifies that a drop-down list should be disabled
form
Defines which form the drop-down list belongs to
multiple
Specifies that multiple options can be selected at once
name
Defines a name for the drop-down list
required
Specifies that the user is required to select a value before submitting the form
size
Defines the number of visible options in a drop-down list
See More: https://www.w3schools.com/tags/tag_select.asp
You can get the value of the element when an <option> has been selected.
$(function() {
console.log("Current Value", $("#categories_id").val());
$("#categories_id").change(function() {
console.log("Selected", $(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
<label class="control-label alignL" for="categories_id">Catégories </label>
<select id="categories_id" class="form-control common_selector categories_list" name="categories_id">
<option value="1001">Cat 1</option>
<option value="1002">Cat 2</option>
<option value="1003" selected>Cat 3</option>
<option value="1004">Cat 4</option>
<option value="1005">Cat 5</option>
</select>
</div>
You will want to adjust your PHP to build the Select element and Options properly before sending it to the browser. Then, if you are performing some action via JavaScript or jQuery, it will be done Client side.

Assign "select" attribute to jquery select2 dropdown dynamically

I am working on jquery select2 dropdown. I have to display the multiple selected option in select area. For this purpose i loop through each of select2. If condition is met i will assign 'selected' attribute property to option so that it may appears in the select area.
But somehow the select2 fails to display the selected ''.
HTML CODE:
<div class="form-group col-md-12">
<label for="inputsskill">Skill<span class="required-field">*</span></label>
<fieldset>
<select class="custom-select w-100" name="skill_name[]" id="skill_name" multiple="multiple" style="width: 100%;">
#if(!$skills->isEmpty())
#foreach($skills as $skill)
<option value="{{$skill->id}}">{{$skill->name}}</option>
#endforeach
#endif
</select>
</fieldset>
</div>
JQUERY CODE:
// parse skills
var parseData = JSON.parse(skill);
// parseData is an array which contain 1,2,3 values like ['1','2','3']
$("#skill_name > option").each(function() {
// if select2 and array values matches assign selected attribute to that option
if( $.inArray($(this).val(), parseData) !== -1 ) {
$(this).attr('selected', 'selected');
}
});
Select2 Jquery:
$( "#skill_name" ).select2({
});
I dont know where i am going wrong, i would appreciate if someone guide me in this.
Thanks,
you can achieve this functionality with PHP easily.
E.g : fetch skills from the database which you want to preselect and create an array of skills. Then match this in your loop.Like
<div class="form-group col-md-12">
<label for="inputsskill">Skill<span class="required-field">*</span></label>
<fieldset>
<select class="custom-select w-100" name="skill_name[]" id="skill_name" multiple="multiple" style="width: 100%;">
#if(!$skills->isEmpty())
#foreach($skills as $skill)
<option value="{{$skill->id}}" <?php
if(in_array($skill->name, $selectedskillsArray)){
echo $selected = 'selected';
}
?> >{{$skill->name}}</option>
#endforeach
#endif
</select>
</fieldset>
</div>
Try this one.
Jquery solution
$( "#skill_name" ).select2({
});
$('#skill_name').val(["1","2","3"]).trigger('change');

Dynamically Set Value in seletpiker using jquery and Ajax

I am getting City List From Database and I Want to Show the Selected City Selected While Edit Operation.
I am Using Ajax for Getting a value from Database.
That's Work Nicely. I get the Response Data From My Controller.
Now The Problem is I am not Able to set a value on selectpiker.
I get City Name In Ajax Response.
I have tried Some Example but did not work.
Here is the Ajax Code.
$.ajax({
type: "GET",
url: urlForGetCityList,
dataType: 'Json',
success: function(response){
console.log(response.cityName);
// This is What i Tried For getting SeletBox Selected.
var $select = $('#city');
$select.val(response.city).trigger('change');
// I have also Tried Some Selct2 Option for it. But it didn't work.
$("#city").select2("val", response.city);
// And at Last I have tried for like simple select box.
$("#city").val(response.city);
});
None of this work properly.
Here is the HTML Code of Selectpiker.
<div class="col-md-4">
<div class="form-group">
<label for="field-3" class="control-label">City *</label>
<select class="selectpicker" data-live-search="true" data-style="btn-white" name="city" id="city"
title="Select City">
<option value="city1">City 1</option>
<option value="city2">City 2</option>
</select>
</div>
</div>
You Already Reach to the half you're a problem is just this select piker is not showing the selected value because it's that way you should check this.
So Try This.
$('select[name=city]').val(response.city);
$('.selectpicker').selectpicker('refresh');

Show/hide select values based on previous select choice

I have 2 select's inside a form. The second select has about 2000 lines in total coming out of my mysql table. One of the column into that mysql has 1 of the values used into the first select. I want to be able to filter on that value when it is selected into the first select, so that it only shows these articles.
code now:
<div class="rmaform">
<select name="discipline" class="discipline">
<option value=" " selected></option>
<option value="access">ACCESS</option>
<option value="inbraak">INBRAAK</option>
<option value="brand">BRAND</option>
<option value="cctv">CCTV</option>
<option value="airphone">AIRPHONE</option>
<option value="perimeter">PERIMETER</option>
</select>
</div>
<div class="rmaform">
<select name="article" class="input-article">
<?php
$articleselect = $dbh->prepare('SELECT * FROM articles');
$articleselect->execute();
while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
?>
<option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
<?php
}
?>
</select>
I think i have to use Javascript for it but how do you combine PHP and Javascript? And what would be the best way to make the filter work?
jQuery for the change event and AJAX
$(document).ready(function(e) {
$('select.discipline').change(function(e) { // When the select is changed
var sel_value=$(this).val(); // Get the chosen value
$.ajax(
{
type: "POST",
url: "ajax.php", // The new PHP page which will get the option value, process it and return the possible options for second select
data: {selected_option: sel_value}, // Send the slected option to the PHP page
dataType:"HTML",
success: function(data)
{
$('select.input-article').append(data); // Append the possible values to the second select
}
});
});
});
In your AJAX.php
<?php
if(isset($_POST['selected_option']))
$selected_option=filter_input(INPUT_POST, "selected_option", FILTER_SANITIZE_STRING);
else exit(); // No value is sent
$query="SELECT * FROM articles WHERE discipline='$selected_option'"; // Just an example. Build the query as per your logic
// Process your query
$options="";
while($query->fetch()) // For simplicity. Proceed with your PDO
{
$options.="<option value='option_value'>Text for the Option</option>"; // Where option_value will be the value for you option and Text for the Option is the text displayed for the particular option
}
echo $options;
?>
Note: You can also use JSON instead of HTML for much simplicity. Read here, how to.
First give both of the selects an unique ids...
<div class="rmaform">
<select name="discipline" class="discipline" id="discipline">
<option value="" selected></option>
<option value="access">ACCESS</option>
<option value="inbraak">INBRAAK</option>
<option value="brand">BRAND</option>
<option value="cctv">CCTV</option>
<option value="airphone">AIRPHONE</option>
<option value="perimeter">PERIMETER</option>
</select>
</div>
<div class="rmaform">
<select name="article" class="input-article" id="article">
<option value="" selected></option>
</select>
Now you can use jQuery Ajax call to another file and get the HTML Response from that file and Populate in the select field with id="article" like this...
<script type="text/javascript">
$(document).ready(function(){
$("#discipline").change(function(){
var discipline = $(this).val();
$.post(
"ajax_load_articles.php",
{discipline : discipline},
function(data){
$("#article").html(data);
}
)
});
});
</script>
Now create a new file like ajax_load_articles.php... in the same directory where the html file exists... You can place it anywhere but then you have to change the $.post("url", the url to the ajax submission.
Contents of ajax_load_articles.php :
<?php
$discipline = $_POST["discipline"];
$articleselect = $dbh->prepare("SELECT * FROM articles WHERE colname = '{$discipline}'");
$articleselect->execute();
echo '<option value="" selected></option>';
while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
?>
<option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
<?php
}
?>
Now when ever you will change the select of the first select field an Ajax call will take place and the data of the second select field will automatically adjust to related data selected in the first select field.
This is an example where you can select the college specific to the state ..
Form.php
// your code for form ...
// select box for state starts
<div class="form-group">
<label for="select" class="col-lg-2 col-md-2 control-label">State</label>
<div class="col-lg-10 col-md-10">
<select class="form-control input-sm" name="statename" id="stateid">
<option value="">---- Select ----</option>
<?php
$state=sql::readResultArray("Your Query To select State`");
foreach($state as $s){
?>
<option value="<?php echo $s?>"> <?php echo $s ?> </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 col-md-2 control-label">Colleges</label>
<div class="col-lg-10 col-md-10">
<select class="form-control input-sm" name="mycollegename">
<option value="">--- Select --- </option>
</select>
</div>
</div>
// further code for from in form.php..
Script to find the state and then pass the value to find the respective colleges in that state
<script>
$(document).ready(function(e) {
$('#stateid').change(function()
{ ids=$('#stateid').val();
$.get('mycollege.php', {type:ids} ,function(msg){
$('select[name="mycollegename"]').html(msg);
});
});
});
</script>
Call this file through ajax .. Code on this file
mycollege.php
<?php
require('db.php'); // call all function required, db files or any crud files
$type=$_GET['type'];
if(!empty($type)){
$r=sql::read("Your Query To call all teh college list");
?>
<select name="mycollegename">
<option value="">Select One</option>
<?php
foreach($r as $r){
echo "<option value=\"$r->collegename\">$r->collegename </option>";
}
?>
</select>
<?php }else{ ?>
<select name="mycollegename">
<option value="">Select State</option>
</select>
<?php } ?>

Populate inputs on selects JQUERY

i have a dropdown menu generated by my php when the page loads filling with my rows in the sql table, being the table ID(Value) and they NAME.
<select>
<option value="0"></option>
<option value=6>Alientech</option>
<option value=2>FNAC</option>
<option value=5>Logitech</option>
<option value=1>MHR</option>
</select>
Then i have:
<input type="text" name="editname">
<input type="text" name="editmail">
<input type="text" name="editwebsite">
<input type="text" name="editphone">
<input type="text" name="editfax">
<input type="text" name="editadress">
<input type="text" name="editincharge">
What i want to do is on selecting the option above he gets the id of the row in mysql and fills the inputs accordingly to the values in the SQL table so a person can edit the values on submitting the form.
How can i with jQuery do this?
Where is your code attempt?
The way to do this is on select of the jquery
you would take the value of the select where
<select id="some_id">
also you will need to ID all your fields of input.
Your PHP script should return a JSON where your on success you parse the JSON and set it to the value of your INPUT field via ID.
$.ajax({
url: some_php_mysql.php
type:post,
data: {some_id:$('#some_id').val()},
success:function(data){
//json object returned - parse and then ID each value
});
First, you could reload the page :
<form action="" method="post" id="myform">
<select name="myselect">
<option value="0" disabled="disabled"></option>
<option value=6>Alientech</option>
<option value=2>FNAC</option>
<option value=5>Logitech</option>
<option value=1>MHR</option>
</select>
</form>
With a little bit of jQuery...
$("form#myform select").change(function(){
$("form#myform").submit(); // Submit the form if the value is changed.
});
And when you load your page, if you find a value for $_POST["myselect"] then you have to load something in the fields (except if it's 0).
You could also do things asynchronously with Ajax (instead of submitting the form, send a HTTP request and parses the result to fill the form). However, if the purpose of your page is only to edit an entry, the you should use the above method.
Ajax reference : http://www.w3schools.com/ajax/

Categories