Develop Reference

Error submitting form using JQuery Mobile

I'm making a small web app using JQuery Mobile and Multi Page architecture.
I have a form as my second page. When I click the submit button, I get this error on my console. I need this web app to work on my phone but I'm testing it on my PC browser to see for possible errors.
I'm using localStorage to save the form data in an array in the phone's memory.
Why am I getting this error? I tried with "get" but it just refreshes and takes me back to my home page.
below is my form code:
<div data-role="page" id="entry_page">
<div data-role="header">
Clear
<h3 id="chickenNameHeader"></h3>
<a href="#" onclick="showLogs()" data-icon="action" >Show Logs</a>
</div>
<div class="form-container">
<form action="" method="post">
<label for="ID_input">ID:</label>
<input id="ID_input" type="number" placeholder="xxxx">
<label for="weight_input">Weight (g):</label>
<input id="weight_input" type="number" step="any" min="0" max="10000" placeholder="0. → 10000">
<label for="eggs_input">Eggs laid:</label>
<input id="eggs_input" type="number" min="0" max="4" placeholder="0 → 4">
<label for="grain_input">Grain eaten (g):</label>
<input id="grain_input" type="number" step="any" min="0" max="1000" placeholder="0. → 1000">
<label for="category_input">Category:</label>
<select id="category_input" required="true">
<option value="empty" selected></option>
<option value="poor">Poor</option>
<option value="average">Average</option>
<option value="good">Good</option>
</select>
<button id="submitBtn" type="submit" name="button">Save log entry</button>
</form>
</div>
<div data-role="footer" class="ui-bar">
<a id="6" href="#" onclick="traverse(this)" data-icon="arrow-r" data-ajax="false" >Next</a>
<a id="7" href="#" onclick="traverse(this)" data-icon="arrow-l" data-ajax="false" >Previous</a>
<a id="5" onclick="getID(this)" href="#" data-icon="home" >Home</a>
</div>
</div>
Below is my submit button handler in JS:
//Initialise entry page for the first time and handle form submission validation
$(document).delegate("#entry_page","pageinit",function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
changeHeaderName("#chickenNameHeader");
$("#submitBtn").click(function(event)
{
var id = $.trim($("#ID_input").val());
var weight = $.trim($("#weight_input").val());
var eggs = $.trim($("#eggs_input").val());
var grain = $.trim($("#grain_input").val());
var category = $("#category_input").val();
var error_free = 1;
if(id == "")
{
alert("Please enter a 4 digit ID");
error_free = 0;
}
if(weight == "")
{
alert("Please enter the amount of weight");
error_free = 0;
}
if(eggs == "")
{
alert("Please enter the amount of eggs laid");
error_free = 0;
}
if(grain == "")
{
alert("Please enter the amount of grain eaten");
error_free = 0;
}
if(category == "empty")
{
alert("Please select a category");
error_free = 0;
}
if(Number(id) < 1000 || Number(id) > 9999)
{
alert("ID must be 4 digits");
error_free = 0;
}
if(Number(weight) < 0 || Number(weight) > 10000)
{
alert("Weight must be between 0. and 10000");
error_free = 0;
}
if(Number(grain) < 0 || Number(grain) > 1000)
{
alert("Grains eaten must be between 0. and 1000");
error_free = 0;
}
if(latitude == "" || longitude == "")
{
alert("Location not given. Please allow location access and refresh the application");
error_free = 0;
}
if(dateTime == "")
{
alert("Date & Time not acquired");
error_free = 0;
}
if(!Boolean(error_free))
{
alert("Error saving log. Please fix problems and try again.");
event.preventDefault();
}
else
{
var item = {
id:id,
dateTime:dateTime,
latitude:latitude,
longitude:longitude,
weight:weight,
eggs:eggs,
grain:grain,
category:category };
switch (chickenNumber) {
case 0:
foghorn_items.push(item);
localStorage.foghorn_items = JSON.stringify(foghorn_items);
break;
case 1:
little_items.push(item);
localStorage.little_items = JSON.stringify(little_items);
break;
case 2:
tweety_items.push(item);
localStorage.tweety_items = JSON.stringify(tweety_items);
break;
case 3:
hawk_items.push(item);
localStorage.hawk_items = JSON.stringify(hawk_items);
break;
case 4:
bertha_items.push(item);
localStorage.bertha_items = JSON.stringify(bertha_items);
break;
}
alert("Log saved");
}
});
});
EDIT: I'm using Nginx as my web server if that helps.

