Edit: Thanks for the help everyone, I've changed the topic since I
discovered that the problem was more specific to PHP.
I'm new to jQuery and Javascript and I'm creating a page with a search function that requires the user to enter a region to retrieve information that is region-specific. Within a form, I have included a drop-down menu:
<select name="region" id="region">
<option selected="selected" value="na">NA</option>
<option value="euw">EUW</option>
<option value="eune">EUNE</option>
<option value="tr">TR</option>
<option value="lan">LAN</option>
<option value="las">LAS</option>
<option value="br">BR</option>
<option value="ru">RU</option>
<option value="oce">OCE</option>
<option value="kr">KR</option>
</select>
Even if I try to select another region other than the default (NA), when the form is submitted, the value for the $_POST region variable always remains as 'na'.
Also, I have a script on form submit:
<script>
$(function () {
$('#myForm').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'redirect.php',
data: $('form').serialize(),
success: function () {
location.reload();
}
});
});
});
</script>
My form:
<form id="myForm">
<li id="search">
<input type="text" name="name" id="name" placeholder="Search Word"/>
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
<select name="region" id="region">
<option selected="selected" value="na">NA</option>
<option value="euw">EUW</option>
<option value="eune">EUNE</option>
<option value="tr">TR</option>
<option value="lan">LAN</option>
<option value="las">LAS</option>
<option value="br">BR</option>
<option value="ru">RU</option>
<option value="oce">OCE</option>
<option value="kr">KR</option>
</select>
</li>
</form>
redirect.php
<?php
session_start();
if (isset($_POST['name']) && isset($_POST['region'])) {
$_SESSION['name'] = $_POST['name'];
$_SESSION['region'] = $_POST['region'];
}
if (isset($_POST['name'])) {
$_SESSION['name'] = $_POST['name'];
$_POST['region'] = 'na'; // I think this is where the problem persists
$_SESSION['region'] = $_POST['region'];
}
?>
It seems like $_POST['region'] is not set.
I've included session_start in both files.
Any help would be appreciated. Thank you.
what I usually do is this:
$(document).on("change",function(){
if($("#region").val()!="na"){
var region=$("#region").val();
alert(region);
}
});
with this you will be able to check if the value is actually changing, and now you can use that variable wherever you want.
And it will work for everytime the value changes until you submit
Hope this helps!
Try this:
var $region = $('#region');
$region.val([]);//now $('#region').val() return undefined
//exacttext version
region.find('option').filter(function (index, elem) { return $(this).html() === textSearchValue; }).prop("selected",true);
//containstext version
region.find('option').filter(function (index, elem) { return $(this).html().indexOf(textSearchValue)>0; }).prop("selected",true);
PS: always cache the elements in a $variable
OP changed the topic of the question, going to leave my code here just for reference, but I'm fully aware it's not an answer anymore.
I wrote a quick CodePen to test what was going on in your problem, I didn't check with a POST request because I don't have your code, but with jQuery all I had to do was remove the selected atribute from NA:
http://codepen.io/leofontes/pen/ZBGZZZ
<select name="region" id="region">
<option value="na">NA</option>
<option value="euw">EUW</option>
<option value="eune">EUNE</option>
<option value="tr">TR</option>
<option value="lan">LAN</option>
<option value="las">LAS</option>
<option value="br">BR</option>
<option value="ru">RU</option>
<option value="oce">OCE</option>
<option value="kr">KR</option>
</select>
<button id="button">Something</button>
And JS:
$(document).ready(function() {
$("#button").click(function() {
alert($('#region').val());
});
});
Just click the button to see which option was selected, it works.. Not 100% sure if this is what your problem revolved around but I'm pretty sure it was that simple.
Hope this is what you were looking for, if not let me know so that I can help you out some more ;)
Ok so I found out what I had done wrong...
It was because of a small error in ordering of conditionals in redirect.php
if (isset($_POST['name'])) {
$_SESSION['name'] = $_POST['name'];
$_POST['region'] = 'na'; // Where I thought the problem persisted
$_SESSION['region'] = $_POST['region'];
}
This part of the code will always run even after the $_POST variables are set.
My intention was for it to run when $_POST for region was not set.
As a result, I changed it to the following and it worked.
if (!isset($_POST['region'])) {
$_SESSION['name'] = $_POST['name'];
$_POST['region'] = 'na';
$_SESSION['region'] = $_POST['region'];
}
Thanks again everyone!
Related
I use select as below:
<select name="account_type" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
Now I want to catch those option values using php variable, and here is the important part: I will have an input field, and based on the values I want to enable/disable that input filed.
How can I do that?
Using jQuery give your select an id like below
<select name="account_type" id="account" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
<!--input to be disabled -->
<input type="text" id="disable">
jQuery
$('#account').on('change', function(){
if($(this).val() === '1') {
$("#disable").prop('disabled', true);
//you can also send data to PHP here using AJAX
//var data = {one: $(this).val()};
//$.post( "test.php", data, function( data ) {
//$( ".result" ).html( data );
//});
}else if($(this).val() === '2') {
//code here
}
//check for other values
});
example
You could do this with jQuery. If you don't know jQuery, check this out: jQuery.com
After you "installed" jQuery, you can use this in your js-File. I hope that you know how to create and use a js-File.
The next thing is to implement a good method for your select-button.
This could look like this in your js-File:
$('#my-select').change(function(){ // "#my-select" is the ID of your select. You need to implement a ID.
//do stuff here, eg.
if ($(this).val() == '5') { //check the selected option etc.
$("input").prop('disabled', true);
} else {
$("input").prop('disabled', false);
}
});
Here's a jsFiddle.
Hope this helps you.
html code
<select>
<option data-id="1">1</option>
<option data-id="2">2</option>
</select>
JQuery code
$(document).ready(function(){
$("select").change(function(){
var display= $("select").val();
if(display == 1){
$("select").attr("disabled", 'disabled');
}
});
});
I am not sure what you want exactly.check out this may be it will be helpful for you JSFiddle
Can you help me on creating a simple php script using select menu with if and else statement?
I'm trying to create select menu that when i click the menu, it will redirect to another page.
Im really dumb in programming. I will be very grateful with your help. I'm hoping my statement is clear. Thanks in advance...
<td width="421">
<label>
<select name="journal" id="journal">
<option value="IN PROGRESS">IN PROGRESS</option>
<option value="PUBLISHED"></option>
<option value="NOT APPLICABLE">NOT APPLICABLE</option>
</select>
</label>
</td>
You cannot use php for this unless you use a form to submit the select value to a php script, use javascript or jquery to achieve what you want, here's a jquery solution:
jQuery(function () {
$("#journal").change(function () {
selectValue = $(this).val();
if(selectValue == "IN PROGRESS"){
location.href = "http://somesite.com";
}else if( selectValue == "PUBLISHED"){
location.href = "http://othersite.com";
}else if( selectValue == "NOT APPLICABLE"){
location.href = "http://anothersite.com";
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td width="421">
<label>
<select name="journal" id="journal">
<option value="">Choose Status</option>
<option value="IN PROGRESS">IN PROGRESS</option>
<option value="PUBLISHED">PUBLISHED</option>
<option value="NOT APPLICABLE">NOT APPLICABLE</option>
</select>
</label>
</td>
I have custom registration system based on url parameters.
Step1: I have some buttons and when you click one of the buttons it will pass value to next page, where i'm able to get value by using <?php echo $_GET['step1'];?> (this works fine)
Step2: I want to use just two select boxes (don't want to use form here) and on <a> click I want to pass that selection to url.
Here is my code:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Next
So here is what I want to pass to the next page:
http://domain/step1/step2/step3?parameterfromstep1=something&gender=male&color=red
How should I make it? Should I use php on a button click or jquery?
Thanks
<a id="next" href="http://domain/step1/step2?step1=<?php echo $_GET['step1'];?&SELECTboxVALUES>">Next</a>
use below code
$('#next').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
var gender = $('[name="gender"]').val();
var color = $('[name="color"]').val();
if( gender && color ){
window.location.href = url+'?&'+gender+color;
}
});
Well, this is maybe not the best or most beautiful approuch but i think the code below will work for you:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Next
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).on('click', '#nextButton',function( event ) {
// Stop default action
event.preventDefault();
window.location.href = $(this).attr('href') + '&gender='+$('select[name="gender"] option:selected').text()
+ '&color='+$('select[name="color"] option:selected').text();
});
</script>
I want to use PHP to change a div's information based on what option is selected. Below is my HTML & PHP. I don't think I'm using the right operator or syntax in the if statement. I basically want to pull information from a table in my database based on the option selected. Right now I do not have that in my code because it is irrelevant at this point. Any help is appreciated.
<select id=\"numberofstaff\">
<option class=\"staffselection\" value=\"\">--Select--</option>
<option class=\"staffselection\" value=\"smalljobsite\">1-3 staff</option>
<option class=\"staffselection\" value=\"mediumjobsite\">4-7 staff</option>
<option class=\"staffselection\" value=\"largejobsite\">8+ staff</option>
</select>
<?php
$selectOption = $_POST['numberofstaff'];
echo "<div id='jobsite_price'><p>";
if ($selectOption == 'smalljobsite'){
echo "smalljobsite";
};
if ($selectOption == 'mediumjobsite'){
echo "mediumjobsite";
};
if ($selectOption == 'largejobsite'){
echo "largejobsite";
};
echo "</p></div>";
?>
You need form tags and a POST method, while giving the select a name attribute. You can't rely on an id alone, not without JS/Ajax anyway.
Sidenote: I removed the \ from the escaped quotes, since they're not in an echo statement/PHP in your posted code. This would throw an error/warning such as "unquoted attribute". If you are using it inside an echo'd statement, then you'll need to add those back in.
FYI: Escaping quotes \" is only done when inside an echo/PHP.
Additional note:
If you want to run seperate SQL statements, it's rather simple. Where the echos are and where I have in a comment form // RUN SQL HERE, you can simply include a file in there with your SQL query. I do it myself and it cuts down on a lot of code and is more manageable that way.
HTML/PHP:
<form method="post" action="">
<select id="numberofstaff" name="numberofstaff">
<option class="staffselection" value="">--Select--</option>
<option class="staffselection" value="smalljobsite">1-3 staff</option>
<option class="staffselection" value="mediumjobsite">4-7 staff</option>
<option class="staffselection" value="largejobsite">8+ staff</option>
</select>
<input type="submit" name="submit" value="Submit">
</form>
<?php
if(isset($_POST['submit'])){
$selectOption = $_POST['numberofstaff'];
echo "<div id='jobsite_price'><p>";
if ($selectOption == 'smalljobsite'){
// RUN SQL HERE
echo "smalljobsite";
}
if ($selectOption == 'mediumjobsite'){
// RUN SQL HERE
echo "mediumjobsite";
}
if ($selectOption == 'largejobsite'){
// RUN SQL HERE
echo "largejobsite";
}
echo "</p></div>";
} // brace for if(isset($_POST['submit']))
?>
Foonotes:
To include files, you can use include():
// Include your SQL query
include('query_file.php');
where you see // RUN SQL HERE in commented code.
Another option is to use Ajax.
Here are a few links:
http://www.w3resource.com/ajax/working-with-PHP-and-MySQL.php
http://www.tutorialspoint.com/php/php_and_ajax.htm
How to use AJAX to perform a MYSQLI query (prepared statement)
If you're just using php to check the selected value, you can use jquery for that, i.e.:
$("select").on('change', function() {
$("#jobsite_price").html("<p>"+$(this).val()+"</p>")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="numberofstaff">
<option class="staffselection" value="">--Select--</option>
<option class="staffselection" value="smalljobsite">1-3 staff</option>
<option class="staffselection" value="mediumjobsite">4-7 staff</option>
<option class="staffselection" value="largejobsite">8+ staff</option>
</select>
<div id='jobsite_price'></div>
You can use pure javascript to do this.
window.addEventListener('load', function(){
var el = document.querySelector("#numberofstaff");
el.addEventListener('change', function(){
var data = { numberofstaff : el.value };
var request = new XMLHttpRequest();
request.open('POST', 'YourUrl.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
request.onload = function(result){
document.querySelector("#jobsite_price").innerHTML = result.responseText;
}
});
});
I'm new with this JQuery Mobile thing. And the first problem i met in this is i can't set "selected" attr on multiple select option to "false" / unselected in JQuery mobile using Javascript.
A documentation i found told me to refreshing a select so i can manipulate it via javascript here in the bottom of it's page:
http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-selects.html
I've done it. But i don't know if i did it wrong or what. Here is my code :
<script type="text/javascript">
function SelectAll(){
var select=document.getElementById('sfruit');
if (select.options[1].selected == true){
alert('All Selected');
for (x in select.options){
if(x > 1){
if (select.options[x].selected == true){
alert(select.options[x].value+' selected');
RefreshSelect();
select.options[x].selected == false;
}else{
alert(select.options[x].value+' unselected');
}
}
}
}
}
function RefreshSelect(){
var myselect = $("select#sfruit");
myselect[0].selectedIndex = 5;
myselect.selectmenu("refresh");
}
</script>
<select onChange="SelectAll()" data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
What i actually want is when i select "All" option, other option that have been selected become unselected.
I'll attaching the image if u all still doesn't understand what i mean, later, it's already late here.
Thanks guys. And please help me. .. :)
I think this is what you want
$(window).load(function(){
$("select#sfruit").change(function () {
$("select#sfruit option:selected").each(function (obj) {
if($(this).index()==1){
alert('All Selected');
$("select#sfruit option:selected").removeAttr("selected");
$("select#sfruit option:eq(1)").attr("selected","");
}
});
});
});
<select data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>