Select current DB data in <select> list - javascript

Can someone please show me STEP BY STEP about how to make the current DB data be "selected" in the dropdown? I do not know anything about JS so I'm having a hard time right now.
This is the whole js script im using. http://jsfiddle.net/bdhacker/eRv2W/
The html
<body>
<div align="center">
<hr/>
<br/>Select Country (with states):
<select id="country" name="country"></select>
<br />State:
<select name="state" id="state"></select>
<br/>
<br />Select Country (without states):
<select id="country2" name="country2"></select>
<br />
<script language="javascript">
populateCountries("country", "state");
populateCountries("country2");
</script>
<br/>
<br/>
<br />
<br />
</div>
</body>

I would create another function in JS:
function preSelect(ElementId, selected_val) {
var countryElement = document.getElementById(ElementId);
countryElement.value= selected_val;
}
Then in your code you can run the function in this order
<script language="javascript">
populateCountries("country", "state");
populateCountries("country2");
preSelect("country", "Albania"); // <-- Here you specify the country you want
</script>
Demo FIDDLE

Just assign the value to select.
document.getElementById('country').value = <db value>;

Related

How to push 2D Array with Form Values in Javascript

I am new to JavaScript and don't know why my 2D array (each primary row element having both 'Word' and 'Color Value' column elements) is not being updated with user inputted form values? Also why it is not displaying the array?
Any help is greatly appreciated!
HTML Code:
<html>
<head>
Your current list of words to search:
<p id = "Array"> </p>
</head>
<body>
<form>
Input Word:<br><br>
<input type="text" id="wordInputId" ><br>
<br> Highlight Color: <select name="colortype" id="colorTypeId">
<br>
<br>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Red</option>
<option value="4">Yellow</option>
</select>
<br/>
<br/>
<input type="button" name="submit" value="Add Word" onclick="addEntry( inventory, document.getElementById('wordInputId').value, document.getElementById('colorTypeId').value )"/>
</form>
<br>
<button> Search Page</button>
<script src="Words.js">
var inventory = [[]];
displayInventory(inventory);
</script>
</body>
</html>
JS Functions (Words.js):
function displayInventory(inventory){
document.getElementById("Array").innerHTML = inventory.toString();
}
function addEntry(inventory, word, color){
inventory.push([[word.value],[color.value]]);
//displayInventory(inventory);
}
Using src and script lines in same script tag is a wrong way to define your scripts. First you need to seperate them. Then your displayInventory function only called once when script is compiled. You can check it by binding it on click event. Also you don't need to send inventory array with button. It will be defined in script already. Also you are getting values second time on your code. It means you are trying to get value of value and this is bad. Check this code please.
var inventory = [[]];
function displayInventory(inventory){
document.getElementById("Array").innerHTML = inventory.toString();
}
function addEntry(word, color){
inventory.push([[word],[color]]);
displayInventory(inventory);
}
<html>
<head>
</head>
<body>
Your current list of words to search:
<p id = "Array"> </p>
<form>
Input Word:<br><br>
<input type="text" id="wordInputId" ><br>
<br> Highlight Color: <select name="colortype" id="colorTypeId">
<br>
<br>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Red</option>
<option value="4">Yellow</option>
</select>
<br/>
<br/>
<input type="button" name="submit" value="Add Word" onclick="addEntry(document.getElementById('wordInputId').value, document.getElementById('colorTypeId').value)"/>
</form>
<br>
<button> Search Page</button>
</body>
</html>
You can't have both a src attribute and a body on a script tag. You can have either one.
So, you should structure it like this:
<script type="text/javascript" src="Words.js"></script>
<script type="text/javascript">
var inventory = [[]];
displayInventory(inventory);
</script>

Open window which user select language

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.

getting value of other field from javascript which is a part of select tag html

I have a select tag in my html form. In that, if you select 'Other' option you will get a new text box below which is generated through java script. Now I am able to get the value of select tag since it is in the html form itself. But unable to get the data from other text field as it is in javascript. Here is my full sample code.
<?php
if(isset($_POST["sub"])) {
$optionChosen=$_POST["options"];
}
//insert query will go here
?>
<html>
</head>
<script type="text/javascript">
function showfield(name){
if(name=='Other') {
document.getElementById('div1').innerHTML='Other: <input id="othr" type="text" name="other" />';
}
else {
document.getElementById('div1').innerHTML='';
}
}
</script>
</head>
<body>
<form action="form.php" method="post">
<select name="options" id="select" onchange="showfield(this.options[this.selectedIndex].value)" style="width: 200px; height:30px;">
<option selected="true" style="display:none;">Please select</option>
<option>School</option>
<option>Consultant</option>
<option>WhatsApp</option>
<option>Brochure / Poster</option>
<option>Internet</option>
<option>Other</option>
</select>
<input type="submit" name="sub">
</form>
</body>
</html>
A simple way is to add <input type="hidden" name="other" value=test /> and update it with js and then it will be a part of the form

HTML form select option triggers text field

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>

To-do list html page using local storage

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') + "'>"

Categories