We Keep Coding

If statements in jquery not behaving as expected

I am relatively new to jQuery. I am trying to create a survey; in the survey each question in in its own div and is revealed by clicking the "Next" button. I just have all divs hidden except for the current div. I'm trying to write the answers to an object as I go to simplify the code. There are questions answered with radio buttons, some text areas, some check boxes, and some selects. Here is my code:
$('.next-button').click(function() {
if ($(this).parent().has('.survey-question-option')) {
replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
} else if ($(this).parent().has("textarea")) {
replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
}
console.log(replies);
$(this).parent().attr('hidden', '');
$(this).parent().next().removeAttr('hidden');
});
I'm logging the Object (replies) to make sure things are working. As the code is currently formulated I get the answers to the first two questions (both of which are radio buttons) added to replies, but the next two objects (textareas) populate as undefined. ({reason: "bill", wish: "newstart", dislike: undefined, like: undefined}). I tried formulating the if statement as two separate statements:
if ($(this).parent().has('.survey-question-option')) {
replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
};
if ($(this).parent().has("textarea")) {
replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
};
That returns undefined for the radio buttons, but the contents of the two textareas shows up in the object. ({reason: undefined, wish: undefined, dislike: "dislike text", like: "like text"}). In doing some testing on my own I've determined that if the if statement is formulates as if...else if the formula always applies the if statement only, but if it is created with two if statements it skips thew first and goes straight for the second.
My logic is that each Next button is in a div with the responses, so I should be able to look at the parent of the Next button, find the appropriate class, and get the value. And it seems to only work 50% of the time no matter how I formulate it.
EDIT: I am attaching the relevant html sections.
$('.next-button').click(function() {
if ($(this).parent().has('.survey-question-option')) {
replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
} else if ($(this).parent().has("textarea")) {
replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
}
console.log(replies);
$(this).parent().attr('hidden', '');
$(this).parent().next().removeAttr('hidden');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="survey">
<div id="reason" class='radio'>
<p class="survey-question">What is the primary reason you visit the site? </p>
<input type="radio" id="bill" name="reason" class="survey-question-option" value="bill">
<label for="bill" class="survey-question-option-label">To view or pay my bill online</label><br>
<input type="radio" id="outage" name="reason" class="survey-question-option" value="outage">
<label for="outage" class="survey-question-option-label">To view or report an outage</label><br>
<input type="radio" id="start" name="reason" class="survey-question-option" value="start">
<label for="start" class="survey-question-option-label">To get information about starting or stopping services</label><br>
<input type="radio" id="hours" name="reason" class="survey-question-option" value="hours">
<label for="hours" class="survey-question-option-label">To find Frederick Waster's business hours</label><br>
<input type="radio" id="board" name="reason" class="survey-question-option" value="board">
<label for="board" class="survey-question-option-label">To get information about Frederick Water's governance or board meetings</label><br>
<input type="radio" id="devel" name="reason" class="survey-question-option" value="devel">
<label for="devel" class="survey-question-option-label">To get information about new water or wastewater lines for new development</label><br>
<input type="radio" id="other" name="reason" class="survey-question-option" value="other">
<label for="other" class="survey-question-option-label">Other</label><br>
<div id="other-fill-reason" class="other-fill" hidden>
<label for="othertext-reason" class="survey-question-option-label">Please specify: </label>
<input type="text" class="survey-question-other" id="othertext-reason">
</div>
<input type="button" class="next-button" id="reason-next" value="Next">
</div>
<div id="wish" class='radio' hidden>
<p class="survey-question">What do you wish the site did better?</p>
<input type="radio" id="newstart" name="wish" class="survey-question-option" value="newstart">
<label for="newstart" class="survey-question-option-label">Allow me to pay deposit while starting new service</label><br>
<input type="radio" id="outinfo" name="wish" class="survey-question-option" value="outinfo">
<label for="outinfo" class="survey-question-option-label">Provide easier-to-find information about outages</label><br>
<input type="radio" id="startstop" name="wish" class="survey-question-option" value="startstop">
<label for="startstop" class="survey-question-option-label">Make it easier to start and stop services</label><br>
<input type="radio" id="request" name="wish" class="survey-question-option" value="request">
<label for="request" class="survey-question-option-label">Make it easier to request maintenance for existing service</label><br>
<input type="radio" id="chat" name="wish" class="survey-question-option" value="chat">
<label for="chat" class="survey-question-option-label">Let me talk to customer service online</label><br>
<input type="radio" id="other2" name="wish" class="survey-question-option" value="other">
<label for="other2" class="survey-question-option-label">Other</label><br>
<div id="other-fill-wish" class="other-fill" hidden>
<label for="othertext-wish" class="survey-question-option-label">Please specify: </label>
<input type="text" class="survey-question-other" id="othertext-wish">
</div>
<input type="button" class="next-button" id="wish-next" value="Next">
</div>
<div id="dislike" class="textbox" hidden>
<p class="survey-question">What do you dislike about the site?</p>
<textarea id="dislike-text" class="like-dislike" cols="100" rows="5" maxlength="500" wrap="soft"></textarea><br>
<input type="button" class="next-button" id="dislike-next" value="Next">
</div>
<div id="like" class="textbox" hidden>
<p class="survey-question">What do you like about the site?</p>
<textarea id="like-text" class="like-dislike" cols="100" rows="5" maxlength="500" wrap="soft"></textarea><br>
<input type="button" class="next-button" id="like-next" value="Next">
</div>

has() doesn't return a boolean, it returns a jQuery object. Objects are always truthy.
If you want to test whether a selector finds anything, test the length of the result.
$('.next-button').click(function() {
if ($(this).parent().find('.survey-question-option').length > 0) {
replies[$(this).parent().attr('id')] = $(this).parent().find('.survey-question-option:checked').val();
} else if ($(this).parent().find("textarea").length > 0) {
replies[$(this).parent().attr('id')] = $(this).parent().find("textarea").val();
}
console.log(replies);
$(this).parent().attr('hidden', '');
$(this).parent().next().removeAttr('hidden');
});

Cannot validate user input correctly from server?

How do I check multiple variable inputs at once to ensure that the regex is working? Everytime I enter anything, the form submits and doesn't alert anything.
I have tried test()method of regex validation too, and still no luck.
I am trying to validate user input with the following regex that makes to where anything that is not a number or blank space is considered a wrong input.
var format=/^(\s*|\d+)$/;
It only accepts numbers and blank spaces in the text box.
The following javascript is what I have:
var pitch = document.getElementById("pitch");
var chisel = document.getElementById("chis");
var saw = document.getElementById("saw");
//var arguments = [chisel, saw, pitch];
var format = /^(\s*|\d+)$/;
function regexTest() {
if (!chisel.match(format) && !saw.match(format) && !pitch.match(format)) {
alert("Repressed Action");
return false;
} else {
alert('Thank you');
}
}
<div class="lab">
<form method="post" action="http://weblab.kennesaw.edu/formtest.php">
Chisels: <input type="text" name="chisels" id="chis" size="5" /> Saw: <input type="text" name="saw" id="saw" size="5" /> Pitchfork: <input type="text" name="pitchfork" id="pitch" size="5" />
<br /> Customer Name: <input type="text" name="customer name" size="25" />
<br /> Shipping Address: <input type="text" name="shipping address" size="25" />
<br /> State:
<input type="radio" id="master" name="card" value="master" /><label for="master">MasterCard</label>
<input type="radio" id="american" name="card" value="american" /><label for="american">American Express</label>
<input type="radio" id="visa" name="card" value="visa" /><label for="visa">Visa</label>
<br />
<input type="reset" value="Reset" />
<div class="lab">
<button onclick="regexTest()">Submit</button>
<button onclick="return false">Cancel</button>
</div>

There are a number of issues with your code, below I've refactored it to be a bit easier to read and so it works.
The validation listener should be on the form's submit handler, not the submit button since forms can be submitted without clicking the button. Also, if you pass a reference to the form to the listener, it's much easier to access the form controls by name.
You should get the values of the form controls when the submit occurs, not before. Your code gets the values immediately, before the user has done anything (and possibly before the form even exists), so put that code inside the listener function.
Lastly, the regular expression needs to match anything that isn't a space or digit, so:
/[^\s\d]/
seems appropriate. However, this will still allow the form to submit if the fields are empty (they don't contain non-digits or non-spaces). You'll need to add a test for that.
function regexTest(form) {
// Get values when the function is called, not before
var pitch = form.pitchfork.value;
var chisel = form.chisels.value;
var saw = form.saw.value;
// Test for anything that's not a space or digit
// var format = /^(\s*|\d+)$/;
var format = /[^\s\d]/;
if (format.test(chisel) || format.test(pitch) || format.test(saw)) {
// There must be at least one non-space or non-digit in a field
alert("Repressed Action");
return false;
} else {
alert('Thank you');
// return false anyway for testing
return false;
}
}
<div class="lab">
<form onsubmit="return regexTest(this)">
Chisels: <input type="text" name="chisels" id="chis" size="5"><br>
Saw: <input type="text" name="saw" id="saw" size="5"><br>
Pitchfork: <input type="text" name="pitchfork" id="pitch" size="5"><br>
Customer Name: <input type="text" name="customer name" size="25"><br>
Shipping Address: <input type="text" name="shipping address" size="25">
<br> State:
<select name="states">
<option>Florida</option>
<option>Georgia</option>
<option>Alabama</option>
</select>
<br>
<input type="radio" id="master" name="card" value="master"><label for="master">MasterCard</label>
<input type="radio" id="american" name="card" value="american"><label for="american">American Express</label>
<input type="radio" id="visa" name="card" value="visa"><label for="visa">Visa</label>
<br>
<input type="reset" value="Reset">
<div class="lab">
<button>Submit</button>
<button onclick="return false">Cancel</button>
</div>
Hopefully this gets you to the next step.

How to check if all the radio buttons are selected or not?

Well I am trying to build a web page that has set of radio buttons. I am using jquery to check if all the radio buttons are checked or not. Here is the code:
<body>
<p class="Cal">Welcome,</p>
<hr />
<p class="Radio1">Answer the questions below. You will find the results after clicking 'Check my score'.</p>
<hr />
<form method="post">
<p class="Question">1. Do you sleep early at night? (Anywhere around 9-10pm)</p>
<p>
<label>
<span class="Radio">
<input type="radio" name="RadioGroup1" value="Yes" id="RadioGroup1_0" />
</span></label>
<span class="Radio"> Yes
<br />
<label>
<input type="radio" name="RadioGroup1" value="No" id="RadioGroup1_1" />
No
</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="Sometimes" id="RadioGroup1_2" />
Sometimes </label>
</span><br />
</p>
<p class="Question">2. Do you wake up early in morning?(Anywhere around 5-7am)</p>
<p>
<label>
<span class="Radio">
<input type="radio" name="RadioGroup2" value="Yes" id="RadioGroup2_0" />
Yes </span></label>
<span class="Radio"><br />
<label>
<input type="radio" name="RadioGroup2" value="No" id="RadioGroup2_1" />
No
</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="Sometimes" id="RadioGroup2_2" />
Sometimes
</label>
</span><br />
</p><input type="submit" value="Check my score" /></form></body>
Well there are 30 such questions. And my jquery code is as follows:
$(document).on('submit', 'form', function () {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.Radio').each(function () {
// Question text
var Question = $(this).prev().text();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(Question);
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
else{
msg = "Done!";
alert(msg);
}
return validate;
});
Now I tried all ways possible to make this work. But even after I check radio button for each answer I keep on getting the popup saying "Please answer the following questions:" and then a blank list. I never get the message "Done!" even though answer for all the questions are checked.
Where is the fault?

You can use the HTML5 required attribute, which is better option.
You can also use JavaScript loop and retrieve the value from each radio group, using
$("input:radio[name=radiogroupX]:checked")

Limit to One When the Checkbox is Checked

I have a Form where I want to limit the Data from my Drop Downlist when the checkbox is checked
So that When i Save theres a Message window that will Appear and Let the user know that he/she checked the checkbox for the Same Drop Down Value
using (Html.BeginForm("Save", "Worker", FormMethod.Post, new { id = "contactForm" }))
{
<input type="hidden" id="workerId" name="workerId" value="#workerId" />
<p>
<label for="ddlContactType">
Contact Type</label>
<span>
#Html.DropDownList("ddlContactType", new SelectList(ViewBag.ContactTypeList, "ID", "Display_Value", workerContactType), "[Please Select]",
new Dictionary<string, object>
{
{"class","validate[required] inputLong"}
})
</span>
</p>
<p>
<label for="txtContactValue">
Contact Value</label>
<span>
<input type="text" id="txtContactValue" name="txtContactValue" class="validate[required] inputLong" value="" />
<input type="checkbox" name="chkWorkerIsPrimary" id="chkWorkerIsPrimary" value="true"
checked="checked" />
<label>
Is Primary?</label>
</span>
</p>
<p>
<span>
<input type="submit" id="btnAdd" class="styledButton" value="Add" />
</span>
</p>
}
</div>
I need the Validation written in Javascript but i dont know how to start :(
Thanks

Jquery:
if($('#chkWorkerIsPrimary').is(':checked')){
//Your code
}
.is(':checked') if the user has checked the checkbox returns true, else return false
or javascript:
if ($("[name=chkWorkerIsPrimary]:checked").length == 0){
//your code
}

Looping through check-box in JavaScript not working

I'm currently building an order form but it seems that the method I am testing to loop through the check-boxes to see if a value is ticked or not isn't working. What am I doing wrong? In logic it seems all right - I would appreciate any help. Thanks in advance :-)
<script>
function order()
{
for(i=1;i<=7;i++)
{
alert(document.orderForm.order[i].checked);
}
}
</script>
<form name='orderForm'>
<p>Basic choices:</p>
<p>
<input type='checkbox' id='order1' name='order1' value='90' />
<label for="1"> Nano 1GB (£90)</label>
<br>
<input type='checkbox' id='order2' name='order2' value='155' />
<label for="2"> Nano 4GB (£155)</label>
<br>
<input type='checkbox' id='order3' name='order3' value='200' />
<label for="3"> Video 30GB (£200)</label>
<br>
<input type='checkbox' id='order4' name='order4' value='275' />
<label for="4"> Video 60GB (£275)</label>
</p>
<p>Options:</p>
<p>
<input type='checkbox' id='order5' name='order5' value='90' />
<label for="5"> Engraving (£10)</label>
<br>
<input type='checkbox' id='order6' name='order6' value='15' />
<label for="6"> Carrying case (£15)</label>
<br>
<input type='checkbox' id='order7' name='order7' value='18' />
<label for="7"> Car power adapter (£18)</label>
</p>
<p>
<input type="button" onClick="order();">
</p>
<p>Order Total</p>
<p>
<input type="text" name="orderTotal" id="orderTotal">
</p>
<p>VAT</p>
<p>
<input type="text" name="vat" id="vat">
</p>
<p>Order Total (+VAT)</p>
<p>
<input type="text" name="orderTotal_vat" id="orderTotal_vat">
</p>
</form>

document.orderForm.order is not an array. In fact, it doesn't exist. You need to build your id like this:
function order() {
for(i=1;i<=7;i++) {
alert(document.orderForm["order" + i].checked);
}
}
Here's a working fiddle.

Your current function implementation doesnt seem to be right.. well with the solution that you have here is how your funnction should look like:
<script>
function order()
{
for(i=1;i<=7;i++)
{
alert(document.getElementById("order"+i).checked);
}
}
</script>
or you can fix your names and then get it work. The array that you are trying to work with is constructed of a name that is shared across the checkboxes.
<script>
function order()
{
with(document.orderForm)
{
for(var i = 0; i < orderName.length; i++){
alert(orderName[i].checked);
}
}
}
</script>
<form name='orderForm'>
<p>Basic choices:</p>
<p>
<input type='checkbox' id='order1' name='orderName' value='90' />
<label for="1"> Nano 1GB (£90)</label>
<br>
<input type='checkbox' id='order2' name='orderName' value='155' />
<label for="2"> Nano 4GB (£155)</label>
<br>
<input type='checkbox' id='order3' name='orderName' value='200' />
<label for="3"> Video 30GB (£200)</label>
<br>
<input type='checkbox' id='order4' name='orderName' value='275' />
<label for="4"> Video 60GB (£275)</label>
</p>
<p>Options:</p>
<p>
<input type='checkbox' id='order5' name='orderName' value='90' />
<label for="5"> Engraving (£10)</label>
<br>
<input type='checkbox' id='order6' name='orderName' value='15' />
<label for="6"> Carrying case (£15)</label>
<br>
<input type='checkbox' id='order7' name='orderName' value='18' />
<label for="7"> Car power adapter (£18)</label>
</p>
<p>
<input type="button" onClick="order();">
</p>
<p>Order Total</p>
<p>
<input type="text" name="orderTotal" id="orderTotal">
</p>
<p>VAT</p>
<p>
<input type="text" name="vat" id="vat">
</p>
<p>Order Total (+VAT)</p>
<p>
<input type="text" name="orderTotal_vat" id="orderTotal_vat">
</p>
</form>
Fiddle: http://jsfiddle.net/P7CKG/
Without using with if you think that is confusing you:
<script>
function order()
{
for(var i = 0; i < document.orderForm.orderName.length; i++){
alert(document.orderForm.orderName[i].checked);
}
}
</script>

Your function is failing because the form elements are not named order[1], order[2], etc: they are named order1, order2. Thus, the code document.orderForm.order[i] references nothing.
Also, you should avoid accessing the form through the document.formName mechanism - get the element by ID instead. Likewise, rather than form.elementName, use form.elements[elementName] instead. These are, in my experience, more consistent between user agents.
function order () {
var frm = document.getElementById('orderForm');
for(i=1;i<=7;i++) {
alert(frm.elements['order'+i].checked);
}
return false;
}

function order(){
var arrChks = document.orderForm.getElementsByTagName('input');
for(i=0;i<arrChks.length;i++){
if(arrChks[i].type=='checkbox'){
alert(arrChks[i].checked);
}
}
}
but i reccomend you to use jquery or another javascript framework!
Complete example!
http://jsbin.com/amesek/
Zolved!