I have php search filter page in which i used different fields..One of them is Age of youngest driver field which have 2 values like 21-24 and 25+ ..Basically i only want to keep the selected values in the select box even after search so user know what he searched for ..What happen now when i select 25+ from the field and click on search it goes back to 21-24 . But As page is connected top database so it picks values from database which i enter like the database screenshot below Please check and let me know if it have any solution
<select class="half" id="form_frame" name="" onsubmit="getData(this);"/>
<option id="value1" value="21-24" selected="selected">21-24</option>
<option id="value2" value="25+">25+</option>
</select>
When i slect all values from the field and selct 25+ from driver age field then url is
http://localhost/Vehicle2/?car_type=0&pickup=0&return=0&residence_two=International&driver_age=25%2B&passengers=No.+of+Passengers&search=
http://localhost/Vehicle2/?car_type=0&pickup=0&return=0&residence_two=International&driver_age=21-24&passengers=No.+of+Passengers&search=
I want driverage=21-24 instead of driver_age
Apply onchange event in javascript like as follows if you are using jquery
jQuery(function () {
jQuery("#form_frame").change(function () {
var id = jQuery(this).val();;
location.href = "http://localhost/php-page/option"+id+"="+id
})
})
Simple use change event handler for selectbox
$(document).on('change','#form_frame',function(){
//window.location.href="http://localhost/php-//page/option"+$(this).//val()+"="$(this).val();
console.log("http://localhost/phppage/option"+$(this).val()+"="+$(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="half" id="form_frame" name="">
<option value="10" selected="selected">10</option>
<option value="11">11</option>
</select>
Related
Im working on a small web application that follows a basic MVC pattern. currently i have data being pulled from a database into an array and im echoing out that value into one textbox (for now)
<input type="text" name="txtGasConRes" id="gasConRes" value="<?php echo $typical; ?>" disabled/>
The $typical value is being retrieved from my Model class into my Controller class and then echoed into the textbox for gas. I have a very similar textbox for Electricity.
My dropdown is as follows:
<select name="heatingType" id="heatingType" required>
<option value="" disabled selected>Select Your Option</option>
<option value = "Gas">Gas</option>
<option value = "Electricity">Electricity</option>
<option value = "Other">Other</option>
</select>
I was wondering if theres a way to determine where to echo the $typical value. So for example, If the user selected Gas as their heating type, then once the form was submitted it, the value would appear in the Gas textbox. If the user selected Electricity from the dropdown then the value would be echoed out into the Electricity textbox.
Any information will be appreciated.
Thanks!
This is definitely a job for JavaScript or jQuery if you prefer. You need to setup a handler to detect a change event on the select input. Once the user selects a value, then you can update the text field with text based on what the user has selected.
Not tested but something like this should work.
var select = document.getElementById('heatingType');
function updateTextField(selectedValue) {
switch(selectedValue){
case 'Gas':
return 'some text that you want in the text field';
break;
// etc.
}
}
select.addEventListener('change', function(){
var selectedValue = this.value,
textField = document.getElementById('gasConRes');
textField.value = updateTextField(selectedValue);
});
Create javascript function and put function in select box onchange event.(following code is working)
<script>
function heatingType(obj){
alert(obj.options[obj.selectedIndex].value); //if you want to show in alart
//or put in a variable
$x=obj.options[obj.selectedIndex].value;
}
</script>
<select name="heatingType" id="heatingType" onChange="heatingType(this)" required>
<option value="" disabled selected>Select Your Option</option>
<option value = "Gas">Gas</option>
<option value = "Electricity">Electricity</option>
<option value = "Other">Other</option>
</select>
I'm having hard time, thinking out how can I make a PHP dropdown search for a real estate website.
So I have made the MYSQL cities and properties but I don't know how to make the categories and when you search like a Mobile Phone to come another dropdown menu and to select the phone model and to display the results in another page.
the cities list: http://prikachi.com/images.php?images/747/7206747u.jpg
the property type: http://prikachi.com/images/776/7206776v.jpg
p.s. sorry but I could post it like codes..
Use Ajax with PHP by onchange event.
as:
<select id='drpdwn1' onchange='getdata(this.value)'>
<option value='-1'>Please Select</option>
<option value='1'>Example1</option>
<option value='2'>Example2</option>
</select>
<select id='drpdwn2' onchange='getdata(this.value)'>
<option value='-1'>Please Select</option>
</select>
//
<script src="http://code.jquery.com/jquery-1.11.3.js" ></script>
<script>
function getdata(value){
jQuery("#drpdwn2").html("<option>Some Option</option>");
}
function getdatabyAjax(value){
$.post('URL_here',{param:value},function(data){
jQuery("#drpdwn2").html(data);
});
}
</script>
//
when user select example1, javascript getdata() will be called and by ajax, value will be redirected to drpdwn2.
I'm trying to create a drop-down list with four options such that if I select the 4th option, I want a text box created so that I can get the value typed in that box using "$_GET"
Something like this;
<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>
And if the 4th one is selected, a box should appear like this;
<input type="text" name="firstname">
Edit;
My current code;
<script>
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='sortby']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "byDefindex"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
</script>
<form action="<?php $_PHP_SELF ?>" method="GET">
Select:
<br />
<select name="sortby">
<option value="playHours">Play Hours</option>
<option value="lastLogin">Last Login</option>
<option value="byDefindex">By Defindex</option>
</select>
<br />
<input type="submit" />
</form>
If your 4th option is this:
<option value="value4">Option 4</option>
You can use jQuery to display the field.
Put your field in a <div>
<div id="field"><input type="text" name="firstname"></div>
Now,
<script type="text/javascript">
$(document).ready(function(){
$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
This is usually done via javascript; something like this (by using popular JavaScript library, jQuery) :
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='value']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "value4"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
Hope that helps. You can find more here jQuery site
I'm not certain this is what you're asking, but it seems you're wanting to add new lines to your select list?
I often do something similar to this for adding new options to lists. The first option would be 'add a new record', like this:
<select name="value">
<option value="-1">Add New Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
Note that the value for "add new" is -1... you could put anything here, but it should be something that would never show up in the other options, so your javascript knows what to do when it is selected.
Add a 'onchange' to the select box like this:
<select name="value" onchange="if(this.value == -1) addOption(this);">
Note that if the selected option is -1, then a javascript function is called. It references itself (this), so that your function knows who called it.
Then create a function that allows adding a new option:
function addOption(theSelectElement){
// create a text box, underneath the select box:
var newInput=document.createElement('input');
newInput.type='text';
theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}
You'll want to add more code to this function so that the new text field has a name and perhaps an ID.
Hope this helps, or at least points you in the right direction.
I'm implimenting a user registrations form for a college..There I need to calculate the fees and show it to the user and the same time need to insert to a database..
I have used a list box for like this
<select name="subject" id="select2"> ***(value=fees for the subject)
<option value="100">Arts</option>
<option value="150">English</option>
calculation is OK with the values wich are given(I used javascript calculation for that)
Now I want to insert the subject to database
ex:
INSERT INTO user(name, email, subject)
VALUES ('$_POST[name]','$_POST[email]','$_POST[subject]')");
I want to add the subject which selected to be add to database subject field as English not the fees.
I hope you can understand what I'm telling.Please Help
Thank You
Ideally you should use the labels as values like:
<select name="subject">
<option value="Arts">Arts</option>
<option value="English">English</option>
If for any reason you want to post both label and fee you can use hidden variables and JavaScript like:
<select name="subject_fee" id="subject_fee" onchange="populate_subject_name();">
<option value="100">Arts</option>
<option value="150">English</option>
</select>
<input type="hidden" name="subject_name" id="subject_name" value="">
<script type="text/javascript">
function populate_subject_name() {
var f = document.getElementById("subject_fee");
var n = document.getElementById("subject_name");
n.value = f.options[f.selectedIndex].text;
}
</script>
By the way I'd still recommend the first approach. There are other ways to calculate the fee -- just improvise. See this and this for one possibility.
This would require the server-side knowing the text of the SELECT element, as only the selected value is posted back.
It's possible in ASP.NET, as the SELECT element is know server-side. However I'm not sure if this in the case in PHP.
You have to add handle onsubmit event of form and a hidden field to preserve the selected text of list item.
<script type="text/javascript">
function submitIt()
{
var list=document.getElementById("select2");
var item=list.item(list.selectedIndex);
document.getElementById("subjectTest").value=item.text;
return true;
}
</script>
<form method="post" action="your_page.php" onsubmit="return submitIt()">
<input type="hidden" id="subjectTest" name="subjectText" />
<select name="subject" id="select2"> ***(value=fees for the subject)
<option value="100">Arts</option>
<option value="150">English</option>
<input type="submit" name="cmd" value="Submit"/>
</form>
In php, when you populate your list, keep in a map the value=>label mapping and get back the right value like :
$arr = array(100 => "Arts", 150 => "English");
echo $arr[$_POST[subject]]; //if $_POST[subject]==100, return "Arts"
Otherwise, in javascript, you can get it with
var index=document.getElementById("select2").selectedIndex;
document.getElementById("select2").options[index].text;
Then you can store it in an hidden input text...
Warning :
Don't insert directly the values in the sql request !
Be carful with injection SQL
Hope this help you...
Is there a better way to do this jquery code?
Currently I have to use PHP to insert the starting position of the jquery code.
The code is for a country/state list.
If a user picks USA then a state dropdown list is below it, if any other country is selected, then it will show a different text input box and hide the dropdown list.
Now if a user has a country saved into the database already and they are on a page to edit this value, then I have to use PHP to show which should be shown first, either the USA states or the state input.
When a user signs up, by default the USA state list is shown, only if they choose a non usa country if the state list changed to a state input instead.
Hope I made sense. the ultimate goal is to somehow make it completely javascript/jquery and not rely on PHP to set anything
country dropdown list
<select name="country" id="country" class="textarealong signup_good"/>
<option value=1001>Choose a Country</option>
<option value=238>Zimbabwe</option>
...
</select>
USA state dropdown list
<select name="usstate" id="usstate" class="textarealong signup_good"/>
<option value=1001>Choose a State</option>
<option value=238>Florida</option>
...
</select>
NON-USA state INPUT box
<input type="text" id="othstate" name="othstate" id="othstate" value="" class="textarealong signup_good" maxlength="100">
<?PHP
//fix jquery country/state list based on there current saved country/state
if($_SESSION['member_info']['country'] == 224){
//$jquerycountry = "$('#othstate').hide().attr(\"disabled\", \"disabled\");";
$jquerycountry = "$('#othstate').hide().val('');";
}else{
$jquerycountry = "$('#usstate').hide().attr(\"disabled\", \"disabled\");";
}
?>
<script>
$(document).ready(function() {
locationlist();
});
function locationlist() {
<?PHP echo $jquerycountry; // includes country jquery code from above ?>
$('#country').change(function () {
var val = $(this).val();
if (val == 224) {
$('#usstate').val('').show().removeAttr("disabled");
$('#othstate').hide().val('');
} else {
$('#usstate').val('').hide().attr("disabled", "disabled");
$('#othstate').show().removeAttr("disabled");
}
});
}
</script>
Maybe this could be a fine solution for you:
HTML selection and input fields:
<select name="country" id="country" class="textarealong signup_good"/>
<option value=1001>Choose a Country</option>
<option value=238>Zimbabwe</option>
<option value=239>Rwanda</option>
</select>
USA state dropdown list
<select name="usstate" id="usstate" class="textarealong signup_good"/>
<option value=1001>Choose a State</option>
<option value=238>Florida</option>
</select>
<input id="otherstate"/>
Then the jQuery part with some 'ready'-magic: hide the otherstate field and trigger the change event on loading like Greg mentioned already. This makes sure, that if a country was already selected on page load the right form field will be selected:
<script type="text/javascript">
$(document).ready(function () {
$("#otherstate").hide();
$("#country").trigger("change");
});
$("#country").change(function () {
if ($("#country").val() != '1001') {
$("#usstate").hide();
$("#otherstate").show();
} else {
$("#usstate").show();
$("#otherstate").hide();
}
});
</script>
Hopes this will help you! ;)
Could you just do this in ready()?
loctionlist();
$('#country').trigger('change');
(Coming at it from a different angle entirely:)
With all the options/possibilities you're describing here, it might be wise to scrap all the drop-downs and just use an autocomplete text field.