I want get the value from the select name and when the value will be somthing, take some action. All value are save in pdo db.
Html: <header>Something</header>
Code:
<select name='name_of_select'>
<option value='on'>On</option>
<option value='off'>Off</option>
</select>
Ex. When the value will be set to on, hide element header. The value I getting from the db. And the value present {$option_selected_value} in smarty template.
Try this, this will be help you
$('select[name=name_of_select]').change(function(){
if($(this).val()=='on')
$('header').show();
else
$('header').hide();
});
Fiddle here
This will do what you are asking, but it relies on you adding IDs to the select and the header elements. If you're not going to be able to do that then please post some real markup and I'll fix this to suit :)
$("#selectID").on("change", function() {
if ($(this).val() == "on") {
$("#headerID").show();
} else {
$("#headerID").hide();
}
});
Related
I have a form which sends information with post method to another page. In the form I have a select box with three options, for example:
<select name="slctstate" id="slctstate">
<option value="0">aaaaa</option>
<option value="1">bbbbb</option>
<option value="2">ccccc</option>
</select>
In another page, I read the selected item with $_POST['slctstate'], but I want to read all options (key & value) in the select tag.
Can I do this?
First use a jquery function which stores all the options in a string
$(document).ready(function()
{
var myoption = '';
$('#drop_down option').each(function()
{
myoption = myoption + ',' + ($(this).val());
});
$('#hidden_text').val(myoption);
}
);
in the html use a hidden field
<input type="hidden" id="hidden_text" name="hidden_text"/>
WHen you will submit the form, catch this value with a list of options separated by (,);
On the action page, you can split the value using php explode() function
Check the fiddle
http://jsfiddle.net/1u9x5nbq/3/
No you can't without a work-around. The only value gets passed is the selected value. If you want to know all values you can use a work-around in javascript e.g.:
<select name="slctstate" id="slctstate">
<option value="0">aaaaa</option>
<option value="1">bbbbb</option>
<option value="2">ccccc</option>
</select>
//Include JQuery
<script>
$(function()
{
$('#slctstate option').each(function()
{
$('#slctstate').after('<input type="text" value="'+$(this).text()+'" name="slctstateOptions['+$(this).val()+']" style="display:none;" />');
//Where val() is the key and text() is the value.
});
});
</script>
Then you can access the values by using $_POST['slctstateOptions'].
No, you can't do that from the form. When you do submit, you send only selected value(s).
No,
The only value that is "selected" will be POSTed on Submit.
I'm trying to create a select box that refreshes its options when selected by the user, but I'm encountering a problem that I can't figure ho to solve.
Being still a beginner with jquery I've already asked an advice for the same program: Keeping selected an option in select dropdown with jquery after refresh.
Following the suggestion now it works almost completely, but I'd like the dropdown to behave exactly as a non dynamic one, keeping the selected option when opened, except for having the options list also refreshed: now it “almost” keeps the value selected (it retains it in the dropdown) but resets to the first option when the element lose focus to others in the page and I don't know how to resolve the problem. I tried to pass a variable with ajax to the php page to have it selected on refresh, but it still resets when focus is change.
The JS code:
$(document).ready(function() {
$("#UsersDiv").focusin(function() {
var UsersSelect = $('#UsersList').val();
$.get(
"userlist.php",
{ UserSelect1: UsersSelect },
function(data) {
$('#UsersList').html(data);
}
);
})
$('#UsersList').val(UsersSelect);
});
The html page:
<div name="UsersDiv" id="UsersDiv">
<select name="UsersList" id="UsersList">
<option value="User1">User1</option>
<option value="User2">User2</option>
</select>
</div>
The php file (the “users” array is in place of the sql query, both work properly):
$UserSelect1 = $_GET['UserSelect1'];
$users=array( 'User1','User2','User3','User4','User5');
echo '<select name="UsersList" id="UsersList">';
foreach($users as $list):
echo '<option value="'.$list.'" ';
if ($UserSelect1 == $list) {
echo 'selected=selected';
}
echo '>'.$list.'</option>';
endforeach;
echo '</select>';
Thanks to everyone for the answers.
$("#UsersDiv")
than you assigning this
$select=$(this) // $select is $("#UsersDiv");
and than you are trying to get val from div
UsersSelect = $select.val() // $select.val() is undefined
I have a little knowledge of php, but this is what I'm trying to do. I have a form with select option. If an option is selected with the value "example_5" I want it to get the value of an <input>. Is this done with php or jquery to use the value of input?
For example: someone selects example_5. They can now write something in the <input>. And that value will be used.
<script type="text/javascript">
$(function(){
if($('select').find('option:selected').val() == 'example_5'){
use input??
$_COOKIE['input_example'] = $example_1;
}
else{
$_COOKIE['example_1'] = $example_1;
}
});
</script>
<?php
$_COOKIE['example_1'] = $example_1;
?>
<form method="get" action="page2.php">
<select name="example1">
<option value="example_1">example_1</option>
<option value="example_2">example_2</option>
<option value="example_3">example_3</option>
<option value="example_4">example_4</option>
<option value="example_5">example_5</option>
</select>
<input name="input_example" type="text">
</form>
The way I would do it is to have a onChange listener on the select box and then using javascript get the value of the input box using document.getElementById. You can use any jQuery shortcut you want, but the methodology would be the same.
See this fiddle for a functional example using this technique.
On an unrelated note, be sure to always close your <input /> tags (probably just a typos :)
Edit
As per comment : just set the value of the input from a value from the cookies.
document.getElementById("input_example").value = getCookie("cookie_name");
Where you can write a simple function to get the cookies :
function getCookie(Name) {
var search = Name + “=”
if (document.cookie.length > 0) { // if there are any cookies
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(”;”, offset)
// set index of end of cookie value
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
}
Tutorial for js cookie function taken here.
See also
JS Cookies
Based on your comment to blo0p3r's answer.
In page2.php, add the following at the very top of the script before any whitespace or HTML is sent:
<?php
if (isset($_GET['example1']) && $_GET['example1'] === "example_5")
setcookie($_GET['input_example'], 'example_5', time()+3600, '/');
First, you want to check if the from is submitted. Afterward $_COOKIE['example_1'] = $example_1; would be something like this:
$_COOKIE['example_1'] = $_GET['example1'];
Hi guys i using this jquery to show a div when i select a option
$("#select1").change(function(){
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
});
});
But i have a problem when i load the page get results from database, the option on select return SELECTED and the div only shows if i change the option..
can samebody help what i neeed to do to solve this?
explain again: get the val() from select and show the div without change the option... sorry for my english..
thanks
You can trigger the change after you bind it.
$('#select1').change( function(){
// your change code
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
}).change();
When the page loads (and after you bind the onchange function to your form elements) you should trigger any of these functions:
$(document).ready(function(){
$("#select1").trigger('change');
});
This way it will act as if the user selected it even if the value was loaded from the database.
EDIT: czarchaic's answer is also very good, as chaining the event trigger to the event binding is more compact and it may be easier to read the code, and in this instance is probably the better solution. The answer I provided will work fine as well, and while it's longer, it as the small advantage that it will also work in cases where the function was not bound by jquery (i.e. when the event is explicitly declared in the HTML):
<select id=""select1" onchange="if ($(this).val() == '2' ) {
$('#hide1').fadeIn('fast');
} else {
$('#hide1').fadeOut('fast');
}
">
<option...
You can do something like this. Triggering the change event after binding it.
$("#select1").change(function(){
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
}).change();
I have a select item, that is filled with a list of files. This list of files is stored in a php variable.
I have another list of files, from another directory, stored in another variable.
I have a dropdown, with 2 options. When I change the dropdown, I want the items in the select to change to the file list associated with the item selected.
For example, my dropdown contains:
Misc Images
People
I have 2 variables, $misc and $people.
When Misc is selected, I want the select to contain all the images listed in $misc, and when the People option is selected I want the select to contain all the options listed in $people.
As far as looping through the php to generate all the items is fine, what I don't understand is how to do the javascript portion?
Thanks, and apologies for poor wording.
Try this code out.
PHP:
<?php
$miscArray = array("misc1", "misc2", "misc3");
$misc = implode(", ", $miscArray);
$peopleArray = array("people1", "people2", "people3");
$people = implode(", ", $peopleArray);
?>
HTML:
<form action="#">
<select id="fileCat">
<option id="misc">Misc</option>
<option id="miscData" style="display:none"><?php echo $misc ?></option>
<option id="people">People</option>
<option id="peopleData" style="display:none"><?php echo $people ?></option>
</select>
<select id="files"></select>
</form>
JS:
init();
function init()
{
addListeners();
}
function addListeners()
{
document.getElementById("fileCat").onchange = fillSelect;
}
function fillSelect()
{
var fileCat = document.getElementById("fileCat");
var imageFiles;
switch(fileCat.options[fileCat.selectedIndex].id)
{
case "misc":
imageFiles = document.getElementById("miscData").innerHTML.split(", ");
break;
case "people":
imageFiles = document.getElementById("peopleData").innerHTML.split(", ");
break;
}
var parent = document.getElementById("files");
parent.innerHTML = "";
if(imageFiles.length)
{
for(var i=0;i<imageFiles.length;i++)
{
var option = document.createElement("option");
//populate option with corresponding image text
option.innerHTML = imageFiles[i];
parent.appendChild(option);
}
}
}
I mocked up some data in PHP and then echoed it into a hidden <option> tag for each category. Then, the data is grabbed using a case/switch depending on the id of the selected option.
I think something like this would work. You would set the onchange attribute of your drop down box to call that function. You will need to have a URL that returns the options you want to use in JSON (selectMenus.php in that example). You'd need two different urls or one that takes a parameter to indicate which option set.
could You provide us some code? It is quite heavy to write it completely of nothing :)
UPDATE:
then how about You try the following (or similar) by using jQuery:
<select id="foo">
<option class="misc">MISC</option>
<option class="misc">MISC2</option>
<option class="people">People1</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('option.misc').click(function(){
$('#foo').html('<option class="misc">MISC</option>
<option class="misc">MISC2</option>');
});
});
</script>
PHP is server side. JavaScript is client side. You have two options
(1) send an XmlHTTP request back to your server to pull the options and update the select list, or (2) send the values to a hidden field on the initial render of the page and get the values from there.