I am using jquery mobile's multiple select: custom to try and help filter data based on the user's selection(s).
I can see that jquery mobile already updates text ON SELECT because selecting an option automatically changes the text in the select menu.
Is there a way to tap into that, so that I can send the value of the selected options to a php page through AJAX and return results via JSON?
<form id="target" method="post">
<div data-role="fieldcontain">
<label for="select-choice-attunement" class="select ui-hidden-accessible">Filter Attunement</label>
<select data-mini="true" name="select-choice-attunement" id="select-choice-attunement" multiple="multiple" data-native-menu="false">
<option>Filter by Element</option>
<option value='1'>fire</option>
<option value='2'>water</option>
<option value='3'>earth</option>
<option value='4'>light</option>
<option value='5'>darkness</option>
</select>
</div>
</form>
To make it a bit more clear.
From the list above, you can see there are only 5 choices. The user might finish after 1, or all 5. The results need to mirror what they chose, preferably as fast as possible (which is why I would like to hook to jquery mobiles update). So if the choose 'fire' it will immediately filter via the called php function and returned json list, the necessary list items.
Lets imagine that I wanted to update the following with a new array of list items:
View:
<div id='change_with_ajax'>
<ul>
<?php
foreach ($ajaxretrievedarray as $array)
{
echo "<li>".$array['name']."</li>";
} ?>
</ul>
</div>
You may check the below example.
When the change event is triggered, the selected values are displayed inside an alert box.
<!DOCTYPE html>
<html>
<head>
<title>Select Choice</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('change', '#select-choice-attunement', function(e){
alert($(this).val());
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Select Choice</h1>
</div>
<!-- /content -->
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-attunement" class="select ui-hidden-accessible">Filter Attunement</label>
<select data-mini="true" name="select-choice-attunement" id="select-choice-attunement" multiple="multiple" data-native-menu="false">
<option>Filter by Element</option>
<option value='1'>fire</option>
<option value='2'>water</option>
<option value='3'>earth</option>
<option value='4'>light</option>
<option value='5'>darkness</option>
</select>
</div>
</div>
</div>
</body>
</html>
I hope this helps.
Related
i want to set value in bootstrap modal dropdown using jquery, that dropdown is also populated by mysql database, and when i select the any value from data table, model open and that selected value should already placed is modal drop down.picking up the value by jquery closest() function
this is where im getting the value of b_name
<td class="p_brand_name">Apple</td>
here is my Modal Code.
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">Brand</label>
<select class="form-control" name="p_brand_name" id="p_brand_name">
<option>Select Brand</option>
<option value="1">Apple</option>
<option value="2">Sony</option>
<option value="3">huawei</option>
<option value="4">Toshiba</option>
<option value="5">Dell</option>
<option value="6">Hp</option>
<option value="7">Samsung</option>
<option value="8">LG</option>
<option value="9">Aspire</option>
<option value="10">Lenovo</option>
<option value="11">Oppo</option>
<option value="14">Vivo</option>
<option value="16">Dawlance</option>
</select>
</div>
</div>
Here is my jquery code
var $row = $(this).closest('tr');
var b_name = $row.find('.p_brand_name').text(); // e.g it has value apple (b_name = apple)
console.log(p_id,b_name);
// $('select option[value='+b_name+']').prop({defaultSelected: true});
// $('#p_brand_name').val(b_name).attr('selected', 'selected');
// $('#p_sct_name').find($row.find('.p_sct_name').text()).attr('selected', 'selected');
// $('#p_color_name select').attr('value',$row.find('.p_color_name').text());
// $("#p_brand_name").val("b_name");
// $("#p_brand_name").get(0).selectedIndex = b_name;
// $("#p_brand_name").val(b_name).change();
// $("#p_brand_name")[b_name].selectedIndex=b_name;
// $('#p_brand_name').val(b_name).attr("selected", "selected");
// $('#p_brand_name').val(b_name).trigger("chosen:updated");
i have tried these all but none of this work
first of all i have demonstrated here how to get the option value and text on the change event of the select box:
$(document).ready( function(){
$('.form-control').on('change', function() {
let option_value = $(this).val();
let option_text = $(this).children("option:selected").text();
console.log(option_value, option_text);
});
});
Now, if i understand you correct, i hope, you want to file the select box like you have selected the option your self, well: in PHP you can do this like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<td class="p_brand_name">Apple</td>
<?php
$select_box_options = ['1' => 'Apple', '2' => 'Sony', '3' => 'huawei'];
?>
<form>
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">Brand</label>
<select class="form-control" name="p_brand_name" id="p_brand_name">
<option>Select Brand</option>
<?php
foreach ($select_box_options as $value => $text) {
$selected = ($text === 'Apple') ? 'selected' : '';
?>
<option value="<?=$value?>" <?=$selected?>><?=$text?></option>
<?php } ?>
</select>
</div>
</div>
</form>
</body>
</html>
and in JQuery to fire event:
$('.form-control').val('2').trigger('change');
This question already has an answer here:
javascript waiting php to complete function and refresh page
(1 answer)
Closed 4 years ago.
<div class="form-group" style="text-align: right;">
<label for="city">Select No Rows Per Page</label>
<select class="form-control" name="selectrows" style="width: 70px; text-align: right;">
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
index.php
I want to refresh index.php on select option.
If you really want to do it this way, you somehow need to get the selected option to the "reloaded" page. You could do this as a GET parameter in the URL. So add this:
<script>
document.addEventListener('DOMContentLoaded', () => {
document.getElementsByTagName('select')[0].addEventListener('change', (e) => {
location = 'index.php?selectrows=' + e.target.options[e.target.selectedIndex].value;
});
});
</script>
In the PHP script you can then access the selected value using $_GET['selectrows']
Try the following code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function doReload(catid){
document.location = 'samepage.php?catid=' + catid;
/* But if you want to submit the form just comment above line and uncomment following lines*/
//document.frm1.action = 'samepage.php';
//document.frm1.method = 'post';
//document.frm1.submit();
}
</script>
</head>
<body>
<form name="frm1" id="frm1">
<select name="catid" id="catid" onChange="doReload(this.value);">
<option value="" selected="selected">---All Category---</option>
<option value="1">Category One</option>
<option value="2">Category Two</option>
</select>
</form>
</body>
</html>
I have 3 PHP Variable values with me which i want to display depending on the HTML option selected from the drop down menu without refreshing the page.
<p>
<label for="package" class="formlbl">I want to Enroll In:</label>
<select name="package" id="package">
<option selected="selected" value=""></option>
<option value="full_package">Complete Package</option>
<option value="training">Only Training</option>
<option value="counselling">Only Counselling</option>
</select>
</p>
What i want is when he selects full package it should echo variable no 1, when he selects training it should echo variable no 2 and so on without refreshing the page.
Please tell me what i should do. The values and variable are working in the code.
Since PHP is only a server-side language once the response is sent to the client, php can no longer change anything on the page without a refresh.
You will need to use javascript in order to have content that changes without reloading a new page (also called dynamic content). You can do this really easily with a framework called jquery.
Add jquery to your webpage with this html line:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
and then use this html template for your dropdown:
<!-- make each item in your dropdown an <a> with an ID -->
<ul class="dropdown">
<li onclick="toggleResponse('comp')">Complete </li>
<li onclick="toggleResponse('pack')">Package Only </li>
<li onclick="toggleResponse('train')">Training Only </li>
<li onclick="toggleResponse('couns')">Counselling </li>
<ul>
<!-- give every response the same class, and individual IDs -->
<span class="response" id="comp"><?php echo var1 ?></span>
<span class="response" id="pack"><?php echo var2 ?></span>
<span class="response" id="train"><?php echo var3 ?></span>
<span class="response" id="couns"><?php echo var4 ?></span>
<style>
// let all the responses be hidden initially
.response {
display: none;
}
</style>
<script type="text/javascript">
function toggleResponse (id) {
// hide any responses that might be showing
$('.response').hide();
// show the response for this option
$('#' + id).show();
}
</script>
This is probably the quickest and easiest way to do it.
Fiddle example: https://jsfiddle.net/te36zy18/
HTML
<p>
<label for="package" class="formlbl">I want to Enroll In:</label>
<select name="package" id="package">
<option selected="selected" value=""></option>
<option value="full_package">Complete Package</option>
<option value="training">Only Training</option>
<option value="counselling">Only Counselling</option>
</select>
</p>
<div id="full_package" class="package"><?php echo full_package;?></div>
<div id="training" class="package"><?php echo training;?></div>
<div id="counselling" class="package"><?php echo counselling;?></div>
jQuery
$("#package").on("change", function(){
var package = $(this).val();
$(".package").hide()
$("#" + package).show();
});
CSS
.package {display: none'}
I am busy reading: PHP Web Services, 2nd edition
And I am on chapter 2 whereby I am trying to make a GET request to a PHP file that is a simple search form, the GET request code is as follows and uses PHP's stream handling with contexts to perform the request:
<?php
$url = "http://localhost:63344/HTTP Verbs/SimpleSearchForm.php";
$data = [
"category" => "technology",
"rows" => 20
];
$get_addr = $url . '?' . http_build_query($data);
$page = file_get_contents($get_addr);
echo $page;
The search form is as follows:
<html>
<head>
<title>GET Form</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<div style="margin: 20px">
<h1> A GET Form</h1>
<?php if (empty($_GET)): ?>
<form name="search" method="get" class="pure-form pure-form-stacked">
Category:
<select name="category">
<option value="entertainment">Entertainment</option>
<option value="sport">Sport</option>
<option value="technology">Technology</option>
</select>
Rows per page: <select name="rows">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
<input type="submit" value="Search" class="pure-button pure-button-primary"/>
</form>
<?php else: ?>
<p>Wonderfully filtered search results</p>
<?php endif; ?>
</div>
</body>
</html>
These are examples straight from the book and I am trying to run it using PhpStorm's built-in server. I can open the search form as expected however the built-in server just hangs when I try to make the GET request with the other script.
I was just wondering if anyone has experienced this and if so then what can I do to remedy it?
I have a drop down menu with dynamically set values from the database:
When a value is selected how could I make it load a specific view dependent on what the selected option is?
I now have it loading a specific view dependent on what option is selected:
Code:
if (isset($_REQUEST['general_options'])) {
$page = strtolower(str_replace(" ", "", $_REQUEST['general_options']));
$this->load->view( $page, $data, FALSE);
}
How could I dynamically produce a form with specific questions dependent on what question is selected?
HTML:
<label for="general_options">Quote Type: </label>
<select name="general_options" id="general_options">
<option value="Graphic Design">Graphic Design</option>
<option value="Content Management System">Content Management System</option>
<option value="Shopping Cart">Shopping Cart</option>
<option value="E-Mail Marketing">E-Mail Marketing</option>
</select>
I think php will be overkill for this. I have used jquery for this. you can find the jsfiddle here
<label for="general_options">Quote Type: </label>
<select name="general_options" id="general_options">
<option value="graphic">Graphic Design</option>
<option value="content">Content Management System</option>
<option value="shopping">Shopping Cart</option>
<option value="marketing">E-Mail Marketing</option>
</select><br/>
<div id="graphic" style="display:none;" class="questions">
<p>Graphic content 1</p>
<p>Graphic content 2</p>
<p>Graphic content 3</p>
</div>
<div id="content" style="display:none;" class="questions">
<p>CMS content 1</p>
<p>CMS content 2</p>
<p>CMS content 3</p>
</div>
<div id="shopping" style="display:none;" class="questions">
<p>shopping content 1</p>
<p>shopping content 2</p>
<p>shopping content 3</p>
</div>
<div id="marketing" style="display:none;" class="questions">
<p>marketing content 1</p>
<p>marketing content 2</p>
<p>marketing content 3</p>
</div>
and the jquery Code
$(document).ready(function() {
$('#general_options').change(function() {
theVal = $("#general_options").val();
$('div.questions').each(function(){
if(this.id == theVal){
$('div.questions').hide();
$('#'+this.id).show();
}
});
});
});
For the values of option tags, instead of the text, you could use the ids. Then, you could write code(server side) to query the database with the selected id, when the user had submitted the form. If you need it an interactive manner, you could use the AJAX.
In jQuery, there is get(), post() and ajax() methods. You could use one of them.