Calling a Object Oriented function from jQuery - javascript

I am kind of new to JQuery and Javascript and need your help on what I am missing here. I know the code works in jsfiddle.net but when I actually run it on my computer it's not doing anything. I want to keep the Object Oriented functions in "updated-formcheck.js" file separately.
I have a form validation HTML file with a jQuery function that calls my "updated-formcheck.js" file that checks all the empty fields and returns a msg. But when a submit button is clicked, nothing happens. Can you tell me why?
HTML file:
<script src="updated-formcheck.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function(e) {
validateNow(e);
});
});
</script>
In "updated-formcheck.js" file:
function validateNow(eventObj){
var isValid = true;
$('input[type="text"].required, textarea.required, select.required').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false) {
eventObj.preventDefault();
alert(this.e);
}else
this.s;
}


Because
$('input[type="text"].required, textarea.required, select.required')
in your code currently return an empty array, so each function is not called.
This is because you are looking for dom elements with a css class "required" that you doesn't have.


To get your code working I added a "required" class, which your js code is looking for, on the city element. I also updated the jQuery bind event to the form submit instead of a button click.
<html>
<head>
</head>
<body>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" class="required" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="updated-formcheck.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myform').on('submit', function(e) {
//e.preventDefault();
validateNow(e);
return false;
});
});
</script>
</body>
</html>

Related

How to change button value once all required field is filled

