http://jsfiddle.net/hr5aH/
I am jQuery beginner, I have just small problem here..
when I select language from the drop down menu the page refresh, but the drop down menu dose not show me which language I picked up..it's remain Choose Language - however the URL shows me which language I picked up, which is what I want, but not the drop down menu
for example if I choose from the drop down menu English
<script type="text/javascript">
$(document).ready(function(){
$("form").change(function(){
$("select[name='lang']").attr('selected','selected');
$("form").submit();
})
})
</script>
</head>
<body>
<form action="<?php htmlentities($_SERVER['PHP_SELF']); ?>" method="get">
<select name="lang">
<option value="">Choose Language</option>
<option value="English">English</option>
<option value="Arabic">Arabic</option>
<option value="French">French</option>
</select>
I see the URL http://127.0.0.1/index.php?lang=english
(Which what I want)
but the drop down menu remain on choose language - I just want to the drop down menu shows me the language as well.
If you want to remeber the last language seleted then you need to use a cookie. Use the jquery cookie plugin.
//checks if the cookie has been set
if($.cookie('remember_select') != null) {
// set the option to selected that corresponds to what the cookie is set to
$('.select_class option[value="' + $.cookie('remember_select') + '"]').attr('selected', 'selected');
}
// when a new option is selected this is triggered
$('.select_class').change(function() {
// new cookie is set when the option is changed
$.cookie('remember_select', $('.select_class option:selected').val(), { expires: 90, path: '/'});
});
Here is what your select would look like:
<select class="select_class">
<option value="1">Row 1</option>
<option value="2">Row 2</option>
<option value="3">Row 3</option>
</select>
This needs a bit of php magic coupled with your HTML code:
PHP Code
</head>
<body>
<form action="<?php htmlentities($_SERVER['PHP_SELF']); ?>" method="get">
<select name="lang">
<option value="">Choose Language</option>
<?php foreach(array('English','Arabic','French') as $lang) ?>
<option value="<?php echo $lang; ?>" <?php if ($_GET['lang']==$lang) echo "selected"; ?>><? echo $lang; ?></option>
?>
</select>
Explanation: The php code checks for your url and selects the appropriate option from the select list.
Tip: If you wish to have a cleaner code, place all your language values in an array and loop through it to generate your dropdown menu.
Your js script must be:
$(document).ready(function(){
$("form").change(function(){
$("select[name='lang']").attr('selected','selected');
$("form").submit();
})
var lang=getURLParameter('lang');
if(lang!='null')
$("select[name='lang']").prop('value',lang);
})
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
Link for details of getURLParameter() function: Get URL parameter with jQuery
Try with:
$("select[name='lang']").change(function(){
$("form").submit();
})
and to this you can add:
<option selected disable value="">Choose Language</option>
to prevent errors in you PHP
EDIT:
$_SESSION['language'] = $_GET['lang'] and in your jQuery
var selected_lang = '<?php echo $_SESSION["language"]; ?>';
$("select[name='lang']").val(selected_lang);
Related
I want to send a value from php page that will select the value and html page show that selected value.
Here is my code:
Blood Group:
<select name="bloodgp" <?php echo($data['user_bloodgroup']==$bloodgp)?'checked':'' ?>>
<option value="A+">A+</option
<option value="B+">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
If you just want to send data on HTML page then it will be possible through jquery. You can use below code for your requirement.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '#bloodgp', function() {
var get_selected_option_value = $(this)val();
window.location = 'your_html_page_name/bloodgp=' + get_selected_option_value;
});
});
</script>
</head>
<body>
Blood Group:
<select name="bloodgp" id="bloodgp" <?php echo($data['user_bloodgroup']==$bloodgp)?'checked':'' ?>>
<option value="A+">A+</option
<option value="B+">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
</body>
</html>
You can get the value from URL using above code.
Above code is for your requirement. But i am suggesting you to send the value to php file instead of HTML file. it will be more feasible for you.
If you want send data to php file then you can use ajax for that. You can find the below code with ajax.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '#bloodgp', function() {
var get_selected_option_value = $(this)val();
window.location =
$.ajax({
url: 'your_page_page_name.php',
type: 'POST',
dataType: 'json',
data: {bloodgp: get_selected_option_value},
})
.success(function(response) {
console.log("you have successfully sended the data");
})
});
});
</script>
</head>
<body>
Blood Group:
<select name="bloodgp" id="bloodgp" <?php echo($data['user_bloodgroup']==$bloodgp)?'checked':'' ?>>
<option value="A+">A+</option
<option value="B+">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
</body>
</html>
You can get value by using <?php print_r($_POST); ?> on your recieving php page.
Considering your <select> is in a <form>, depending on the method (get or post), when submitting, the value will be store in $_GET or $_POST.
// Example with post
<?php
//Verifying the form has been submitted
if (isset($_POST) && isset($_POST['submit'])) {
// here is the value you want
$select_value = $_POST['bloodgp'];
}
?>
If you are looking to do something when the user choose an <option> and not on submit of a form, this will be done with JavaScript.
You can find answers here as I did myself sometime ago (read the 2 firsts answers).
Next time, please search for already answered questions, post your code, and explain more what you are trying to do and how.
Please do not bother to put your code here, which is easy to understand.
Well you want to send a blood group which is selected by the user and now want to show this in html,
the common format of select box is
<select name="bloodgp">
<option value="A+">A+</option
<option value="B+" selected >B+</option>
</select>
this selected attribute will show this on html not checked, so you can use javascript to check all the options value which on match then add this attribute or you can easily print it as first option like
<select name="bloodgp">
<option value = "<?php echo $data['user_bloodgroup'];?>" selected><?php echo $data['user_bloodgroup'];?></option>
<option value="A+">A+</option
<option value="B+">B+</option>
</select>
which will make that option double. In my case i will like to use js to filter that option.
I have a form which posts to a preset url variable, I'd like to add an extension to that url by using a dropdown selector:
<form class="my-form" method="POST" action="<?php echo $url; ?>">
<select name="script_to_follow">
<option value="script1.php">Report 1</option>
<option value="script2.php">Report 2</option>
</select>
Does anyone know how to add the value selectors as extenstions to the URL, for example if $URL= www.example.com and Report 1 was selected the resulting action would be to post to www.example.com/script1.php
You May have to do this using jQuery:
var url = 'www.example.com';
$(".script_to_follow").change(function(){
var selvalue = $(this).val();
url = url + '/' + selvalue;
window.location = url;
})
You can do it by using jQuery.
On Submit call a function:
var action = $('form.my-form').prop('action');
var selectedOption = $('select[name="script_to_follow"]').val();
$('form.my-form').prop('action', action+'/'+selectedOption;
You have two options here:
Use javascript to listen for change events on the <select> field, and change the action of the form based on what's been selected. This is what the other answers are suggesting.
To you avoid using javascript, instead of pointing the form towards different php scripts based on the selected value, have a single php script that switches based on the selected value. So:
<form class="my-form" method="POST" action="action.php">
<select name="script_to_follow">
<option value="a">Report 1</option>
<option value="b">Report 2</option>
</select>
And then in action.php do something like:
switch ($_GET["script_to_follow"]) {
case "a":
// contents of script1.php
case "b":
// contents of script2.php
}
simply try this
add id attribute to select box as
<select name="script_to_follow" id="script_to_follow">
<option value="script1.php">Report 1</option>
<option value="script2.php">Report 2</option>
</select>
now write some jquery codes to change action attribute with change in option
<script>
$('#script_to_follow').change(function(){ // onchange event
var url = $('#script_to_follow').val(); // get selected option
$('form.my-form').prop('action',url); // replace action attribute
});
</script>
Note : do not forget to include jquery script before form
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
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 would like to get value from Form without submitting it, because the client have to choose the right type of house model to get the right form that fits the selected house model, without submitting, just selecting the house model and it for example continues the rest of form after that.
I have so far tried with this:
<form method="GET" action="foo.php">
<select name="house_model">
<option value="">------</option>
<option value="<?php echo $model1;?>">Model 1</option>
<option value="<?php echo $model2;?>">Model 2</option>
<option value="<?php echo $model3;?>">Model 3</option>
</select>
</form>
<?php
$a = $_GET["housemodel"];
if($a<>'')
{
if($a == $model1)
{
echo "<input type=\"text\" name=\"a\" value=\"something model1\">";
}
else if($a == $model2)
{
echo "<input type=\"text\" name=\"b\" value=\"something model2\">";
}
else if($a == $model3)
{
echo "<input type=\"text\" name=\"c\" value=\"something model3\">";
}
}
?>
I think, if you dont want page to be refreshed when user selects value from your drop down list, then you can use ajax. AJAX is used for this purpose. if you google, then you will find lots of tutorials related to AJAX.
If you don't want to submit the form, use JavaScript to get the element. Or you can also use jquery to access the value. Make sure you put id = "something" and retrieve it using $('#something').val();
if you want to use JavaScript,
<select name="house_model" id="model">
<option value="">------</option>
<option value="<?php echo $model1;?>">Model 1</option>
<option value="<?php echo $model2;?>">Model 2</option>
<option value="<?php echo $model3;?>">Model 3</option>
</select>
<script type="text/javascript">
var model= document.getElementById('model');
alert("You entered: " + model);
</script>
AJAX codes here
$("#model").live("change", function () {
alert("You choose " + $('#model').val());
});
IF you don't want to submit your form, you can get element using AJAX/jQuery.
<form method="GET" action="foo.php" onChange="getHouseModel">
<select name="house_model" id="house_model">
<option value="">------</option>
<option value="<?php echo $model1;?>">Model 1</option>
<option value="<?php echo $model2;?>">Model 2</option>
<option value="<?php echo $model3;?>">Model 3</option>
</select>
</form>
<script type='text/javascript'>
function getHouseModel(){
var model=$('#house_model').val();
alert(model);
}
</script>
or you can write jquery like this. so you dont have to call function in tag
<script type="text/javascript">
$('#house_model').select(function() {
var model=$('#house_model').val();
alert(model);
});
</script>
There is no way of getting data from a form before submitting in in PHP! This is because before submitting the form the PHP script simply is not called.
If you want to do some validation before sending data you must use javascript which is run on the client browser. Have a look at the jQuery library which makes this very easy: http://docs.jquery.com/Plugins/Validation/validate
If you want to use PHP only then you will need to separate the form into two pages.
You have to use ajax for achiving this.For example
<form method="GET" action="foo.php">
<select name="house_model" id="house_model">
<option value="">------</option>
<option value="<?php echo $model1;?>">Model 1</option>
<option value="<?php echo $model2;?>">Model 2</option>
<option value="<?php echo $model3;?>">Model 3</option>
</select>
</form>
$("#house_model").live("change", function () {
//Write the ajax and post the value to server side
});
Having some trouble here with this.
The setup:
A select object with a choice of "Other"
User selects "Other".
Script runs when this specific value is chosen, and dynamically changes the class of input object from "hide" to "show" (hidden and visible with css display).
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<?php
$otherGrade = $_POST['grade'];
if($otherGrade = "otherGrade")
{
echo("<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID)
{
if(document.getElementById(objInputID).className=='hide')
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>");
}
else
{
echo ("");
}
?>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Should I remove the onchange event from the select object? If so, I am at a loss as how to have the script executed.
Any solutions would be greatly appreciated.
The script should always be included in your page, since you want this to run while you make the changes in the dropdown list..
<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID, currentVal, correctVal)
{
if(correctVal == currentVal)
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Live example at : http://www.jsfiddle.net/MVymF/
why are you putting this in the post event? you can just render this as standard javascript as part of the page.
On post , the page will be refreshing , ad on reloading you are not saving the selected value of the select box.
The select box is not keep selected after posting. You have to do that.
>Other
As the value of option change the display hide also gone.
Fix that
If no need to submit the page . use this
http://api.jquery.com/val/
check demo of select