Here is a short form for selecting language for a webpage, There are two languages one is marathi and another is english actually what I want is like: when a user select english language and submit the form english.html page should open and
when user select marathi language marathi.html page should open.
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<form>
<center>
<p id="p1">
Language:<select>
<option id="English" >English</option>
<option id="Marathi" >Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open" >
</center>
</form>
</html>
You can use this as a reference, considering english.html and marathi.html as your targeting pages, you can change them accordingly
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<script>
$('#button').click(function() {
var selected = $('#language option:selected');
window.location.href = selected + ".html"
})
</script>
</head>
<body>
<form>
<center>
<p id="p1">
Language:
<select id="language">
<option id="English">English</option>
<option id="Marathi">Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I think its obviously, but please do not repeat it at production:
<input type="submit" id="button" onclick="window.locaton.href='lol/'+$('select').val()+'.html'" value="Open" >
Here is easy way;
<select name="forma" onchange="location = this.value;">
<option value="english.html">English</option>
<option value="marathi.html">Marathi</option>
</select>
if you want to create this using simple Javascript then use location.href = "yourPageAddress";
here is the sample code i have written for the same:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript">
function MyFunction(){
var getValue = document.getElementById("language");
//console.log(getValue);
var getIndexValue = getValue.options[getValue.selectedIndex].value;
//console.log(getValue.selectedIndex);
//console.log(getIndexValue);
if(getValue.selectedIndex == 1){
//console.log("English")
location.href = "http://www.google.com";
}
else if(getValue.selectedIndex == 2){
//console.log("Marathi");
location.href = "http://www.yahoo.com";
}
else{
console.log("Wrong Option Selected.");
}
}
</script>
</head>
<body>
Language:
<select name="language" id="language">
<option>Select..</option>
<option value="https://www.google.com" id="english">English</option>
<option value="https://www.yahoo.com" id="marathi">Marathi</option>
</select>
<br>
<button name="submit" id="submit" onclick="MyFunction()">Submit</button>
</body>
</html>
This is just the one way where you can redirect the user to selected page, there are many different ways also to execute the same operation.
You may find some console.log statement marked comment, which was just used for debugging purpose.
Related
I'm a beginner in programming and today I need your help!(please :'()
I want to create a survey,so I begin to code and a error appear and I search a lot in internet but no solution.
There are my html and js codes.
/*the code isn't finish, this error block me(code name is sur.js*/
let choi;
let choix1 = 1;
let choix2 = 1;
let choix3 = 1;
function submit(){
console.log(choi);
}
function changer(){
getElementById('survey');
choi= sel.options[sel.selectedIndex];
console.log(choi);
}
<!DOCTYPE html>
<html>
<head>
<title>Robotale v8 : surveys</title>
<link rel="icon" href="https://www.mediafire.com/convkey/a940/qp7vky5trrp8hmzzg.jpg"/>
</head>
<body style="background-color:#000000">
<br>
<a href="Index.html">
<img src="https://www.mediafire.com/convkey/6586/bb0x08ff0tvjhepzg.jpg" onclick="redirection()"/>
</a>
<br>
<font face= "Verdana" size="4" color="#3399ff">The Robotale Website is here for your Robotale time!!!</p>
<br>
<p>Surveys:</p>
<br>
<form>
<label for="survey">Your feedback about this website!!!How do you like it?</label>
<select id="survey" name="survey" type="datalist" onchange="changer();">
<datalist id="surveys">
<option value="No">Nope!!!</option>
<option value="Yes">Yes!!!</option>
<option value="liv">THIS WEBSITE IS MY LIFE IF YOU DELETE IT I WILL DIE!!!(calm down please)</option>
</datalist>
</form>
link to principal page
<br>
<br>
<input type="submit" value="Send your feedback" id="food" onclick="submit()">
<br>
<script src"sur.js"></script>
</html>
You did not specify an incomplete call to the selector - getElementById('survey');. The rule is to use the document, and you need to write like this - document.getElementById('survey');.
Next, you have an undefined variable sel, and I mean that this variable is filled with data from document.getElementById('survey');. It turned out like this - let sel = document.getElementById('survey');
Now run this code and try to select a value from the dropdown list. There are no errors.
That is how it should be?
/*the code isn't finish, this error block me(code name is sur.js*/
let choi;
let choix1 = 1;
let choix2 = 1;
let choix3 = 1;
function submit(){
console.log(choi);
}
function changer(){
let sel = document.getElementById('survey');
choi= sel.options[sel.selectedIndex];
console.log(choi);
}
<!DOCTYPE html>
<html>
<head>
<title>Robotale v8 : surveys</title>
<link rel="icon" href="https://www.mediafire.com/convkey/a940/qp7vky5trrp8hmzzg.jpg"/>
</head>
<body style="background-color:#000000">
<br>
<a href="Index.html">
<img src="https://www.mediafire.com/convkey/6586/bb0x08ff0tvjhepzg.jpg" onclick="redirection()"/>
</a>
<br>
<font face= "Verdana" size="4" color="#3399ff">The Robotale Website is here for your Robotale time!!!</p>
<br>
<p>Surveys:</p>
<br>
<form>
<label for="survey">Your feedback about this website!!!How do you like it?</label>
<select id="survey" name="survey" type="datalist" onchange="changer();">
<datalist id="surveys">
<option value="No">Nope!!!</option>
<option value="Yes">Yes!!!</option>
<option value="liv">THIS WEBSITE IS MY LIFE IF YOU DELETE IT I WILL DIE!!!(calm down please)</option>
</datalist>
</form>
link to principal page
<br>
<br>
<input type="submit" value="Send your feedback" id="food" onclick="submit()">
<br>
<script src"sur.js"></script>
</html>
I have a dropdown list where users can select multiple options. I stored the selected options in a String variable in this format : [value of first selected option],[value of second selected option]...
Now i want to pass the value of this variable from my Javascript in file 1 to PHP variable in file 2 using Ajax. Here is my code
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="displayData.php" id="multiple_select_form">
<select name="columns" id="columns" class="form-control selectpicker" multiple>
<option value="Country">Country</option>
<option value="Customer Name">Customer Name</option>
<option value="Order Date">Order Date</option>
<option value="Address">Address</option>
</select>
</form>
<br>
<button class="btn btn-info center-block" id="btn-get">Submit</button>
</div>
</body>
</html>
<script>
$('#btn-get').on('click', function() {
var selectedOptions = [];
$.each($(".selectpicker option:selected"), function(){
selectedOptions.push("[" + $(this).val() + "]");
});
var myVar = selectedOptions.join(",");
$.ajax({
type: "POST",
url: 'displayData.php',
data: { testVariable : myVar },
success: function(data)
{alert(data);}
});
$("#multiple_select_form").submit();
});
</script>
I added alert(data) on success in my Ajax to see if the variable got the correct value. It's working but when form is submited and the displayData.php is loaded I get error Undefined index: testVariable
displayData.php is a simple test file
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$variable = $_POST['testVariable'];
print_r($variable);
?>
Can anyone explain me what can be the issue ? I believe that the Ajax is written correctly. Thank you for your help.
Try this
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="displayData.php" id="multiple_select_form">
<select name="columns" id="columns" class="form-control selectpicker" multiple>
<option value="Country">Country</option>
<option value="Customer Name">Customer Name</option>
<option value="Order Date">Order Date</option>
<option value="Address">Address</option>
</select>
<input type="hidden" name="testVariable" id="testVariable">
</form>
<br>
<button class="btn btn-info center-block" id="btn-get">Submit</button>
</div>
</body>
</html>
<script>
$('#btn-get').on('click', function() {
var selectedOptions = [];
$.each($(".selectpicker option:selected"), function(){
selectedOptions.push("[" + $(this).val() + "]");
});
$("#testVariable").val(selectedOptions.join(","));
$("#multiple_select_form").submit();
});
</script>
You're making two requests to displayData.php. One is an AJAX request, with the value set in a field called testVariable, and one is a normal form submit with the value set in a field called columns. The error is happening on the second request.
If your intent is to use AJAX, then remove the following code:
$("#multiple_select_form").submit();
You might even remove the <form> wrapper entirely, since you're identifying the elements directly and not really using the form itself for serialization or anything. (If you ever put a button inside the form it will automatically submit unless you explicitly handle the event to cancel that behavior.)
Conversely, if you do want to submit the form, then you can remove the JavaScript code entirely and move the submit button to be inside the <form> wrapper. And, of course, rename the form element to what your server-side code expects:
<select name="testVariable" ...
I wanted to make a settings page for a Chrome Extension, but the save button doesn't work. The .click() doesn't even activate at all. I put all of my code beneath. Also, do I use the commented out button instead(see below)?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Y.A.Y | Options</title>
<script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="/js/caps.js"></script>
</head>
<body>
<h1>Settings</h1>
<form>
<label>Enabled: </label>
<select id="on">
<option value="on">Yes</option>
<option value="off">No</option>
</select>
</br>
<label>First Letter:</label>
<select id="first">
<option value="on">Capital</option>
<option value="off">Lowercase</option>
</select>
</br>
<label>Change First Letter of Each </label>
<select id="per">
<option value="on">Word</option>
<option value="off">Sentence</option>
</select>
<!--<input id="save" type = "submit" value = "Save"/>!-->
<button id="yayay" type="submit">Save</button>
</form>
</body>
</html>
Javascript
var pretty_fied = false;
var isOn;
var isCapFirst;
var firstLetterPerWord;
getData()
function getData() {
chrome.storage.local.get(function (data) {
isOn = data.isOn;
isCapFirst = data.isCapFirst;
firstLetterPerWord = data.firstLetterPerWord;
})
}
$('form').on('submit', function () {
alert("HI!");
isOn = ($("#on").value == "on");
isCapFirst = ($("#first").value == "on");
firstLetterPerWord = ($("#per").value == "on");
console.log(isOn);
chrome.storage.local.set({
isOn: isOn,
isCapFirst: isCapFirst,
firstLetterPerWord: firstLetterPerWord
});
console.log("Saved");
});
In the form field you should specify the action, in other words what you are doing with the form
Eg.
<form action ='test.php' method="post"></form>
Which will send the form to a file called test.php
In the case though you will want to use jquery submit.
This is an example using the submit function in jquery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
source: http://www.w3schools.com/jquery/event_submit.asp
notice that the action part is left blank, because you do not wish to send a request to another document.
I'm trying to get a text field to appear when the user selects a certain option in a form select. I found exactly what I need at http://jsfiddle.net/0ak3b3z1/
However, when I copy this exact code into an html document, it doesn't work. Can anyone tell me where I'm going wrong.
Here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
$('#industry').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val()=="SaaS");
});
</script>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
</body>
</html>
Need to include jQuery. Plus you must place the javascript at end (after DOM elements are defined).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$('#industry').on('change', function () {
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val() == "SaaS");
});
</script>
</body>
</html>
The dollar sign is used with the jquery library, and you're not including this library.
So just add jquery library before the js code.
Just Include this code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You need to include this line in your code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'> </script>
I need to write a page that asks the user to enter a task, and the color that he wants the task to be having ... tried some codes but i'll show you my last try, the problem is that the color of all tasks gets updated with the new value OR it does't apply the given color at all.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Example</title>
<script type="text/javascript">
function set(){
var cont = document.getElementById("todo").value;
var color = document.getElementById("bg").value;
localStorage.setItem("task", cont);
localStorage.setItem("preferences-bgcolor", color);
//alert(localStorage.getItem('preferences-bgcolor'));
showDiv();
}
</script>
</head>
<body id="b">
<label>ADD A TASK TO YOUR TO DO LIST:</label>
</br>
Task:<input type="text" name="task" id="todo"><br>
Color:<input type="text" list="list" id="bg">
<datalist id="list">
<option value="White">
<option value="Green">
<option value="Blue">
</datalist>
<input type="submit" value="Send" onclick="set()">
<div id="content">
</div>
</body>
<script type="text/javascript">
function showDiv(){
document.getElementById("content").innerHTML+="<p style='localStorage.getItem('preferences-bgcolor')'>"+localStorage.getItem('task')+"</p></br>";
//document.getElementById("content").style.color = localStorage.getItem('preferences-bgcolor');
}
</script>
</html>
Change style='localStorage.getItem('preferences-bgcolor')' to
"<p style='" + localStorage.getItem('preferences-bgcolor') + "'>"