I am trying using HTML, Jquery, and Node.js to develop an online test for my students. Currently, when I submit the form, the server gets a json object (using body-parser) that includes only the fields that were answered. However, I also need to be able to see which ones were not answer. For example, if my student answers questions 1, 2, 3 but not 4, the server shows the following:
{Q1: a, Q2:b, Q3:c}
I want to get:
{Q1: a, Q2:b, Q3:c, Q4:''}
I tried looking online, however most posts explain how to get rid of the empty responses and not how to include them.
This is what I have right now
<div id="FormContainer1" class="container">
<form id="Form1" action="/Form1" method="POST">
<div class="row">
<div class="col">
<div class="row">
<label> 1. </label>
<label>A </labe> <input type="radio" name="Q1" value="A">
<label>B </labe> <input type="radio" name="Q1" value="B">
<label> C </labe> <input type="radio" name="Q1" value="C">
<label> D </labe> <input type="radio" name="Q1" value="D">
</div>
<div class="row">
<label> 2. </label>
<label> A </labe> <input type="radio" name="Q2" value="A">
<label> B </labe> <input type="radio" name="Q2" value="B">
<label> C </labe> <input type="radio" name="Q2" value="C">
<label> D </labe> <input type="radio" name="Q2" value="D">
</div>
<div class="row">
<label> 3. </label>
<label> A </labe> <input type="radio" name="Q3" value="A">
<label> B </labe> <input type="radio" name="Q3" value="B">
<label> C </labe> <input type="radio" name="Q3" value="C">
<label> D </labe> <input type="radio" name="Q3" value="D">
</div>
<div class="row">
<label> 4. </label>
<label> A </labe> <input type="radio" name="Q4" value="A">
<label> B </labe> <input type="radio" name="Q4" value="B">
<label> C </labe> <input type="radio" name="Q4" value="C">
<label> D </labe> <input type="radio" name="Q4" value="D">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Submit">
</div>
</div>
</form>
and in the server I have,
app.post('/Form1', urlencodedParser, function(request,response){ console.log(request.body); })
You could add a hidden radio button for each question that is marked as checked:
<input type="radio" name="Q4" value="" style="display: none;" checked>
Related
I am creating a survey form just for a project on FCC.
I tried putting the <input> tag inside <label>, also used <fieldset> but nothing worked.
<p id="purpose">
<label for="business"><input id="business" type="radio" name="purpose" value="business" checked> business</label>
<label for="leisure"><input type="radio" id="leisure" name="purpose" value="leisure">Leisure</label>
<label for="passingby"><input type="radio" id="passingby" name="purpose" value="passingby">Passing by</label>
<label for="others"><input type="radio" id="others" name="purpose" value="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label>
<label for="service"><input type="checkbox" id="service" name="service">Service</label>
<label for="none"><input type="checkbox" id="none" name="none">None</label>
Try out this
<form action="">
<input type="radio" name="purpose" value="business"> business<br>
<input type="radio" name="purpose" value="leisure"> leisure<br>
<input type="radio" name="purpose" value="passingby"> passingby<br>
<input type="radio" name="purpose" value="others"> others<br>
</form>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label> <br>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label><br>
<label for="service"><input type="checkbox" id="service" name="service">Service</label><br>
<label for="none"><input type="checkbox" id="none" name="none">None</label><br>
Label should be sibling of input
<p id="purpose">
<input id="business" type="radio" name="purpose" value="business" checked><label for="business"> business</label>
<input type="radio" id="leisure" name="purpose" value="leisure"><label for="leisure">Leisure</label>
<input type="radio" id="passingby" name="purpose" value="passingby"><label for="passingby">Passing by</label>
<input type="radio" id="others" name="purpose" value="others"><label for="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
this is a simple html form:
<form action="/info" method="post">
<div >
<input type="" name="name">
</div>
<div>
<label>
<input type="radio" name="sex" checked > woman
</label>
<label>
<input type="radio" name="sex" > man
</label>
</div>
<button type="submit" >Conform</button>
</form>
after click submits button, this is post request's body:
as you can see, this post cannot distinguish if the user is woman or man.
How to conform which box does user choice in this form post?
<form action="/info" method="post">
<div >
<input type="" name="name">
</div>
<div>
<label>
<input type="radio" name="sex" checked value="woman"> woman
</label>
<label>
<input type="radio" name="sex" value="man"> man
</label>
</div>
<button type="submit" >Conform</button>
</form>
You should be able to get value now
You need to set the value of each radio input accordingly
<input type="radio" name="sex" value="woman" checked> woman
<input type="radio" name="sex" value="man"> man
I got a problem with checkbox and label. When I re-size screen the label split line, and checkbox should split follow label also.currently, when label stay in new line, but checkbox not stay in the same place of label. What I need is pair new line when responsive.
Anyone have any idea? Thanks in advance for your helping!
Below is my code
<div id="score">
<input type="radio" id="score_0" name="score" required="required" value="1">
<label for="score_0" class="required">E</label>
<input type="radio" id="score_1" name="score" required="required" value="2">
<label for="score_1" class="required">D</label>
<input type="radio" id="score_2" name="score" required="required" value="3">
<label for="score_2" class="required">C</label>
<input type="radio" id="score_3" name="score" required="required" value="4">
<label for="score_3" class="required">B</label>
<input type="radio" id="score_4" name="score" required="required" value="5">
<label for="score_4" class="required">B+</label>
<input type="radio" id="score_5" name="score" required="required" value="6">
<label for="score_5" class="required">A</label>
<input type="radio" id="score_6" name="score" required="required" value="7">
<label for="score_6" class="required">S</label>
</div>
You can actually nest your inputs into the label tag, then set a style for the label
.scores label {
white-space: nowrap;
}
<div class="scores">
<label for="score_1" class="required">
<input type="radio" id="score_1" name="score" required="required" value="2">D</label>
<label for="score_2" class="required">
<input type="radio" id="score_2" name="score" required="required" value="3">C</label>
<label for="score_3" class="required">
<input type="radio" id="score_3" name="score" required="required" value="4">B</label>
<label for="score_4" class="required">
<input type="radio" id="score_4" name="score" required="required" value="5">B+</label>
<label for="score_5" class="required">
<input type="radio" id="score_5" name="score" required="required" value="6">A</label>
<label for="score_6" class="required">
<input type="radio" id="score_6" name="score" required="required" value="7">S</label>
</div>
Demo - Easier to resize here
When you read this... I probably still haven't solved my issue,
I'm trying to align the label and radiobutton, I have tried alot of "Solutions", but nothing works. I have no css on the radio buttons that i created myself.
Output: http://prntscr.com/5am898
My Code:
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<label class="radio-inline" for="gal2015lbl">
<input name="galTab" id="gal2015" value="2015" type="radio">2015
</label>
<label class="radio-inline" for="gal2014lbl">
<input name="galTab" id="gal2014" value="2014" type="radio">2014
</label>
<label class="radio-inline" for="gal2013lbl">
<input name="galTab" id="gal2013" value="2013" type="radio">2013
</label>
<label class="radio-inline" for="gal2012lbl">
<input name="galTab" id="gal2012" value="2012" type="radio">2012
</label>
<label class="radio-inline" for="galOtherlbl">
<input name="galTab" id="galOther" value="Anders" type="radio">And
</label>
</div>
</div>
</div>
Try placing the input outside the label.
<label class="radio-inline" for="galOtherlbl">
And
</label>
<input name="galTab" id="galOther" value="Anders" type="radio">
put the label in label tag like
<label class="radio inline control-label">Some label</label>
try
FIDDLE DEMO
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<input name="galTab" id="gal2015" value="2015" type="radio">
<label class="radio-inline" for="gal2015lbl">2015</label>
<input name="galTab" id="gal2014" value="2014" type="radio">
<label class="radio-inline" for="gal2014lbl">2014</label>
<input name="galTab" id="gal2013" value="2013" type="radio">
<label class="radio-inline" for="gal2013lbl">2013</label>
<input name="galTab" id="gal2012" value="2012" type="radio" />
<label class="radio-inline" for="gal2012lbl">2012</label>
<input name="galTab" id="galOther" value="Anders" type="radio"/>
<label class="radio-inline" for="galOtherlbl">And</label>
</div>
</div>
</div>
I have the following form code in the nav bar:
<form id="form">
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="100" rows="5">
Post here
</textarea>
<input id="button" type="submit" value="Submit!" name="submit" onclick = "get('textfield')"/>
</p>
<p>
<input type="radio" name="radio" id="radio-1" />
<label for="radio-1">Section 1</label>
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Section 2</label>
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Section 3</label>
<input type="radio" name="radio" id="radio-4" />
<label for="radio-4">Section 4</label>
<input type="radio" name="radio" id="radio-5" />
<label for="radio-5">Section 5</label>
<input type="radio" name="radio" id="radio-6" />
<label for="radio-6">Section 6</label>
</p>
</form>
And in the main body within the webpage,I have 6 sections. What I am trying to achieve is if I select one of the radio buttons, write something in the text area and click submit, it should appear within the selected section. So If write hello world and mark section 5, hello world should appear under section 5.
Is there any naive way of achieving this purely in HTML5? If there isn't, can anyone point to any tutorials/links or offer any suggestions?
Thanks in advance!
try to use this Example
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="100" rows="5"></textarea>
<input id="button" type="submit" value="Submit!" name="submit"
</p>
<p>
<input type="radio" name="radio" id="radio-1" />
<label for="radio-1">Section 1</label>
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Section 2</label>
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Section 3</label>
<input type="radio" name="radio" id="radio-4" />
<label for="radio-4">Section 4</label>
<input type="radio" name="radio" id="radio-5" />
<label for="radio-5">Section 5</label>
<input type="radio" name="radio" id="radio-6" />
<label for="radio-6">Section 6</label>
</p>
<ul>
<li><section id="radio-1"></section></li>
<li><section id="radio-2"></section></li>
<li><section id="radio-3"></section></li>
<li><section id="radio-4"></section></li>
<li><section id="radio-5"></section></li>
<li><section id="radio-6"></section></li>
</ul
JS
$(function () {
$("#button").click(function(){
var txt = $("#textarea").val();
if(txt.length > 0)
{
var id = $("input[type='radio']:checked").attr("id");
$("li section").text("");
$("li #"+id).text(txt);
}
});
});
for solve this you better use simplejavascript code in your form that do this operation with id of radio buttons