this weekend i've been trying to use this script To create dependable menus.
It consists of an sql table with three rows: "ID, Master, Name" It later grabs the entries that contain 0 as the "master" and will use the resulting data to populate the first option list
To populate the next selection lists from the database, it uses a combination of the following JS and php:
and the rest of the select lists will populate accordinly.
The problem that i'm having is that After it populates the select lists I would like to have the visitors of the website hit a seach button to perform a search based on the data collected. The problem is that when I submit the form it sends the info stored in the "master" row of the database instead of the info on "name"
I'm Getting
index.php?genre=1&fruit=37&colour=39
Instead of
index.php?genre=Male&fruit=Strawberry&colour=Red
I tried to switch '.$row['name'].' to '.$row['id'].
But that was a no go, I also tried to only use '.$row['id'].' and it just messed up with the forms. Is there anyway I can accomplish what i'm looking for so that i can send the values selected on the fields to the url?
Thanks in advanced for any help on this one.
The behavior that you mentioned is normal as submitting a form automatically sends the value, instead of the text, of the selected option. The switch that you mentioned ('.$row['name'].' to '.$row['id'].)should work fine. If it is messing up the forms, please provide more information on what you mean by messing up the forms.
Otherwise, here is a possible solution. It's not the most elegant solution and is probably best suited for simple forms that do not require further complexities but basically, generate the querystring and redirect manually. This is based on the original example that you linked to at http://www.ssdtutorials.com/tutorials/series/dependable-dropdown.html.
JS:
var formObject = {
run: function (obj) {
obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
var id = obj.attr('id');
var v = obj.val();
jQuery.getJSON('http://jquery-dependable-dropdown.ssdtutorials.com/mod/update.php', {
id: id,
value: v
}, function (data) {
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled');
} else {
obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
}
});
}
};
$(function () {
$('.update').live('change', function () {
formObject.run($(this));
});
$('#submitButton').click(function () {
window.location.href = 'test.php?gender=' + $('#gender').find(':selected').text() + '&category=' + $('#category').find(':selected').text() + '&colour=' + $('#colour').find(':selected').text();
});
});
HTML:
<div id="wrapper">
<form id="theForm" action="" method="post">
<select name="gender" id="gender" class="update">
<option value="">Select one</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="category" id="category" class="update" disabled="disabled">
<option value="">----</option>
</select>
<select name="colour" id="colour" class="update" disabled="disabled">
<option value="">----</option>
</select>
<input type="button" id="submitButton" value="submit">
</form>
http://jsfiddle.net/BUJnf/1/
Hope that helps a bit!
Related
I have the following form I want to use to filter through products on my website:
<div class="top-filter-select-container">
<form method="GET" action="" id="sort-filter-pick">
<select class="selectpicker" id="sort-filter">
<option value="popularity">Sort by Popularity</option>
<option value="ratings">Sort by Ratings</option>
<option value="newest">Sort by Newest</option>
<option value="lowest">Sort by Lowest Price</option>
</select>
</form>
</div>
I am trying to reload my page when an option is selected using jQuery form.submit() and retrieve the selected option to be used for filtering with a SQL query. I would eventually want to use this value along with other filtering values for a more complex filtering.
$(function(){
$('#sort-filter').on('change', function() {
var action = $(this).val();
$("#sort-filter-pick").attr("action", "?sort=" + action);
this.form.submit();
});
});
To test my code, I am just trying to echo isset($_GET['sort']) ? $_GET['sort'] : null;
The code works if I change form method to POST instead of GET but doesn't work with GET. On websites such as Amazon, the GET form method is used when applying filters from a select option but I also notice that the ?sort=... is added to the page URL after the form is submitted, which is not the case for me if I use GET. I was wondering what would be the right approach to do the same thing.
If you add a "name" to your form-elements you don't need to manually add the sort-criteria with jQuery.
HTML:
<div class="top-filter-select-container">
<form method="GET" action="" id="sort-filter-pick">
<select class="selectpicker" name="sort" id="sort-filter">
<option value="popularity">Sort by Popularity</option>
<option value="ratings">Sort by Ratings</option>
<option value="newest">Sort by Newest</option>
<option value="lowest">Sort by Lowest Price</option>
</select>
</form>
</div>
Javascript:
$(function(){
$('#sort-filter').on('change', function() {
this.form.submit();
});
});
Or you could just use location.href = url rather than posting the form.
In my code new value through textbox is getting added to dropdown and stored in database but the problem is that, previous dropdwn list like here say rohit,viraj etc is not getting displyed along with new inserted value. how to show all option list along with new added one? is there any perfect way to do this using array? please help...
htmlcode
`html code:
<select class="deligates1" id="deligates1" name="deligates1[]" size="1" multiple>
<option value="">--select--</option>
<option value="rohit">ROHIT</option>
<option value="viraj">VIRAJ</option>
<option value="sachin">SACHIN</option>
</select>
<span style="cursor:pointer;background-color:lightgoldenrodyellow;">Add delegates here</span><span><input type="text" id="write_dele" name="write_dele" >
<input type="button" id="add_dele" value="add"></span>
`
script code
:<script>
$(document).ready(function(){
$("#add_dele").click(function(){
var delegate = $("#write_dele").val();
$.ajax({
type:'POST',
data:'q='+delegate,
url:'add1.php',
success:function(new_delegate){
$("#deligates1").html(new_delegate);
}
});
});
});
</script>
add1.php:
<?php
$new_delegate=$_POST['q'];
$con=mysql_connect("localhost","root","");
mysql_select_db("task",$con);
echo '<option value="'.$new_delegate.'" >'.$new_delegate.'</option>';
?>
.html() Replace the entire select option with your new option
Try with this
$("#deligates1").append(new_delegate); // it will add your new option in select box
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 asked this question previously but i think i made it too complex, I want to assign a query if a value from a list is selected.
<form id="filter" name="filter" method="post" action="">
<select>
<option value="petrol">Petrol</option>
<option value="diesel">Diesel</option>
</select>
<p><input name="filter" type="button" value="Filter" /></p>
</form>
What i want to achieve is if user selects petrol the run the following query
$query = mysql_query("SELECT fuel_type from car WHERE fuel_type = 'petrol'");
<form id="filter" name="filter" method="post" action="">
<select id="college" name="fuel" onchange="changeValue();">
<option value="petrol">Petrol</option>
<option value="diesel">Diesel</option>
</select>
<p><input name="filter" type="button" value="Filter" /></p>
</form>
If you want to post the value in form submit use like this
$ctext = $_POST['fuel'];
$list = mysql_query("SELECT fuel_type from car WHERE fuel_type ='$ctext'");
$row = mysql_fetch_array($list);
//process $row
If you don't want to submit the form, you can use jquery in onchange event...
js code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function changeValue() {
var ctext = $("#college option:selected").val();
$.ajax({ url: "yourfile.php",
data: {"ctext":ctext},
type: 'post',
success: function(output) {
//display output here
}
});
}
yourfile.php
<?php
//connect to db
$ctext = $_POST['ctext'];
$list = mysql_query("SELECT fuel_type from car WHERE fuel_type ='$ctext'");
$row = mysql_fetch_array($list);
echo $row['fuel_type'];
?>
Give your select tag a name:
<select name="fuel">
<option value="petrol">Petrol</option>
<option value="diesel">Diesel</option>
</select>
Then in your PHP you can do something simple like:
<?php
if(isset($_POST['cmdFilter']))
{
echo "You selected the fuel type: " . $_POST['fuel'];
}
?>
You can also set the select to have an id instead and use JQuery to send an ajax request passing it the value by giving selecting it by $("#myIdforSelect").val()
P.S
Be sure to sanitise your input ;)
Although I would also suggest the AJAX method, I just want to make it clear that you do not HAVE to use AJAX to accomplish this.
If your filter options are not too complex or many, then you can simply do a pull for all available options for any level of the filter tree on load and hide them initially. Then, as the user drills down into each section, you show them the next one accordingly (via javscript). In the end you can just submit a regular form with all the selected form fields via GET or POST.
This can effectively save bandwidth by running less calls to the server also :)
BUT if your choice tree gets too complicated, it might be better to just run AJAX request on user interaction.
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.