jquery check specific options in a multiselect - php

Alright I have a multiselect like this :
<select id="filtreMultiselectModif" name="groupes[]" multiple="multiple">
<script>
$('#filtreMultiselectModif').multiselect(
{
includeSelectAllOption: true,
enableFiltering: true,
maxHeight: 200
});
</script>
which give me that :
What I would like to do is to set checked some specific items that I store in a PHP table.
Here's my jquery code (that didn't work)
<script>
$(document).ready(function ()
{
var arrayFromPHP = <?php echo json_encode($tableauIntitule); ?>;
$('#filtreMultiselectModif').multiselect(
{
includeSelectAllOption: true,
enableFiltering: true,
maxHeight: 200
});
$('#filtreMultiselectModif option').each(function(i,option)
{
$.each(arrayFromPHP,function(index,groupe){
if ($(option).text() === groupe)
{
alert (option.text);
$(this).attr('checked', 'checked');
}
});
});
});
Basicly I want every item stored in arrayFromPHP to be checked in the dropdown list but it doesn't seem to work..
Here's the code for my PHP array just in case :
<?php
$tableauIntitule = [];
$i = 0;
while ($data3 = mysqli_fetch_array($req3)) { // Remplissage du SELECT
$intitule = $data3['intitule'];
$tableauIntitule[$i] = $intitule;
}
?>

