How to push 2D Array with Form Values in Javascript - 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>

Related

How do I Reset Input Fields of Type Number Javascript

I am trying to make a simple calculator web app. All of the actual calculations work but the clear() method at the bottom does not affect the display of my input fields at all. Every resource I find says my function should work but it just won't.
<html>
<body>
<p>Length: </p><input id="length" type="number"></input>
<p>Width: </p><input id="width" type="number"></input>
<p>Height: </p><input id="height" type="number"></input>
<br>
<br>
<label for="calcMethods">Calculate:</label>
<select id="calcMethods">
<option value="volume">Volume</option>
<option value="area">Area</option>
<option value="perimeter">Perimeter</option>
</select>
<button id="calcVolume" onclick="calcEx()">Go</button>
<!--This Button Won't Work-->
<button onclick="clear()">Reset</button>
<p id="result"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//Functions are saved on original file.
.
.
.
//clears input boxes (WONT WORK!)
function clear()
{
var length = document.getElementById('length');
var height = document.getElementById('height');
var width = document.getElementById('width');
length.value = "";
height.value = "";
width.value = "";
}
</script>
</body>
</html>
Ok so it looks like clear() is a predefined javascript function and I just needed to give the function a different name. Woops!

Error onchange (function) is not defined at HTMLSelectElement.function

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>

How to add form in a component of select type?

I have to make a user registration form. After completing the form and pressing the button submit, the values from the form need to be added in a component of <p id="data></p>. Can someone help me here? It's working only for the drop-down list.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form >
Name: <input type="text" id="name" name="name" id="mySelect"> <br>
Male <input type="radio" id="male" name="male" id="mySelect"><br>
Female <input type="radio" id="female" name="female" id="mySelect"><br>
Country: <br>
<select name="country" size="4" id="mySelect">
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
<option value="c4">c4</option>
<option value="c5">c5</option>
</select> <br>
<br>
</form>
<button type="button" onclick="myFunction()">Submit</button>
<p id="data"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + x.options[i].text + "<br>";
}
document.getElementById("data").innerHTML = txt;
}
</script>
</body>
</html>
Here is couple things you should change:
DO NOT use same id for different elements on page: it causes issues like you experienced;
you duplicated id attribute for every form element - don't do that please, attributes shouldn't be duplicated for single element;
please read documentation - getElementById returns single element which match or null;
use getElementsByClassName instead giving the same classname to every form element, like "sys-form-element"; in this case getElementsByClassName("sys-form-element") returns collection of matched elements which includes every form field which you could parse then with your "myFunction" - just update it to discover element type and hadle texts, radios and selects differently;

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

Select current DB data in <select> list

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>;

Categories