Putting "error_page 405 =200 $uri;" in the Nginx.conf config file made the error go away, but yet to see if my data is getting stored in the memory.

Clear input event - HTML and JavaScript

So I have this piece of HTML and JavaScript
function validate() {
const tabs = document.getElementsByClassName("tab");
const input = tabs[currentTab].querySelectorAll("input[type=tel], input[type=text], input[type=time], input[type=number], input[type=email]");
const radio = tabs[currentTab].querySelectorAll("input[type=radio]");
const select = tabs[currentTab].getElementsByTagName("select");
let valid = true;
if (radio.length == 0) {
for (let i = 0; i < input.length; i++) {
if (input[i].value == "") {
valid = false;
break;
}
}
for (let i = 0; i < select.length; i++) {
if (select[i].value == "") {
valid = false;
break;
}
}
} else if (radio[0].name == "phnum" && radio[0].checked) {
if (input[0].value == "" || input[1].value == "") {
valid = false;
}
} else if (radio[1].name == "phnum" && radio[1].checked) {
if (input[0].value == "" || input[1].value == "" || input[2].value == "") {
valid = false;
}
}
if (valid) {
document.getElementById("next").className = "prevNext";
}
}
<span id="radio">
<label for="phnum1" class="radio-container">
<input type="radio" name="phnum" id="phnum1" value="1" onchange="displayPhone(this);">1 Number
<span class="radio"></span>
</label>
<label for="phnum2" class="radio-container">
<input type="radio" name="phnum" id="phnum2" value="2" onchange="displayPhone(this);">2 Numbers
<span class="radio"></span>
</label>
<label for="phnum3" class="radio-container">
<input type="radio" name="phnum" id="phnum3" value="3" onchange="displayPhone(this);">3 Numbers
<span class="radio"></span>
</label>
</span>
</p><br>
<p id="ph1" class="disable">
<label for="phone-number1">Add a Phone Number: </label><input type="tel" name="phone-number1" id="phone-number1" class="input" placeholder="Add A Phone Number" required oninput="validate();">
</p>
<p id="ph2" class="disable">
<label for="phone-number2">Add a Phone Number: </label><input type="tel" name="phone-number2" id="phone-number2" class="input" placeholder="Add A Phone Number" required onchange="validate();">
</p>
<p id="ph3" class="disable">
<label for="phone-number3">Add a Phone Number: </label><input type="tel" name="phone-number3" id="phone-number3" class="input" placeholder="Add A Phone Number" required onchange="validate();">
</p>
that handles the input added by the user to make a button clickable if all necessary data is added. the problem is when i delete inside the input with back arrow key(the one above enter) the button remains active even if the condition for its activation no longer applies.
thank you guys for your time and help i really do appreciate it. :D

One thing I see - you're setting the class name if valid == true via document.getElementById("next").className = "prevNext";.
But nowhere are you removing that class name if valid == false.
That's probably why you aren't seeing the button disappear when you empty out the fields (if I understand your problem correctly).
if (!valid) { document.getElementById("next").className = ""; } is a quick and dirty way to get what you need.

The alert statements in the javascript do not show up?