First of all - your question is regarding bootstrap-multiselect (and not jquery-multiselect).
You can use the multiselect('select', VALUES) in order to set the selected values.
Here is an example:
$(document).ready(function() {
$('#s1').multiselect();
$('#s1').multiselect('select', ['a', 'c', '2']);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<select id="s1" multiple="multiple">
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
In your case, if arrayFromPHP is an array (ie arrayFromPHP = ['v1', 'v2', 'v3']) you can do multiselect('select', arrayFromPHP).
One important thing to remember - the data in the array should be the values and not the options data (<option value="VAL">OPTION</option>).

Related

How to pass select value to url using Jquery

how to pass the select dropdown value to url
Here is what I tried.
<select name="value">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="10">10</option>
</select>
$(document).ready(function(){ $('select').on('click', function(e){
e.preventDefault();
var value = $('#one').val();
window.location.href = url+'?&'+value;
} }); });
Here is working thing. Also, I am not sure, what exactly do you mean by "pass select value to URL simply"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var url = "http://www.google.com";
var value = "";
$(document).ready(function(){
$("select").change(function(){
alert($(this).val());
value = $(this).val();
window.location.href = url+'?&'+value;
});
});
</script>
</head>
<body>
Select:
<select name="value">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="10">10</option>
</select>
</body>
</html>
You should use .change instead of on.click. Also add an id for select
<select name="value" id="selectedID">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="10">10</option>
</select>
and
$(document).ready(function(){
$("#selectedID").change(function(){
var value = $('#selectedID').val();
window.location.href = url+'?&'+value;
}
});
The question is not clear if you want to get the value from option and reload the page with a REQUEST query "value?=" with the selected value, use this code
$(document).ready(function()
{
$('select').on('change', function(e)
{
var value = $(this).val();
window.location.href = '?value='+value;
});
});
if you want to just replace the url without reloading try replacing the history state, use this code
$(document).ready(function()
{
$('select').on('change', function(e)
{
var value = $(this).val();
var urlNow = window.location.href.replace(/\?.*/g,'').replace(/\/$/g,'');
history.replaceState({},'',urlNow+'/?value='+value);
});
});

Insert into Ajax php

Hello i need help in this code,i am new in ajax and php. this code dont work and idk why.
I want insert the form on database without refresh.
here is the code
All html of the site with the script
Im using boostrap
<!DOCTYPE html>
<html>
<head>
<title>CS INICIO</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="background-color: #13171a">
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
<form id="formulario" method="post">
<div class="form-group">
<input class="form-control" type="text" name= "nome" required="true" placeholder="Nome">
<input class="form-control" type="text" name= "link" required="true" placeholder="Link Steam">
<select class="form-control" name="rank">
<option value="silver1">Silver 1</option>
<option value="silver2">Silver 2</option>
<option value="silver3">Silver 3</option>
<option value="silver4">Silver 4</option>
<option value="silver5">Silver Elite</option>
<option value="silverElite">Silver Elite Master</option>
<option value="silverEliteMaster">Silver 1</option>
<option value="goldnova1">Gold Nova 1</option>
<option value="goldnova2">Gold Nova 2</option>
<option value="goldnova3">Gold Nova 3</option>
<option value="goldnovamaster">Gold Nova Master</option>
<option value="ak1">Master Guardian 1</option>
<option value="ak2">Master Guardian 2</option>
<option value="akcruzada">Master Guardian Elite</option>
<option value="eximio">Eximio</option>
<option value="le">Legendary Eagle</option>
<option value="lem">Legendary Eagle Master</option>
<option value="supreme">Supreme</option>
<option value="global">Global Elite</option>
</select>
<button class="btn btn-default" onclick="addData()" id="submit">Button</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function addData() {
dataString = $("#formulario").serialize();
$(".text-danger").hide();
$.ajax({
type: "POST",
url: "enviar.php",
data: dataString,
cache: false,
dataType: 'json',
success: function(resp){
if(resp.status == '0') {
alert("insert error");
} else {
clearInput();
alert("insert success");
}
}
});
return false; //stop the actual form post !important!
}
</script>
</body>
</html>
here is the enviar.php i dont know here is the error
Im new in code
ficheiro php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$host = "localhost";
$root = "root";
$pass = "";
$tabela = "cssite";
$conexao = mysqli_connect($host, $root, $pass, $tabela) or die("Erro Na base de dados") ;
mysqli_connect_error($conexao);
$nome = $_POST['nome'];
$link = $_POST['link'];
$rank = $_POST['rank'];
$sql = "INSERT INTO utilizadores('nome','rank','link') VALUES ('".$nome."','".$rank."','".$link."')";
$sql_result = mysqli_query($conexao,$sql);
if ($sql_result) {
echo 1;
}
else{
echo 0;
}
?>
Thanks all for the help
dsadsasafsafasfas
Need to change you data object to use curly brackets, not normal ones:
data:{nome:nome,link:link,rank:rank},
Also need to change your condition in the success callback to a comparison operator as opposed to an assigned operator:
if (value == 1) {
In your PHP, you need to change return 1; and return 0; to echo 1; and echo 0; if you want them to output to the page.
You are also only listening for the click event, you should listen for the submit event so you can prevent the default action. Change:
$('#submit').click(function(){
To:
$('#yourform').on("submit", function(e){
e.preventDefault(); //Prevents submission of the form through normal means.
This would help in the "Undefined index error":
if(isset($_POST['submit'])){
// your code
}
Call this function on button click
function addData() {
dataString = $("#formulario").serialize();
$(".text-danger").hide();
$.ajax({
type: "POST",
url: "enviar.php",
data: dataString,
cache: false,
dataType: 'json',
success: function(resp){
if(resp.status == '0') {
alert("insert error");
} else {
clearInput();
alert("insert success");
}
});
return false; //stop the actual form post !important!
}

Make search box with autosuggest

I'm trying to make a search box with the google/bing "autosuggest" functionality. Having searched the site, the closest I have found to this is here: Custom box with autocomplete from Google/Bing. Is there any way to read the received json file?
The script on the jsfiddle.net works great, however when I try to replicate the code it doesn't work.
Here is my code:
<html>
<head>
<script>
$(function () {
$("#hulk").autocomplete({
source: function (request, response) {
console.log("source");
$.ajax({
url: "http://api.bing.com/osjson.aspx?Query=" + encodeURIComponent(request.term) + "&JsonType=callback&JsonCallback=?",
dataType: "jsonp",
/*data: {
"Query": request.term,
"JsonType": "callback",
"JsonCallback" : "?"
},*/
success: function (data) {
console.log("success!");
var suggestions = [];
$.each(data, function (i, val) {
console.log("suggestion: " + val);
suggestions.push(val);
});
response(suggestions);
}
});
}
});
});
</script>
</head>
<body>
<input type="text" id="hulk" />
</body>
</html>
I am no expert when it comes to coding (mainly use php) and would appreciate any help to make this work :)
Thanks in advance!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
</head>
<body>
<select id="select-state" placeholder="Pick a state...">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
</select>
</body>
</html>
<script>
$(document).ready(function () {
$('select').selectize({sortField: 'text'});});</script>

Retrieve the districts from database using PostgreSQL

I want to retrieve districts and state from the database, and also to populate second dropdown list based on first dropdown list. In my code below the values are inserted directly:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="C:\Program Files\BitNami WAPPStack\apache2\htdocs \Prj\Online\jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var options = $('#test2 option');
$('#test1').on('change', function(e) {
$('#test2').append(options);
if ($(this).val() != 'Select') {
$('#test2 option[value!=' + $(this).val() + ']').remove();
} else {
$('#test2').val('Select');
}
});
});
</script>
<form name="form1" method="post" action="fid1.html">
<select name="test1" id="test1">
<option value="Select">Select</option>
<option value="a">TamilNadu</option>
<option value="b">Kerala</option>
<option value="c">Andhra</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
<option value="a">Chennai</option>
<option value="a">Trichy</option>
<option value="a">Madurai</option>
<option value="b">Trivandram</option>
<option value="b">Cochin</option>
<option value="b">Azhapuzha</option>
<option value="c">Hyderabad</option>
</select>
</form>
</head>
</html>
for that purpose you should use Ajax call on your first drop box .
Ajax is a server side tools to fetch data from database.
Create a ajax function, for example get_country()
$(function() {
$('#test1').change( function() {
var val = $(this).val();
$.ajax({
url: 'findState.php',
dataType: 'html',
data: { country : val },
success: function(data) {
$('#state').html( data );
}
});
}
else {
$('#state').val('').hide();
$('#othstate').show();
}
});
});
now do your database query on findstate.php and use state div to show particuler state list.

redirect to a specific page in php by getting data from 3 dropdown lists

I want redirect to a specific page in php by getting data from 3(multiple) drop-down lists.
drop-down lists options contains the value from database.
you can create redirection with javascript
<select name="abc" onchange="redirect(this.value)">
<!-- your options here -->
</select>
<script type="text/javascript">
function redirect(value){
window.location.href = "http://www.yourdomain.com/"+value;
}
</script>
or you can try jquery.
<select name="abc" id="abc">
<!-- your options here -->
</select>
<script type="text/javascript">
$(document).ready(function(){
$("#abc").change(function(){
window.location.href = $(this).val();
});
});
</script>
You can use jQuery change event, as example:
<select class="target" id="drop1">
<option value="URL_A">Option 1</option>
<option value="URL_B">Option 2</option>
</select>
<select class="target" id="drop2">
<option value="URL_C">Option 1</option>
<option value="URL_D">Option 2</option>
</select>
<select class="target" id="drop3">
<option value="URL_E">Option 1</option>
<option value="URL_F">Option 2</option>
</select>
<script>
$('.target').change(function() {
var id = $(this).attr('id');
window.location = $("#" + id).val();
});
</script>
I have also made example here http://jsfiddle.net/s2hLH/
Just take the values of your submitted form using $_POST and write a condition for decision making and redirect your page using header() function

Categories