I'm trying to change the value of the submit button, only after required fields are filled. but as per my below code the value is changing even the required fields are not filled, additionally I'm need advice on how to mark at least one checkbox field as required.
$('#formSubmit').click(function(){
$(this).val("Processing");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>

You can listen to submit event instead:
$(document).ready(function(e) {
$('#myForm').on('submit', function(e){
e.preventDefault();
$('#formSubmit').val("Processing");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm">
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
</body>

$(document).ready(function(e) {
function validateForm() {
var isValid = true;
$('input[required]').each(function() {
if ( $(this).val() === '' ){
isValid = false;
}
});
return isValid;
}
$('#formSubmit').click(function(){
if(validateForm()) {
$(this).val("Processing");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
</body>

I'm adding my solution since nobody seems to answer the second part of the question. You need to modify your markup a little as done below in the answer.
function makeChecks() {
checkBoxes = $("input:checked"); //Find checked checkboxes
if (checkBoxes.length) { //Only submit if some checked checkbox(es) exist
$('#exampleForm').find('input').each(function() {
if ($(this).prop('required') && $(this).val() !== "") {
$("#formSubmit").val("Processing");
}
});
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="exampleForm">
<label>Call Me
<input type="checkbox" name="contactMethod[]"
id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]"
id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" onclick="makeChecks()" value="Submit" />
</form>
</body>

Id must be unique. Unique id must be assigned to each checkbox. Add required attribute to the checkbox controls.
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="callMe" value="CAll Me" required>
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="emailMe" value="Email Me" required>
</label>
You can use $(elem).val() != '' to check if a input element has been entered.
For checkbox, you can use $(elem).prop('checked') to check if a checkbox has been checked.
$(document).ready(function(e) {
$('#formSubmit').click(function(e){
if((!$('#callMe').prop('checked') || !$('#emailMe').prop('checked')) && $('#formName').val() != '' && $('#formEmail').val() != '' && $('#formMobile').val() != '')
$(this).val("Processing");
});
});
https://jsfiddle.net/snehansh/nwh0vct8/3/

Use JQuery to hide and show a div based on drop down selection

I'm trying to make a dropdown box hide and show a particular set of divs (ofwhich the class and the id are identical).
The values of the drop down correspond to the the name of the divs
My Attempt:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$("#submissionType").change(function () {
var submission = $(this).val();
if ($(this).val()) {
$("#"+submission).show();
} else {
$("#"+submission).hide();
}
});
});
</script>
html:
<select id="submissionType">
<option>Choose Submission Type</option>
<option value="member-submission">member-submission</option>
<option value="researcher-submission">researcher-submission</option>
<option value="student-submission">student-submission</option>
<option value="paper-submission">paper-submission</option>
</select>
<div class ="new-member-background">
<div class ="member-submission" id="member-submission">
<form action="SubmitData.php" method="post">
<input type="text" name="first" placeholder="First Name" />
<br/>
<input type="text" name="last" placeholder="Last Name" />
<br/>
<input type="text" name="title" placeholder="Title" />
<br/>
<input type="text" name="institution" placeholder="Institution" />
<br/>
<input type="number" name="dept_code" placeholder="Department Code" />
<br/>
<input type="text" name="division" placeholder="Division" />
<br />
<input type="text" name="email" placeholder="Email" />
<br/>
<input type="text" name="website" placeholder="Website" />
<br/>
<button type="submit" name="submit">Sign Up</button>
</form>
</div>
/**...Other divs...*/
</div>

You should hide them all and then reveal the selected one. EG:
$(function () {
//hide them all to begin with. It would be easier if they all shared a classname. You could also do this in CSS)
$("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide();
//on change
$("#submissionType").change(function () {
var submission = $(this).val();
//hide them all:
$("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide();
//show the selected one
$("#"+submission).show();
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<select id="submissionType">
<option>Choose Submission Type</option>
<option value="member-submission">member-submission</option>
<option value="researcher-submission">researcher-submission</option>
<option value="student-submission">student-submission</option>
<option value="paper-submission">paper-submission</option>
</select>
<div class ="new-member-background">
<div class ="member-submission" id="member-submission">
<form action="SubmitData.php" method="post">
<input type="text" name="first" placeholder="First Name" />
<br/>
<input type="text" name="last" placeholder="Last Name" />
<br/>
<input type="text" name="title" placeholder="Title" />
<br/>
<input type="text" name="institution" placeholder="Institution" />
<br/>
<input type="number" name="dept_code" placeholder="Department Code" />
<br/>
<input type="text" name="division" placeholder="Division" />
<br />
<input type="text" name="email" placeholder="Email" />
<br/>
<input type="text" name="website" placeholder="Website" />
<br/>
<button type="submit" name="submit">Sign Up</button>
</form>
</div>
/**...Other divs...*/
</div>

How can I save multiple form outputs (forms are on diffrent pages, biut shows in one iframe) in one preview page

I have 2 separate forms that displays in one iframe, I want users to enter data in input, click on next button then enter input of form 2, click on a review button, then show form 1 and form 2 output in one preview page before submitting the data to a database. I have tried session storage but I know that my code is wrong.
var formValues = [];
SessionStorage.setItem("fname", "fname");
SessionStorage.setItem("lname", "lname");
SessionStorage.setItem("phone-field", "phone-field");
SessionStorage.setItem("email-field", "email-field");
$(document).ready(function() {
$(".next").click(fuction() {
$("#fname").val("fname");
$("#lname").val("lname");
$("#phone-field").val("phone-field");
$("#email-field").val("email-field");
var formValues = sessionStorage.getItem("fname");
console.log(formValues);
$(document).ready(function() {
$('.next').click(function() {
var formValues = [];
// get values from inputs in first fieldset
$('.field1 :input').each(function() {
formValues.push($(this).val());
});
formValues.pop(); //remove the button from input values
console.log(formValues);
// set values in second fieldset
$('.field3 :input').each(function(index) {
if (formValues[index]) {
$(this).val(formValues[index]);
}
});
$('.current').removeClass('current').hide().next().show().addClass('current');
});
$('.previous').click(function() {
$('.current').removeClass('current').hide().prev().show().addClass('current');
});
});
$(document).ready(function() {
$('.review').click(function() {
var formValues = [];
// get values from inputs in first fieldset
$('.field2 :input').each(function() {
formValues.push($(this).val());
});
formValues.pop(); //remove the button from input values
console.log(formValues);
// set values in second fieldset
$('.field3 :input').each(function(index) {
if (formValues[index]) {
$(this).val(formValues[index]);
}
});
$('.current').removeClass('current').hide().next().show().addClass('current');
});
$('.previous').click(function() {
$('.current').removeClass('current').hide().prev().show().addClass('current');
});
});
FORM 1
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="helpdeskform" action="process.php" method="post">
<fieldset class="field1 current">
<h2>Form</h2>
<p>
<label class="form-label first-name" for="fname">First Name:</label>
<input name="fname" id="fname" placeholder="First Name" type="text" />
</p>
<p>
<label class="form-label last-name" for="lname">Last Name:</label>
<input name="lname" id="lname" placeholder="Last Name" type="text" />
</p>
<p>
<label class="form-label" for="phone-field">Phone:</label>
<input name="phone" id="phone-field" placeholder="Phone Number" type="text" />
</p>
<p>
<label class="form-label" for="email-field">E-mail:</label>
<input name="email" id="email-field" placeholder="E-mail" type="text" />
</p>
<hr />
<label for="review">
<input onclick="location.href='index3.html'" id="next" name="next" class="next action-button" value="Next" type="button" />
</label>
</fieldset>
<fieldset class="field3">
<p>First Name:
<input class="show_fname" readonly="readonly" type="text" />
</p>
<p>Last Name:
<input class="show_lname" readonly="readonly" type="text" />
</p>
<p>Type of Request:
<input class="show_type_of_request" readonly="readonly" type="text" />
</p>
<p>Short Description:
<input class="show_subject" readonly="readonly" type="text" />
</p>
<p>Additional Comments:
<input class="show_comments" readonly="readonly" type="text" />
</p>
<p style="float:left;">
<label for="previous">
<input name="previous" class="previous action-button" value="Previous" type="button" />
</label>
</p>
<p style="float:left; padding-left: 10px;">
<label for="Submit">
<input value="Submit" name="submit" class="action-button" type="submit" />
</label>
</p>
</fieldset>
</form>
</body>
</html>
fORM 2
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="helpdeskform" action="process.php" method="post">
<fieldset class="field2 current">
<h2>Form 2</h2>
<label for="classify">Type of Request:</label>
<select name="classify" id="classify">
<option value="">Please select an option..</option>
<option value="maintainence">Maintainence of Site</option>
<option value="troubleshoot">Troubleshoot/Error</option>
<option value="new">Create new content</option>
</select>
<p></p>
<p>
<label for="subject">Short Description: <span class="counter-field">
<span id="counter"></span> characters left.</span>
</label>
<input name="subject" id="subject" placeholder="Subject" type="text" />
</p>
<p>
<label for="desc">Additional Comments:</label>
<textarea style="font-family: Arial, Veranda, Sans serif" name="desc" id="desc" cols="30" rows="10" placeholder="Short Description"></textarea>
</p>
<p>
<label for="review">
<input name="review" onclick="showData();" class="review action-button" value="Review" type="button" />
</label>
</p>
</fieldset>
<fieldset class="field3">
<!-- #TODO PREVIEW ALL FORM INPUTS -->
<p>First Name:
<input class="show_fname" readonly="readonly" type="text" />
</p>
<p>Last Name:
<input class="show_lname" readonly="readonly" type="text" />
</p>
<p>Phone:
<input class="show_phone" readonly="readonly" type="text" />
</p>
<p>E-mail:
<input class="show_email" readonly="readonly" type="text" />
</p>
<p>Type of Request:
<input class="show_type_of_request" readonly="readonly" type="text" />
</p>
<p>Short Description:
<input class="show_subject" readonly="readonly" type="text" />
</p>
<p>Additional Comments:
<input class="show_comments" readonly="readonly" type="text" />
</p>
<p style="float:left;">
<label for="previous">
<input name="previous" class="previous action-button" value="Previous" type="button" />
</label>
</p>
<p style="float:left; padding-left: 10px;">
<label for="Submit">
<input value="Submit" name="submit" class="action-button" type="submit" />
</label>
</p>
</fieldset>
</form>
</body>
</html>

Javascript Document Window

Why wont my popup window pop up?
My user should enter information for an appointment. Once Submit is hit a document window should pop up. The submit button appears to work. The clear button is working also. I programmed a function to handle the window and set the onSubmit to return the function.
< script type = "text/javascript" >
function popUpWindow() { //window should return user's name in a window
newWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=500,height=200');
newWin.document.write("<body bgcolor='yellow'><h3>Appointment Confirmation</h3>);
newWin.document.write("
Your name is: " + document["
form "].name.value);
newWin.document.close();
}
</script>
<html>
<head>
<title>Project</title>
</head>
//this form should accept user's input
<body>
<form name="form" onSubmit="return popUpWindow();">
Please enter your name:
<input type="text" name="name" value="" size="50" />
</p>
<p>
Address:
<input type="text" name="address" size="50" />
</p>
<p>
Phone:
<input type="text" name="area_code" size="10" />
</p>
<p>
Email:
<input type="text" name="email" value="" size="20" />
</p>
<p>
<legend>Stylist</legend>
</p>
<input type="radio" name="stylist" id="stylist1" value="dream" />Dream
<input type="radio" name="stylist" id="stylist2" value="aubrey" />Aubrey
<input type="radio" name="stylist" id="stylist3" value="stag" />Stag
<input type="radio" name="stylist" id="stylist1" value="halo" />Halo
<p>
<legend>Services</legend>
</p>
<input type="checkbox" name="service" id="service1" value="cut" />Cut
<br/>
<input type="checkbox" name="service" id="service2" value="relaxer" />Relaxer
<br/>
<input type="checkbox" name="service" id="service1" value="weave" />Weave
<br/>
<input type="checkbox" name="service" id="service1" value="braids" />Braids
<br/>
<input type="checkbox" name="service" id="service1" value="wash" />Wash and Style
<br/>
<input type="checkbox" name="service" id="service1" value="natural" />Natural
<br/>
<p>Leave Comments</p>
<textarea name="comments" id="comments" align="left" rows "8" cols "75"></textarea>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</body>
</html>

Fiddle works but test page doesn't (missing .ready handler)

I have a problem, I want to show some specific field when i select a specific radio button. I did that and I test on this page (http://jsfiddle.net/niklakis/cw0qLnk5/5/) but when i get the code (which is the below) it does not show the specific fields when I select the radio button.
Can you help me please?
THIS IS THE WHOLE CODE ....
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$("input[type='radio']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorRegister").show();
} else {
$("#DoctorRegister").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
}
});</script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<label>First Name
<input type="text" name="fname" required="required" />
</label>
<br/>
<br/>
<label>Last Name
<input type="text" name="lname" required="required" />
</label>
<br />
<br />
<label>Username
<input type="text" name="username" required="required" />
</label>
<br />
<br />
<label>Email
<input type="text" name="email" required="required" />
</label>
<br />
<br />
<label>Password
<input type="text" name="password" required="required" />
</label>
<br/><br/>
User Type:
<br/>
Doctor <input type="radio" name="answer" value="Doctor" />
Patient <input type="radio" name="answer" value="Patient" />
<br/>
<br/>
<input style="display:none;" type="text" name="DoctorRegister" id="DoctorRegister" />
<br/>
<br/>
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGM" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGF" value="male" id="PatientGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label style="display:none;" id="Disease">Disease:</label>
<select style="display:none;" id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
</fieldset>
</body>
</html>

You're executing your code before the document is rendered. Either:
Move your code to the end of the document before the closing body tag or
Put your code in a document ready handler in the head like:
$( document ).ready(function() {
// your code here
});
jsFiddle example

$("input[type='radio']").change() will fire for all inputs of type radio button. So, try with:
$("input[type='radio'][name='answer']").change()

Categories