Forms&JS

Question

I created form - test. It consists radiobutton, checkbox, select and text. I need check answer and show result. How?

Answer 1

Polina T Here's how you get the value from inputs using javascript. As you have used the 'javascript' tag, I assume this should be the answer :))

To get the values of the checked inputs :

const elems = document.getElementByClassName('options');
const values = [];
for (let e of elems) {
if (e.checked) values.push(e.value);
}

Use the option class in your inputs like so :

<input class="option" type="checkbox"> answer1
......

To get the value from select :

const value = null;
const elem = document.getElementById('mySelect');
elem.onchange = () => { value = elem.value; }

Use the 'mySelect' id in your select tag :))

I leave the radio button for you :))

However, I'll make a demo for you a bit later :))

Answer 2

Arb Rahim Badsa provided a nice explanation.

If some supplements is needed, here is my video tutorial :
https://youtu.be/vv5kIqCD45c

Answer 3

Hey Polina T, Share your code with us :)) It will help us know what you are trying to achieve!

Answer 4

Polina T If you don't know how to attach the code here, just copy the code and paste it :))

Answer 5

Arb Rahim Badsa she basically wants to get the data the user enters in the form and then do something based on the data.

Answer 6

sajid chowdhury If what you're saying is the case, then I think javascript can be used to grab the values from the input as well as doing something with them :))

Answer 7

<form .......>
<p>1. Question <br>
<input type="radio" name="fq" id="false-answer-f" value="f">answer1
<input type="radio" name="fq" value="true-answer-f">answer2

<p> 2. Question </p> <br>
<input type="checkbox" name="sq" id="false-answer-s" value="f">answer1<br>
<input type="checkbox" name="sq" value="true-answer-s1">answer2<br>
<input type="checkbox" name="sq" id="false-answer-s" value="f">answer3<br>
<input type="checkbox" name="sq" value="true-answer-s2">answer4
</p>

<p>3. Question <br>
<select>
<option name="1">answer1
<option name="2">answer2
</select>
</p>
</form>

Answer 8

Part of this

Answer 9

Arb Rahim Badsa can you really do that with vanilla JavaScript? Didn't know that😞

Answer 10

And <input type="submit" value="send">

Answer 11

Thank everyone for your help 💛

Answer 12

How, as well i know, html code isn't sending

Answer 13

Polina T Do you want to get the data the user enters? If so, you need to work with the backend development

Answer 14

Is it can be easier, just using "If" and value elements

Answer 15

Polina T oh I understood your problem. But no you can't do that. You have to use backend like php.

Answer 16

Polina T you should give the value attribute to the options inside select

Answer 17

Yes, sure, and after this?

Answer 18

<form .......>
<p>1. Question <br>
<input type="radio" name="fq" id="false-answer-f" value="f">answer1
<input type="radio" name="fq" value="true-answer-f">answer2

<p> 2. Question </p> <br>
<input type="checkbox" name="sq" id="false-answer-s" value="f">answer1<br>
<input type="checkbox" name="sq" value="true-answer-s1">answer2<br>
<input type="checkbox" name="sq" id="false-answer-s" value="f">answer3<br>
<input type="checkbox" name="sq" value="true-answer-s2">answer4
</p>

<p>3. Question <br>
<select>
<option name="1">answer1
<option name="2">answer2
</select>
</p>
</form>

Answer 19

Html