I am new to programming, what I am trying is when a user selected option from a select, the next time user visit the page or refresh the page the user will see his last selected option as selected already.
<!DOCTYPE html>
<html>
<body>
<select id="Example">
<?php
$value = "<script>document.write(value)</script>";
$val = "1";
$val2 = "2";
?>
<option value="1" <?php if ($val == $value){ ?>selected <?php } ?> >One</option>
<option value="2" <?php if ($val2 == $value){ ?>selected <?php } ?> >Two</option>
<option value="3">Three</option>
</select>
<script>
var sel = document.getElementById('Example');
var value = sel.options[sel.selectedIndex].value;
</script>
</body>
</html>
I am using the above code but I am not getting the desired output, please help me I am really stuck. If this is possible in JavaScript I will also be appreciated. Thanks in Advance.
Database, Cookies or localStorage
window.onload=function() {
var val = localStorage.getItem("example");
if (val) { document.getElementById('Example').value = val }
document.getElementById('Example').onchange=function() {
localStorage.setItem("example",this.value);
}
}
<form action="" method="post">
<label>Country</label>
<select id="country" name="country" onchange="myFunction(this.value)">
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
var val = localStorage.getItem("CountryValue");
document.getElementById('country').value = val;
// This function will store data in localstorage on client browser.
function myFunction(value) {
localStorage.setItem("CountryValue",value);
}
</script>
Related
Here's the process I want to realize:
1.on index page, select one option from the list of items;
2.submit form,directing to the index page ;
3.select label showing the default value which equals what I chose in step 1.
e.g.
<html>
<select>
<option value="1">1<option/>
<option value="2">2<option/>
<option value="3">3<option/>
</select>
</html>
On index page if I chose 1 ,and submit it and the page is submitted to itself(the index page).Now,on the index page, <option value="1">1<option/> is selected by default.
I don't know which correct direction I should go and I haven't found any solutions from the Internet yet.Anybody has any ideas??
Thanks a lot!
Using PHP function and javascript onchange:
<html>
<?php
if (isset($_POST["myselect"])) {
$myselect = $_POST["myselect"];
}
else {
$myselect = 1;
}
function isselected(A,B) {
if ($A == $B){
return "selected";
}
else{
return false;
}
}
?>
<form action="index.php" method="post">
<select name="myselect" onchange="this.form.submit();">
<option value="1" <?php echo isselected(1,$myselect) ?> >1<option/>
<option value="2" <?php echo isselected(2,$myselect) ?> >2<option/>
<option value="3" <?php echo isselected(3,$myselect) ?> >3<option/>
</select>
</form>
</html>
1st : Name attribute is must for form elements .otherwise element value would not passed to server.
2nd : Check the post value and add the selected attribute for that option like below .
<select name="select1">
<option value="">Select</option>
<option value="1" <?php echo (isset($_POST['select1']) && $_POST['select1']==1 )? 'selected':''; ?>>1</option>
<option value="2" <?php echo (isset($_POST['select1']) && $_POST['select1']==2 )? 'selected':''; ?>>2</option>
<option value="3" <?php echo (isset($_POST['select1']) && $_POST['select1']==3 )? 'selected':''; ?>>3</option>
</select>
coudn't understand your question quite well but..If you want to select any other value by default, once the page comes back to the index page, you will have to send the selected value back to the index page.
<html>
<select>
<option value="1">1<option/>
<option value="2" selected="selected">2<option/>
<option value="3">3<option/>
</select>
</html>
The above would select option 2, so you just have to set it accordingly.
I am using a select tag from html to show some list. Now when I select one of the option from select tag, I want to load the form again and by the selected option I am running another query and showing the values of another query in another select tag.
Its working properly after selecting any option I am posting a type from which I am getting another data in another select tag, but when I click suppose option TSgt and the form reloads with the TSgt type data, but the option selected in select tag shows as MSgt which is not the one I selected.
If I don't check if the $type is set in _POST array and just show the select tag without an select value like follow :
<option value="1">SSgt</option>
<option value="2">TSgt</option>
<option value="3">MSgt</option>
Then, default selected value shows SSgt,I want to show the value in select tag which user has selected.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MCQ Questions</title>
</head>
<body>
<?php
session_start();
$dbh = new PDO('mysql:host=174.75.54;dbname=handbook', 'airman', 'airman');
$type = $_POST['type'];
$question = $_SESSION["question"];
$optionA = $_SESSION["opt1"];
$optionB = $_SESSION["opt2"];
$optionC = $_SESSION["opt3"];
$optionD = $_SESSION["opt4"];
$ans = $_SESSION["ans"];
$chapter = $_SESSION["chapter"];
?>
<form method="post" action="mcq.php" enctype="multipart/form-data">
<p> Enter the question :</p> <input name="question" type="text"> <br><br>
Select question type :
<select name="type" id="type" onchange="this.form.submit()">
<?php if(isset($_POST['type']))
{ ?>
<option value="1" selected=<?=($type==1?"checked":"");?>>SSgt</option>
<option value="2" selected=<?=($type==2?"checked":"");?>>TSgt</option>
<option value="3" selected=<?=($type==3?"checked":"");?>>MSgt</option>
</select>
<?php
}
else
{
?>
<option value="1">SSgt</option>
<option value="2">TSgt</option>
<option value="3">MSgt</option>
</select>
<?php
}
?>
<br><br>
<?php if(isset($optionA))
{ ?>
<p> Enter options :</p>
Enter option A : <input name="opt1" type="text" value = "<?php echo $optionA?>"</input> <br><br>
<?php
}
else{
?>
<p> Enter options :</p>
Enter option A : <input name="opt1" type="text"> <br><br>
<?php
}
?>
Enter option B : <input name="opt2" type="text"> <br><br>
Enter option C : <input name="opt3" type="text"> <br><br>
Enter option D : <input name="opt4" type="text"> <br><br>
Select correct answer :
<select name="ans" id="type">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br><br>
Select Chapter :
<select name="chapters" id="chapters">
<?php
if(isset($_POST['type']))
{
$stmt = $dbh->prepare("SELECT * FROM chapters where type = :type");
$stmt->bindParam("type", $type);
$stmt->execute();
$results = $stmt->fetchall(PDO::FETCH_ASSOC);
if(count($results > 0)){
foreach($results as $row):?>
<option value="<?php echo $row['id'];?>"><?php echo $row['title'];?></option>
<?php
endforeach;
}else{?>
<option value="0">No data found</option>
<?php
}
}
else{
$stmt = $dbh->prepare("SELECT * FROM chapters where type = 1");
$stmt->execute();
$results = $stmt->fetchall(PDO::FETCH_ASSOC);
if(count($results > 0)){
foreach($results as $row):?>
<option value="<?php echo $row['id'];?>"><?php echo $row['title'];?></option>
<?php
endforeach;
}else{?>
<option value="0">No data found</option>
<?php
}
}
?>
</select> <br><br>
<input type="submit" value = "Submit">
</form>
</body>
</html>
<?php
// escape post variables
$question = $_POST['question'];
$option1 = $_POST['opt1'];
$option2 = $_POST['opt2'];
$option3 = $_POST['opt3'];
$option4 = $_POST['opt4'];
$ans = $_POST['ans'];
$chapter = $_POST['chapters'];
if(!empty($ans) and !empty($question) and !empty($option1) and !empty($option2) and !empty($option3) and !empty($option4) and !empty($type) and !empty($chapter))
{
$stmt = $dbh->prepare("INSERT INTO questions (question,answer_a,answer_b,answer_c,answer_d,answer,type,chapterId) VALUES (?, ?, ?, ?, ?, ?, ?,?)");
$stmt->execute(array($question, $option1, $option2, $option3, $option4, $ans,$type,$chapter));
if ($dbh->lastInsertId())
{
echo 'Question submitted.';
echo 'Upload another question.';
session_destroy();
}
else
{
echo 'Question could not submit.';
}
}
else{
$_SESSION["question"] = $question;
$_SESSION["chapter"] = $chapter;
$_SESSION["ans"] = $ans;
$_SESSION["opt1"] = $option1;
$_SESSION["opt2"] = $option2;
$_SESSION["opt3"] = $option3;
$_SESSION["opt4"] = $option4;
echo 'Fill all fields.';
}
?>
I dont know what is going wrong here. Can anyone help me out please?
Thank you.
selected=checked is wrong. selected is enough.
The syntax is <option value="1" selected>SSgt</option>
Change the code to
<option value="1" <?php echo($type==1?"selected":"");?>>SSgt</option>
<option value="2" <?php echo($type==2?"selected":"");?>>TSgt</option>
<option value="3" <?php echo($type==3?"selected":"");?>>MSgt</option>
I tried to find a solution with the stackoverflow search but I did not understand what I found.
Basically I want to have a List from which I can choose a value, which changes a link from the button. I think I need Javascript for it, so I want to ask you, how the code would look like?
EDIT:
So basically i want choose one option of the select, and every option has an own link to another html page. If i click on a button the html page of the chosen option opens. How do I do it with Java Script?
<form action="select.html">
<select name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
Just check it. Hope this is what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
<form action="select.html">
<select id="selectopt" onchange="selectFunction(this);" name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
<a id="mylink" style="position:absolute;top:0;right:0;" href="http://google.com">Link</a>
You can use this code:
<script type="text/javascript">
function redirect(select) {
window.location = select.options[select.selectedIndex].getAttribute('data-link');
}
</script>
<form action="select.html">
<select name="Bundesländer" size="16" onChange="redirect(this)">
<option data-link="http://www.google.fr/" selected>Baden-Würtemberg</option>
<option data-link="http://www.google.com/">Bayern</option>
<option data-link="http://www.google.de/">Berlin</option>
<option data-link="http://www.google.it/">Brandenburg</option>
<option data-link="http://www.google.be/">Bremen</option>
<option data-link="http://www.google.be/">Hamburg</option>
<option data-link="http://www.google.be/">Hessen</option>
<option data-link="http://www.google.be/">Mecklenburg Vorpoomern</option>
<option data-link="http://www.google.be/">Niedersachsen</option>
<option data-link="http://www.google.be/">NRW</option>
<option data-link="http://www.google.be/">Rheinland</option>
<option data-link="http://www.google.be/">Saarland</option>
<option data-link="http://www.google.be/">Sachsen</option>
<option data-link="http://www.google.be/">Sachsen-Anhalt</option>
<option data-link="http://www.google.be/">Schleswig-Holstein</option>
<option data-link="http://www.google.be/">Thüringen</option>
</select>
</form>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
$('#btn').attr('url_value', $(this).val());
});
$('#btn').click(function () {
window.open($(this).attr('url_value'));
// alert($(this).attr('url_value'))
});
});
</script>
<body>
<form >
<input type="button" value="Open Selected" id="btn" url_value=""/>
<select name="Bundes" >
<option selected>Baden-</option>
<option>http://www.w3schools.com</option>
<option>http://www.gmail.com</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg </option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>test</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
</body>
</html>
I think you want to change the action in the form based on selected option.
Use the code bellow:
<!DOCTYPE html>
<html>
<body>
<form action="Bayern.html" id="form" name="form" accept-charset="UTF-8">
<input type="submit">
</form>
<select id="dropwdown" name="dropwdown" onchange="chgAction();">
<option selected>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
<script>
function chgAction()
{
var selectedOption = document.getElementById("dropwdown").value;
if(selectedOption == "Hessen" ) {
document.getElementById('form').action = "Hessen.html";
}
else if(selectedOption == "NRW" ) {
document.getElementById('form').action = "NRW.html";
}
//Apply the same logic for each option ...
}
</script>
</body>
</html>
I have problems with this particular form, i need first to select a value and then to submit the form. Submit form works good, however the default selection value in all browsers is selected and it is Acceptable, except in IE where no default selection value is selected. In IE there is nothing selected by default.
How do I fix this?
Picture of the problem :
:
<select name="formQuality" id="formQuality" value="acceptable">
<option value="acceptable">Acceptable</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="excellent">Excellent</option>
<option value="best">Best</option>
</select>
<?php
if(isset($_POST['SubmitButton'])){ //check if form was submitted
$input = $_POST['inputText']; //get input text
$varQuality = $_POST['formQuality'];
$message = "Success! You entered: ".$input;
}
?>
<br>
<form action="" method="post">
<h1>Choose Quality:</h1>
<?php
$thequa = htmlspecialchars($_POST['formQuality']);
?>
<select name="formQuality" id="formQuality" value="<?php echo $thequa;?>">
<option <?php if ($thequa1 == 'acceptable') { ?>selected="true" <?php }; ?> value="acceptable">Acceptable</option>
<option selected="true" value="acceptable">Acceptable</option>
<option <?php if ($_POST['formQuality'] == 'good') { ?>selected="true" <?php }; ?> value="good">Good</option>
<option <?php if ($_POST['formQuality'] == 'better') { ?>selected="true" <?php }; ?> value="better">Better</option>
<option <?php if ($_POST['formQuality'] == 'excelent') { ?>selected="true" <?php }; ?> value="excellent">Excellent</option>
<option <?php if ($_POST['formQuality'] == 'best') { ?>selected="true" <?php }; ?> value="best">Best</option>
</select>
<textarea name="inputText" cols="100" rows="20" style="border:solid 1px orange;"><?php echo $thetext;?></textarea>
<p>
<input type="submit" value="Rewrite" name="SubmitButton"/>
</form>
The intended way to preselect an option is setting the selected attribute on the option element, rather than adding a value attribute to the select field.
<select name="formQuality" id="formQuality">
<option value="acceptable" selected>Acceptable</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="excellent">Excellent</option>
<option value="best">Best</option>
</select>
This produces the expected result in all browsers, including IE.
Use selected="selected"
Like,
<option value="My Default" selected="selected">
to make an option as default selected value. This works in all browsers.
Need form to change it's action depending on the selection from a specific drop down menu.
On change should trigger the script and change the action before user submits. Easier said than done when you're new to JS.. thanks for any help!
Javascript:
<script type="application/javascript">
function chgAction(form1){
if( recipient=="jordachedotcom_Advertising" )
{document.form1.action = "/adv_contact.php";}
else if( recipient=="dept_Public_Relations" )
{document.form1.action = "/pr_contact.php";}
else if( recipient=="dept_Manufacturing" )
{document.form1.action = "/manuf_contact.php";}
else if( recipient=="dept_Brands" )
{document.form1.action = "/brands_contact.php";}
else if( recipient=="dept_Holdings" )
{document.form1.action = "/holdings_contact.php";}
else if( recipient=="dept_Vendor_Inquiry" )
{document.form1.action = "/vend_contact.php";}
else if( recipient=="dept_Other_Inquiry" )
{document.form1.action = "/misc_contact.php";}
}
</script>
FORM HTML:
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>
Your code is missing the part to get the selected item from the selectbox.
document.form1.recipient.selectedIndex
The rest should be ok and i have created a Fiddle
I'm guessing as to your full intent, but I think that the best way to accomplish what you're doing here would be via php on the server side. Have the form direct to one particular page and then using your server-side language redirect to the proper url. For example, if you're using php do something like this:
client-side (html)
(note how the action property of the form is one fixed location)
<form id="form1" name="form1" method="post" action="./form-handler.php">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
<select>
<input type="submit">
</form>
No javascript required!
server-side (php)
form-hander.php:
<?php
$recipient = $_POST['recipient'];
//Based on the value of the $recipient value redirect to the correct page
//using the header function
switch($recipient) {
case 'dept_Manufacturing':
header('Location: ./manuf_contact.php'); exit;
case 'dept_Brands':
header('Location: ./brands_contact.php'); exit;
case 'dept_Holdings':
header('Location: ./holdings_contact.php'); exit;
//... etc, etc
}
On your on change function, you can obtain your currently selected element using:-
var currentValue = $("#recipient option:selected").val();
And then apply these if checks as you specified on this currentValue var as shown below:-
if(currentValue == "dept_advertising"){
$("#form1").attr("action",customURL);
}
Try this
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option data-action="/adv_contact.php" value="dept_Advertising">Advertising</option>
<option data-action="/pr_contact.php" value="dept_Public_Relations">Public Relations</option>
<option data-action="/manuf_contact.php" value="dept_Manufacturing">Manufacturing</option>
<option data-action="/brands_contact.php" value="dept_Brands">Brands</option>
<option data-action="/holdings_contact.php" value="dept_Holdings">Holdings</option>
<option data-action="/vend_contact.php" value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option data-action="/misc_contact.php" value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>
<script>
function chgAction(){
$('#form1').attr({'action':$('option:selected').attr('data-action')});
$('#form1').submit();
}
</script>
You could also just use the actual form action URLs as the option values and use a simple one line onchange attribute without any additional JS:
<form method="post" name="form1">
<select id="form_action" name="form_action" onchange="document.form1.action = this.value;">
<option value="https://url1.com">URL1</option>
<option value="https://url2.com">URL2</option>
</select>
</form>
Tested and working in Firefox. May possibly benefit from some measures to make it more cross-browser compatible.
Replace:
function chgAction(form1){...}
in
chgAction = function(form1) {....}
Code will work but it is not the ultimate dream. Better to use something like that:
(function(){
var form = document.querySelector('#form1'),
select = form.querySelector('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.addEventListener('change', function () {
var el = this, value = el.value;
if (action[value]) {
form.action = action[value];
}
}, false);}());
Like jQuery:
(function($){
var form = $('#form1'),
select = $('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.on('change', function () {
var el = $(this), value = el.val();
if (action[value]) {
form.attr('action', action[value]);
}
});}(jQuery));