The following javacript is used for validation checking. However the alert
statements do not appear when there is missing input.
I tried to delete the if statement and use only the alert statement and the
script works fine.
Is there anything wrong with the if statements?
Below is my HTML code:
<html>
<head>
<title>A More Complex Form with JavaScript Validation</title>
<script type="text/javascript">
// Validation form
function validate_form()
{
valid = true;
// check for missing name
if ( document.contact_form.contact_name.value == "" )
{
alert("Please fill in the 'Your Name' box,");
valid = false;
}
// check for missing gender
if ( document.contact_form.gender[0].checked == false ) && (
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
// check for missing age
if ( document.contact_form.age.selectedIndex == 0 )
{
alert("Please select your Age.");
valid = false;
}
// check for missing terms
if ( document.contact_form.terms == false )
{
alert("Please check the Terms & Conditions box.");
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h1>Please Enter Your Details Below</h1>
<form name="contact_form" onsubmit="validate_form()">
<p>Your Name:
<input type="text" name="contact_name" size="20">
</p>
<p>
Your Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</p>
<p>
Your Age:
<select name="age">
<option value="1">0-14 years</option>
<option value="2">15-30 years</option>
<option value="3">31-44 years</option>
<option value="4">45-60 years</option>
<option value="5">61-74 years</option>
<option value="6">75-90 years</option>
</select>
</p>
<p>
Do you agree to the Terms and Conditions?
<input type="checkbox" name="terms" value="yes">Yes
</p>
<input type="submit" name="submit" value="Send Details">
</form>
</body>
</html>

if ( document.contact_form.gender[0].checked == false ) && (
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
you have to change if condition like that
if ( document.contact_form.gender[0].checked == false &&
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
Your script can't fire up because of this mistake.
Tip: You can check script errors from dev-console of browsers like Chrome Console.
as "trincot" said by comment, you can also use ! operator to check boolean values like that.
if ( !document.contact_form.gender[0].checked && !document.contact_form.gender[1].checked )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}

Onclick Validation not working

I've been working on this assignment for the longest while. My form validations weren't working previously but then I found out what the error was & everything was working perfectly.
Later on, I had made some changes to the code then deleted those changes and now the validations aren't working again & I can't seem to find what the problem is this time.
Below is my unfinished code:
function validateEmail() {
var email = document.getElementById('email').value;
if( email==null || email=="")
{
alert("Please input an email address");
}
}
function validateFName() {
var firstname = document.getElementById('firstname').value;
if( firstname==null || firstname=="")
{
alert("Please input a last name");
return false;
}
}
function validateLName() {
var lastname = document.getElementById('lastname').value;
if( lastname==null || lastname=="")
{
alert("Please input a last name");
}
}
function validateGender() {
var gender = document.getElementById('gender').value;
if( gender==null || gender=="")
{
alert("Please select a gender");
}
}
function validateDate() {
var date = document.getElementById('date').value;
if( date==null || date=="")
{
alert("Please select a date");
}
}
function validateVName() {
var vname = document.getElementById('vname').value;
if( vname==null || vname=="")
{
alert("Please input a victim's name");
}
}
function validateVEmail() {
var vemail = document.getElementById('vemail').value;
if( vemail==null || vemail=="")
{
alert("Please input a victim's email");
}
}
<div id="navi">
<nav>
<ul class="fancyNav">
<li id="home">Home</li>
<li id="news">TRUTH</li>
<li id="about">DARE</li>
</ul>
</nav>
</div>
<div id="box">
<form id="truth">
<h1> Truth </h1>
<label> First Name: </label> <input type="text" name="firstname" id="firstname" maxlength="30" placeholder="John" /> <br><br>
<label> Last Name: </label> <input type="text" name="lastname" id="lastname" maxlength="30" placeholder="Doe" /> <br><br>
<label> Email:</label> <input type="text" name="email" id="email" /> <br><br>
<label> Male </label><input type="radio" name="gender" id="gender" value="male"/>
<label> Female </label><input type="radio" name="gender" id="gender" value="female"/> <br><br>
<label> Date to be performed: </label><input type="date" name="date" id="date" /><br><br>
<h2> Victim </h2>
<label> Name: </label> <input type="text" name="vname" id="vname" maxlength="30" /><br><br>
<label> Email:</label> <input type="text" name="vemail" id="vemail" /> <br><br>
<h2> Please select a truth questions below </h2> <br>
<input type="radio" name="truth" value="q1"> Have you ever fallen and landed on your head? <br>
<input type="radio" name="truth" value="q2"> Have you ever return too much change? <br>
<input type="radio" name="truth" value="q3"> Have you ever been admitted into the hospital? <br>
<input type="radio" name="truth" value="q4"> Have you ever baked a cake? <br>
<input type="radio" name="truth" value="q5"> Have you ever cheated on test? <br>
<input type="radio" name="truth" value="q6"> Did you ever wish you were never born? <br>
<input type="radio" name="truth" value="q7"> Did you ever hide from Sunday School? <br><br>
<input type="submit" onclick="validateFName(); validateLName(); validateGender(); validateDate(); validateVName(); validateVEmail();" /> <br>
</form>
</div>

<input type="submit" onclick="validateFName(); validateLName(); validateGender(); v
typo in function name, onclick="validateFName()...
it should be validateLName()
and you define duplicate
<!DOCTYPE html>
<html> // remove this one

The best possible solution would be to not use any alert boxes at all but instead embed the error message next to the place of the error, but that would be more involved. Instead, to stick with this solution, first add an id to your submit button:
<button type="submit" id="truth-submit">Submit</button>
Then, attach an onclick handler through JavaScript (and rewrite your code to be more re-usable):
// Only run when the window fully loads
window.addEventListener("load", function() {
function validateEmail() {
var email = document.getElementById("email").value;
if (email === null || email === "") {
return "Please input an email address";
}
return "";
}
function validateFName() {
var firstname = document.getElementById("firstname").value;
if (firstname === null || firstname === "") {
return "Please input an first name";
}
return "";
}
function validateLName() {
var lastname = document.getElementById("lastname").value;
if (lastname === null || lastname === "") {
return "Please input an last name";
}
return "";
}
function validateGender() {
var gender = document.getElementById("gender").value;
if (gender === null || gender === "") {
return "Please select a gender";
}
return "";
}
function validateDate() {
var date = document.getElementById("date").value;
if (date === null || date === "") {
return "Please select a date";
}
return "";
}
function validateVName() {
var vname = document.getElementById("vname").value;
if (vname === null || vname === "") {
return "Please input a victim's name";
}
return "";
}
function validateVEmail() {
var vemail = document.getElementById("vemail").value;
if (vemail === null || vemail === "") {
return "Please input a victim's email";
}
return "";
}
document.getElementById("truth-submit").addEventListener("click", function(event) {
// Grab all of the validation messages
var validationMessages = [validateFName(), validateLName(),
validateGender(), validateDate(), validateVName(), validateVEmail()];
var error = false;
// Print out the non-blank ones
validationMessages.forEach(function(message) {
if (message) {
alert(message);
error = true;
}
});
// Stop submission of the form if an error occurred
if (error) {
event.preventDefault();
}
}, false);
}, false);

how to work radio buttons into a nesting conditional

So I learning jQuery atm, and have to make a Loan calculator based on choices, as well as validate enteries, then output a result.
l wanted to make sure you guys knew what i was trying to do, so i have here a flow chart of what is supposed to happen:
http://i59.tinypic.com/8z02sh.jpg
that shows what is supposed to be happening. Problem is i dont know how to do this is Jquery. The radio button selector i found online (through another question on here) seems weird and i dont know how to use it. I could do this using javascript, but then i wouldn't be learning anything. So here's my code so far.
Also, im getting an error on line 14 of my JS (line 14 in JSfiddle), and i cant figure out what it is.
JSfiddle: http://jsfiddle.net/keup5vaw/1/
HTML:
<h1>Loan Calc</h1>
<form id="salaryForm" name="salaryForm2" method="Post" action="javascript:void(0)">
<label for="salary">Enter your annual salary</label>
<input type="text" name="salary" id="salary">
</form>
<form id="creditform" name="creditForm" method="Post" action="javascript:void(0)">
<p>Please select your Credit Score</p>
<p><input type="radio" name="radio" id="over1" value="0">
<label for="over1">Over 600</label></p>
<p><input checked type="radio" name="radio" id="under1" value="0">
<label for="under1">Under 600</label></p>
</form>
<p> How long have you worked at your current job? </p>
<input class="job" id="job1" name="job" type="radio" value="0">
<label for="job1">I have worked at my current job over 1 year.</label><br>
<br/>
<input checked class="job" id="job2" name="job" type="radio" value="0">
<label for="job2">I have worked at my current job less than 1 year.</label><br>
</form>
<input type="button" id="check" name="check" value="Check">
<div id="message"></div>
and JS -
$('#check').click(function () {
var salary;
var isValid = $('#salaryForm').validate().form();
// if validation passes, display a message
if (isValid) {
var salary = Number($('#salary').val());
if (salary < 40000) {
if ($('input[name=radio]:checked').length > 0) {
if ($('input[name=job1]:checked').length > 0) {
$('#message').html("Loan Approved.")
} else if {
$('#message').html("Loan Denied.")
} else if {
$('#message').html("Loan Denied.")
}
}
} else(salary >= 40000) {
if ($('input[name=radio]:checked').length > 0) {
if ($('input[name=job1]:checked').length > 0) {
$('#message').html("Loan Approved.")
} else if {
if ($('input[name=job1]:checked').length > 0) $('#message').html("Loan Approved.")
} else if {
$('#message').html("Loan Denied.")
}
}
}
});
// form validation
$('#salaryForm').validate({
rules: {
salary: {
required: true,
digits: true,
range: [1, 1000000]
}
}
});
As per usual, thank you ahead of time, you guys are awesome.
Edit: Updated after Mottie helped out (thank you!), Still not seeing what line 14 is doing wrong, but changed the else to else if, and used the tidy up.

If your having problems with the checking if a radio is checked you can use this its a lot cleaner than what you are currently using and is more intuitive.
if($("#id1").is(":checked")){
// do something
}else if($("#id2").is(":checked")){
// do something else
}
Hope this helps.

Formatting your javascript is really important to catch those type of syntax error for your self. As #Mottie said use some kind of javascript formatter to fix those issues.Tidy Up,
http://jsbeautifier.org/ are better place to start up with. Here is the correct code
$('#check').click(function()
{
var salary;
var isValid = $('#salaryForm').validate().form();
// if validation passes, display a message
if (isValid)
{
var salary = Number($('#salary').val());
if (salary < 40000)
{
if ($('input[name=radio]:checked').length > 0)
{
if ($('input[name=job1]:checked').length > 0)
{
$('#message').html("Loan Approved.")
}
else
{
$('#message').html("Loan Denied.")
}
}
else
{
$('#message').html("Loan Denied.")
}
}
else if (salary >= 40000)
{
if ($('input[name=radio]:checked').length > 0)
{
if ($('input[name=job1]:checked').length > 0)
{
$('#message').html("Loan Approved.")
}
else
{
if ($('input[name=job1]:checked').length > 0)
$('#message').html("Loan Approved.")
}
}else
{
$('#message').html("Loan Denied.")
}
}
}
});
// form validation
$('#salaryForm').validate(
{
rules:
{
salary:
{
required: true,
digits: true,
range: [1, 1000000]
}
}
});

modified your jquery
http://jsfiddle.net/cvynLaqf/
$('#check').click(function(){
var salary;
//var isValid = $('#salaryForm').validate().form();
var isValid = true;
// if validation passes, display a message
if (isValid){
var salary = Number($('#salary').val());
if (salary < 40000){
if ($('input[type=radio]:checked').length > 0){
if ($('input[value=over1]:checked').length > 0) {
//if over 600 do this
if ($('input[id=job1]:checked').length > 0)
$('#message').html("Loan Approved.");
else
$('#message').html("Loan Denied.");
}
else {
$('#message').html("Loan Denied.");}
}
else {
$('#message').html("Loan Denied.");
}
} else if( salary >= 40000){
if ($('input[type=radio]:checked').length > 0){
if ($('input[value=over1]:checked').length > 0) {
//over 600 do this
$('#message').html("Loan Approved.");}
else {
//under 600 do this
if ($('input[id=job1]:checked').length > 0)
$('#message').html("Loan Approved.");
else
$('#message').html("Loan Denied.");
}
}
else {
$('#message').html("Loan Denied.");}
}
}
});
// form validation
//$('#salaryForm').validate({
// rules: {
// salary: {
// required: true,
// digits: true,
// range: [1, 1000000]
// }
// }
//});
<h1>Loan Calc</h1>
<form id="salaryForm" name="salaryForm2" method="Post" action="javascript:void(0)">
<label for="salary">Enter your annual salary</label>
<input type="text" name="salary" id="salary">
</form>
<form id="creditform" name="creditForm" method="Post" action="javascript:void(0)">
<p>Please select your Credit Score</p>
<p><input type="radio" name="radio" id="over1" value="over1">
<label for="over1">Over 600</label></p>
<p><input checked type="radio" name="radio" id="under1" value="under1">
<label for="under1">Under 600</label></p>
</form>
<p> How long have you worked at your current job? </p>
<input class="job" id="job1" name="job" type="radio" value="0">
<label for="job1">I have worked at my current job over 1 year.</label><br>
<br/>
<input checked class="job" id="job2" name="job" type="radio" value="1">
<label for="job2">I have worked at my current job less than 1 year.</label><br>
</form>
<input type="button" id="check" name="check" value="Check">
<div id="message"></div>
i commented out your validation because im getting an error on my part

Despite an answer already being accepted, I figured I'd post an updated script since you're just beginning to learn jQuery to maybe help you improve further.
You're way over complicating the conditionals (if/else statements) for starters.
Break it down based on the behavior you would like to accomplish and word out the functionality the same way too.
Makes it a lot easier to read if you (or someone else) needs to look at it again in 6 months.
Has Good Credit?
Has Standing Job?
Is Loan Approved?
Has Good Salary?
Here's the rewritten functional fiddle.
http://jsfiddle.net/q3xpsLmL/
I also merged the individual forms to clean up a little. I changed the validation to HTML 5's required, type=number, min and max since the .validate() plugin was not in the fiddle.
Relying on HTML 5 and jQuery submit() event to validate the form.
Some more info on HTML 5 validation and pattern if you're interested:
http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute
You can even style it using css :valid and :invalid pseudo-classes
I had trouble interpreting your logic for a applicant with a good salary. So I set it to approve if the person has a good salary and either good credit or a standing job.
If you have questions on it just add a comment.
HTML
<h1>Loan Calc</h1>
<form id="salaryForm" name="salaryForm2" method="Post" action="javascript:void(0);">
<label for="salary">Enter your annual salary</label>
<input id="salary" type="number" name="salary" min="0" max="1000000000" required>
<p>Please select your Credit Score</p>
<p>
<input type="radio" name="radio" id="over1" value="over1">
<label for="over1">Over 600</label>
</p>
<p>
<input checked type="radio" name="radio" id="under1" value="under1">
<label for="under1">Under 600</label>
</p>
<p>How long have you worked at your current job?</p>
<input class="job" id="job1" name="job" type="radio" value="0">
<label for="job1">I have worked at my current job over 1 year.</label>
<br>
<br/>
<input checked class="job" id="job2" name="job" type="radio" value="1">
<label for="job2">I have worked at my current job less than 1 year.</label>
<br>
<button type="submit" id="check" name="check">Check</button>
</form>
<div id="message"></div>
JavaScript
//use strict to ensure variables are defined and to prevent collisions
"use strict";
//define DOM elements so events do not need refind the element.
var salryForm = $('#salaryForm');
var salaryElement = $('#salary');
var messageElement = $('#message');
var radioButtons = $('input[type=radio]');
var goodCredit = radioButtons.filter('[name=radio][value=over1]');
var standingJob = radioButtons.filter('[name=job][value=0]');
var isLoanApproved = function(salary){
//always be pecimistic and decline unless all conditions are met
var result = false;
var hasGoodCredit = goodCredit.is(':checked');
var hasStandingJob = standingJob.is(':checked');
var hasGoodSalary = (salary >= 40000);
/*
* if applicant doesn't have a good salary
* they have to have good credit and standing job to be approved
*/
if (!hasGoodSalary && hasGoodCredit && hasStandingJob) {
result = true;
/**
* otherwise if applicant does have a good salary
* they only need to have either good credit or standing job to be approved
*/
} else if(hasGoodSalary && (hasGoodCredit || hasStandingJob)) {
result = true;
}
return result;
};
/**
* track on submit rather than click so you can catch "<enter>" key presses as well
*/
salryForm.submit(function(e) {
var salary = salaryElement.val();
messageElement.html('Loan ' + (isLoanApproved(salary) ? 'Approved' : 'Denied'));
return false;
});