Basic Forms [Javascript/HTML]

Question

I've just made a form for the first time.

I've a problem accessing the values of that form and storing them into variables, later used by functions. Whenever you submit the form, it take you to another webpage. A JavaScript file is attached to both form and the another webpage.

What I've Tried - [If i give id to the properties]

var someVariable = document.getElementById("Some id").val();     
console.log(someVariable); // It shows a error in console, not the value.

Another try

var someVariable = document.forms["Form Name"]["Property name"].value(); 
console.log(someVariable);

Some error in console.

The Form

<div id="ques">
<ul>
<form name="myForm" action="Answer.html" method="get">
<li>What cuisine?(You can leave it empty)<br>
<input list="Cuisines"  class="normal" type="text" name="Cuisine" placeholder="Like Chinese" pattern="Chinese|North Indian|Italian|American">
<datalist id="Cuisines" autocomplete="off">
    <option value="Chinese"></option>
    <option value="North Indian"></option>
    <option value="Italian"></option>
    <option value="American"></option>
</datalist></li>
<li>On a scale of 1 to 10, how much hungry are you?<br><input class="normal" type="number"  name="hunger" min="1" max="10" required></li>
<li><input class="special" type="checkbox" name="Personality" value="Vegetarian"checked> Vegetarian
<input class="special" type="checkbox" name="Personality" value="Non-Vegetarian" > Non-Vegetarian
</li>
<li>On a scale of 1 to 10, how much healthy do you want the food to be?<br><input class="normal" type="number"  name="Calories" min="1" max="10" required></li>
<li>What will be the max cost of the food, per person?<br>(Quality of the food will be affected)<br><input class="normal"  type="number" name="quality" placeholder=" Like 400" step="50" required></li>
<li>How many people?<br><input class="normal"  type="number" name="Amount of people" required></li>
<li><a href="Answer.html"><input class="normal" type="submit"></a></li>
</form>
</ul>
</div>

EDIT

I works, with .value, how can i get it to log on both of the Webpages.

Thanks! but still not complete, it logs, but on the forms webpage. I've used one javascript file on both of the web pages. Should i make another file? — Lavios
– Lavios, Commented Aug 27, 2015 at 14:36
If it's a completely separate page being reloaded, the script would get reloaded and the variables reset. You would need to find a way to either not reload or pass your variables via query string. Try looking into jQuery to modify the HTML dynamically so your variables are preserved or query strings to pass in when redirecting to the next page. — bransonl
– bransonl, Commented Aug 27, 2015 at 14:41
@bransonl .val() is the jQuery version of .value, not .value(). — Jon Kantner
– Jon Kantner, Commented Aug 27, 2015 at 15:29
@jon-kanter I recommended the use of .value instead of .value() as he/she tried .value() as a second attempt. — bransonl
– bransonl, Commented Aug 27, 2015 at 16:05

Daniel Cheung · Accepted Answer · 2015-08-27 14:34:37Z

2

.val() is a jQuery method for the value of inputs.

Try element.value.

Also, xxx() is always a function, but there is definitely no value() function available within an element.

answered Aug 27, 2015 at 14:34

Daniel Cheung

4,8491 gold badge33 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Basic Forms [Javascript/HTML]

EDIT

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related