I am currently working on a web form that is supposed to take in user input. The marital form asks the user if they are currently married and if they answer "yes" then another drop down type of question is suppose to appear underneath asking "how many times how you been married?" and so on and so forth. I created the decisions statements, but when I tested the marital form and put in "yes" nothing additional popped up.
The expected outcome is that when the user answers "yes" another question it is supposed to appear underneath.
Marital.php
<!doctype html>
<html lang="en">
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.active {
background-color: #4CAF50;
color: white;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
<head>
</head>
<body style="text-align:center;">
<div style="margin:0 auto; text-align:center;">
<img src="../Images/CBH Logo 200px.png" alt="CBH Logo" height="80" width="80">
</div>
<h2>Johnson Behavioral Health Mental Evaluation Intake Application</h2>
<br>
<div class="navbar">
<a>Education History</a>
<a class="active" href="Marital.php">Marital History</a>
<a>Employment History</a>
<a>Military History</a>
<a>Substances History</a>
<a>Social/Personal History</a>
<a>Physical Health History</a>
<a>Mental Health History</a>
</div>
<form method="POST" id="marital_form" onsubmit="SetSectionComplete('marital')">
<br></br>
<table style="margin:0 auto;">
<tr>
<td class="Question">
Are you currently married?
</td>
<td style="width:100px;">
<select type="text" id="married" name="married" style="width:100%;" class="needs_saved_marital" required>
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="evermarried_row">
<td>
Have you ever been married?
</td>
<td>
<select type="text" id="evermarried" name="evermarried" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanymarriages_row">
<td>
How many times have you been married?
</td>
<td>
<select type="text" id="howmanymarriages" name="howmanymarriages" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5 or more'>5 or more</option>
</select>
</td>
</tr>
<tr style="display:none" id="divorced_row">
<td>
Have you ever been divorced?
</td>
<td>
<select type="text" id="divorced" name="divorced" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="widowed_row">
<td>
Are you widowed?
</td>
<td>
<select type="text" id="widowed" name="widowed" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="children_row" required>
<td>
Do you have any children?
</td>
<td>
<select type="text" id="children" name="children" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanychildren_row">
<td>
How many children do you have?
</td>
<td>
<select type="text" id="howmanychildren" name="howmanychildren" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7 or more'>7 or more</option>
</select>
</td>
</tr>
</table>
<table style="margin:0 auto;">
<tr>
<td><button class="reset_button" type="reset" value="Reset" id="marital_reset">Clear Marital</button></td>
<td><input type="button" value="Back!" onclick="history.back()"></td>
<td><button class="save_button" formaction="Employment.php" id="marital_save" name="marital_save" value="Submit">Next</button></td>
</tr>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="Marital.js">
function Marital_Validation() {
$('#marital_save').css('border-color', '#163c6a');
$('#marital_save').css('background', 'none');
$('#marital_save').css('background-color', 'green');
$('#marital_save').css('color', 'white');
$('#marital_save').text('Saved');
$('#marital_indicator').css('background-color', 'green');
}
</script>
</body>
</html>
Marital.js
/*
Marital variables:
married
evermarried
howmanymarriages
divorced
widowed
children
howmanychildren
*/
$(function(){
$("#married").change(function(){
var option=$("#married").val();
if (option==='No'){
$("#evermarried_row").show();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#evermarried").change(function(){
var option=$("#evermarried").val();
if (option==='No'){
$("#children_row").show();
$("#howmanymarriages_row").hide();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#howmanymarriages").change(function(){
var option=$("#howmanymarriages").val();
var married=$("#married").val();
if (option==='1'){
if (married==='Yes'){
$("#children_row").show();
$('#divorced_row').hide();
$("#widowed_row").hide();
}
if (married==='No'){
$('#divorced_row').show();
}
}
if (option==='2' || option==='3' || option==='4' || option==='5 or more'){
$('#divorced_row').show();
}
});
$("#divorced").change(function(){
var option=$("#divorced").val();
var married=$("#married").val();
var timesmarried=$("#howmanymarriages").val();
if (option==='No'){
$("#widowed_row").show();
}
if (option==='Yes'){
if (timesmarried==='1'){
$("#widowed_row").hide();
$("#children_row").show();
}
if (timesmarried==='2' || timesmarried==='3' || timesmarried==='4' || timesmarried==='5 or more'){
$("#widowed_row").show();
}
}
});
$("#widowed").change(function(){
$("#children_row").show();
});
$("#children").change(function(){
var option=$("#children").val();
if (option==='No'){
$("#howmanychildren_row").hide();
}
if (option==='Yes'){
$("#howmanychildren_row").show();
}
});
$(".needs_saved_marital").change(function(){
var married=$("#married").val();
var evermarried=$("#evermarried").val();
var howmanymarriages=$("#howmanymarriages").val();
var divorced=$("#divorced").val();
var widowed=$("#widowed").val();
var children=$("#children").val();
var howmanychildren=$("#howmanychildren").val();
if (married==='Yes'){
$("#evermarried").attr('required',false);
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#howmanymarriages").attr('required',true);
}
if (married==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#evermarried").attr('required',true);
}
if (evermarried==='Yes'){
$("#howmanymarriages").attr('required',true);
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (evermarried==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#children").attr('required',true);
}
if (howmanymarriages==='2' || howmanymarriages==='3' || howmanymarriages==='4' || howmanymarriages==='5 or more'){
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (children==='Yes'){
$("#howmanychildren").attr('required',true);
}
if (children==='No'){
$("#howmanychildren").attr('required',false);
}
});
});
It is working as expected. Checkout this fiddle: https://jsfiddle.net/ax6kfjvz/
I'm guessing you're including jQuery after your script. Or you're not including jQuery at all. Try this template:
<!doctype html>
<html lang="en">
<head>
<title>Couples Issues</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="js/your-awesome-script.js"></script>
</body>
</html>
When using a library, you must include them before your script otherwise the browser has no idea where let's say this function $() is coming from.
Here is a good article.
You should trim the strings to avoid unmatched error and better use css visibility hidden!
// like this
var option=$("#married").val().trim();
// like this
<tr style="visibility: hidden;" ></tr>
Related
I'm having a few issues with my javascript webpage. My first question is how to create a small border that wraps around a title? The bottom portion of my professor's sample webpage looks like this: https://i.imgur.com/4DVozv9.png
The bottom portion of my webpage so far looks like this: https://i.imgur.com/8STmOGd.png
I don't understand how to make that small border that circles around the "Shipping Method", "Shipping Address", and "Payment Details" titles.
Also for some reason the "" tag on my "Complete Payment" button isn't placing my button on the next line for some reason. Here is my code so far, note though that it's incomplete so my functions and other features aren't ready yet, right now I'm just focusing purely on presentation. Thank you for your time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YOUR NAME Final Project Checkout</title>
<link href="layout.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="guest-functions.js"></script>
<script type="text/javascript" src="cart-functions.js"></script>
<script>
window.onload=function(){
setGuest();
updateCartTotal();
}
</script>
</head>
<body>
<header><img src="90s-Gamers-Logo.png" width="798" height="82" alt="My Company"/></header>
<nav>
<form id="form1" name="form1" method="post">
<p>Choose a page to visit:<br>
<select name="select" id="select" onchange="location = this.options[this.selectedIndex].value;">
<option value="index.html">Home</option>
<option value="shop.html">Shop</option>
<option value="cart.html">Cart</option>
<option value="checkout.html" selected="selected">Checkout</option>
</select>
</p><br>
<p><b>Welcome Guest!</b></p>
<p>Enter your name:</p>
<input id="sign-in-text"><br>
<button onclick="setGuest()" id="sign-in-button">Sign-In</button><br><br>
<p>Your shopping cart is now</p>
<!--Need variable here-->
<p><b>empty!</b></p>
</form>
<p> </p>
<div id="divGuestArea"> </div>
<p> </p>
<div id="divCartSummary"> </div>
</nav>
<div id="main">
<h1>Checkout</h1>
<!--<p>This is where the transaction would take place so create a form here to take care of that final process as appropriate. Such form fields as contact info, shipping method, payment method, receipt, etc. Use HTML attributes wisely to help with validation and write JavaScript to validate any needed fields that are not sure to be validated by this HTML.</p>
<p>Connect your form to a "thankyou.html" page that you create so that after the form is submitted and found to be filled out properly, you thank them by name on "thankyou.html".</p>-->
<table border="1" cellspacing="0" cellpadding="6" summary="Table of Quantity, Description, Price, and Product Totals">
<tbody>
<tr>
<td><b>Quantity</b></td>
<td><b>Description</b></td>
<td><b>Price</b></td>
<td><b>Product Total</b></td>
</tr>
<tr style="text-align:right">
<td>later</td>
<td>later</td>
<td>later</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td>later</td>
<td>later</td>
<td>later</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3">Subtotal:</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3">Tax:</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3"><b>Grand total:</b></td>
<td><b>later</b></td>
</tr>
</tbody>
</table><br>
<p>Display total amount</p>
<p>Shipping Method</p>
<p> <input type="radio" name="ShipType" id="standard" value="2">
<label for="standard">Standard Shipping ($2)</label>
<input type="radio" name="ShipType" id="2-day" value="5">
<label for="2-day">2-Day Shipping ($5)</label>
<input type="radio" name="ShipType" id="overnight" value="10">
<label for="overnight">Overnight Shipping ($10)</label>
<br>
<p>Shipping Address</p>
Full Name:
<input type="text" id="FullName" name="FullName">
Street Address:
<input type="text" id="StreetAddress" name="StreetAddress"><br><br>
City:
<input type="text" id="City" name="City">
State/Province/Region:
<input type="text" id="State" name="State"><br><br>
ZIP:
<input type="text" id="Zip" name="Zip">
Country:
<input type="text" id="Country" name="Country"><br><br>
Phone Number:
<input type="text" id="PhoneNumber" name="PhoneNumber"><br>
<p>Payment Details</p>
<select id="selPayment" name="selPayment" onChange="getSelectValue();">
<option value="" selected="selected">- Choose one -</option>
<option value="Visa">Visa Credit</option>
<option value="MasterCard">MasterCard Credit</option>
<option value="American Express">American Express Credit</option>
<option value="Debit Card">Debit Card</option>
<option value="Pay Pal">Paypal</option>
</select> <br><br>
Card #:
<input type="text" id="CardNumber" name="CardNumber"><br><br>
Expiration Month:
<select id="selMonth" name="selMonth" onChange="getSelectMonth();">
<option value="" selected="selected">- Choose one -</option>
<option value="January">January</option>
<option value="February">Febraury</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select> <br><br>
Expiration Year:
<select id="selYear" name="selYear" onChange="getSelectYear();">
<option value="" selected="selected">- Choose one -</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<br><p>
<input type="button" value="Complete Payment"
onclick="storeAndGo();">
</p>
<footer>
Copyright 2020, 90's Gamers.
</footer>
</div>
</body>
</html>
You can add a div to your 3 sections, and you can set border to this.
I don't understand how to make that small border that circles around the "Shipping Method", "Shipping Address", and "Payment Details" titles.
CSS
border: 1px solid;
border-radius: 25px;
I have created a html css javascript, a tree when you select an option, another options will be visible (according the first option selected) in this example there is only 2 options.
the problem is that at the end, there is a button that should add a new form (row) with same options, to start all over, when i click that button it add new row but the script doesn't work, I have no idea how to fix it!
Here is a JSFiddle
$("#addMore").click(function() {
$(".row-fluid:last").clone().appendTo(".wrapper");
});
$("#produse").change(function() {
var $this = $(this),
value = $this.val(); // save value
$('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
$("#ModeleCanapele").show();
break;
case 'Coltare':
$("#ModeleColtare").show();
break;
case 'Mobila':
$("#ModeleMobila").show();
break;
case 'Fotolii':
$("#ModeleFotolii").show();
break;
case 'Seturi':
$("#ModeleSeturi").show();
break;
// ...etc
}
});
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
The problem is that you were generating a new row, but still referencing the first row (and you were doing so via your naive use of Ids). Instead, your code needs to operate only upon a specific row at a time -- so, I've edited your code to pass in a reference to the row, then we can use your same JQuery Selectors, but starting from the referenced row.
NOTE: Several others have been blaming the use of duplicate Ids, but clearly that is not the problem. The fact is you CAN use duplicate Ids, and it is common to do so in situations like this.
To be clear, current HTML specification does state that:
If the id value is not the empty string, it must be unique in a document. ref
But, as a separate stack exchange discussion notes, this is not the case in practice (and probably never will be). In practice, Id is only expected to be unique within a scope, such as within a reusable component (i.e., your cloneable <tr>).
$("#addMore").click(function() {
var newRow = $(".row-fluid:last").clone();
newRow.appendTo(".wrapper");
newRow.find('.sub_select_class').hide();
newRow.find( "#produse" ).change(function(){
produseChange(this, newRow);
});
});
$("#produse").change(function() {
produseChange(this, $('tr'));
});
function produseChange(self, row) {
var $this = $(self),
value = $this.val(); // save value
row.find('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
row.find("#ModeleCanapele").show();
break;
case 'Coltare':
row.find("#ModeleColtare").show();
break;
case 'Mobila':
row.find("#ModeleMobila").show();
break;
case 'Fotolii':
row.find("#ModeleFotolii").show();
break;
case 'Seturi':
row.find("#ModeleSeturi").show();
break;
// ...etc
}
}
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
IDs need to be unique. Use a class
You need to delegate the event handlers when you insert dynamic content
DRY, don't repeat yourself
function resetFunction() { // not sure what you want here?
$(this).closest(".row-fluid").remove();
}
$(function() {
$("#addMore").click(function() {
var $clone = $(".row-fluid:last").clone(true)
$('.sub_select_class',$clone).hide(); // we hide every second select
$clone.appendTo(".wrapper");
});
$(".row-fluid").on("click",".filter", resetFunction);
$(".row-fluid").on("change", ".produse", function() {
var value = $(this).val(), // save value
$parent = $(this).closest(".row-fluid");
$('.sub_select_class',$parent).hide(); // we hide every second select
$(".Modele" + value,$parent).show();
});
});
.sub_select_class {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select class="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select class="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select class="ModeleColtare sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select class="ModeleSeturi sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button class="filter" name="filter">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
enter image description hereI have to create "View" and "Update" radio buttons with a dropdown below each one. To do this, I've written the following code:
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<input type='radio' id='byState' ; style="margin-left:180px" ; value='View' name='byState'>View by Student's unique identity number
<input type='radio' id='byClub' ; style="margin-left:80px" ; value='Update' name='byClub'>Update by Student's identity number
<table>
<tr>
<td>
<div style="width:200px;text-align: left; display: inline;">
<select id="Select" ;>
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
However, I'm unable to place the drop-down menu below radio buttons; this is what I get instead:
enter image description here
Using CSS:
.container {
width: 100%;
}
.container,
.radio-buttons,
.radio-buttons>span,
.dropdowns {
}
.cell {
display: inline-block;
width: calc(50% - 2px);
}
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<div class="container">
<div class="radio-buttons">
<div class="cell">
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</div>
<div class="cell">
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number </div>
</div>
<div class="dropdowns">
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</div>
</div>
Using Tables:
You can use a table to align items together like so:
td {
width: 50vw;
}
<div class="pageHead" align="center">Auto Loan Basis Point (Bps) Adjustments by State</div> <br><br>
<table>
<tr>
<td>
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</td>
<td>
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number
</td>
</tr>
<tr>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
I created a form in that i am validating the from fields.every thing is working fine but, when I am curating(submitting) the form if any error is there in that form i have point out that place..how to to point out the particular error place.can you please guide me..for me in that form nearly 30 fields is there and the curated button is at last. when the error is top i want to show the error pointing place.
function curate(saveOnly) {
if(isValidForm()){
var newFormData = JSON.stringify($("#form").serializeArray());
if(saveOnly){
saveForm(true);
}else{
adpart.content.isCurated = true;
adpart.content.stateVal = $("#curfut").val();
autoSaveDiagram();
saveForm();
}
$(".reveal-overlay").css("display", "none");
confirmExit();
}else{
if(saveOnly){
toastr.warning('Please fill the mandatory fields to curate', 'Curation Failed!');
}
}
}
function isValidForm() {
var isValid = checkIfValidText("type") &
checkIfValidText("accountname") &
checkIfValidText("serviceline") &
checkIfValidText("vsmphase")&
checkIfValidText("georegion")&
checkIfValidText("curfut");
}
return isValid;
}
function checkIfValidTextField(fieldId){
var isValid = true;
if($(fieldId).val().length==0){
$(fieldId).css('boxShadow',"rgb(255, 0, 0) 0px 0px 10px");
isValid = false;
}else{
$(fieldId).css('boxShadow',"none");
}
return isValid;
}
<form action="editor/checklist" method="GET" model="curatorCheckList"
enctype="text/plain" id="form" name="curatorCheckListForm">
<table style="border-collapse: collapse; padding: 20px;" class="curator_id">
<tr>
<td>
<div>
Vertical Name
<select name="verticalName" class="Curator-verticalname" id="type" onchange="populateSvcLineAndActName()">
<option value="">Select</option>
<option value="Healthcare">Healthcare</option>
<option value="BFS">BFS</option>
<option value="Technology">Technology</option>
<option value="Insurance">Insurance</option>
<option value="Life Sciences">Life Sciences</option>
<option value="IME">IME</option>
<option value="P & R">P&R</option>
<option value="Banking & Lending">Banking and Lending</option>
<option value="F&A">F&A</option>
</select>
<span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
</div>
</td>
<td>Account Name
<select id="accountname" name= "accountName" style=" margin-left: 23px; width: 270px;height: 27px;">
<option value= "" selected="selected"></option>
</select>
<span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
</td>
</tr>
<tr>
<td>Service Line
<select id="serviceline" name="serviceLine" id="serviceline" class="Curator-serviceline" onchange="populateSubserviceLine()" required >
<option value="" selected="selected"></option>
</select>
<span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
</td>
<td style="vertical-align: sub; padding-top: 12px;">VSM Phase
<select name="vsmPhase" class="curator-vsmphase" id="vsmphase">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<span id="acnterrname" style="margin-top: 29px; /* margin-left: 275px; */ color: red;"></span>
VSM Date
<input type="date"
name="completionDate" id="date" value="" class="curator-date" onkeydown="return false;"> <span id="acnterrname"
style="color: red; margin-top: 29px;"></span>
</td>
</tr>
<tr id="subserviceline">
<td>
Which Sub service Line does this VSM belong to ?
</td>
<td>
<select id="subservice" name="subservice" multiple="multiple" style="width: 300px;">
<!-- <option value="">select</option> -->
</select>
<span id="acnterrname" style="color: red; margin-top: 29px;"></span>
</td>
</tr>
<tr>
<td>
Which Geo/Region does this VSM belongs to?
</td>
<td>
<select name="geo" id="georegion" class="curator_selectbox">
<option value="" selected="selected">Select</option>
<option value="Global/Multi-Region">Global/multi-Region</option>
<option value="North America">North America</option>
<option value="Latin America">Latin America</option>
<option value="Europe">Europe</option>
<option value="Middle East & Africa">Middle East & Africa</option>
<option value="Asia">Asia</option>
<option value="Australia & New Zealand">Australia & New Zealand</option>
</select>
<span id="adpartfiles" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
</td>
</tr>
<tr>
<td>
IS this VSM the current State or future state VSM?
</td>
<td>
<select name="curfut" id="curfut" class="curator_selectbox">
<option value="">Select</option>
<option value="Current">Current</option>
<option value="Future"">Future</option>
</select>
<span id="adpartfiles" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
</td>
</tr>
<tr>
<td style="padding-top: 10px !important; vertical-align: sub;">
<div id="curator"></div>
VSM Name(Vertical,Service Line, Sub service Line, Name)
</td>
<td>
<input type="text" name="vsmName" id="vsmName" class="curator-textbox" value="" readonly /><br>
<textarea name="append" id="append" readonly
style="border: 1px solid #5db961; margin-top: 15px; background-color: #d0f7d2; resize: none; width: 379px; height: 35px; maxlength="100">
</textarea>
<span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
</td>
</tr>
</table>
<input
style="margin-left: 135px; width: 100px; height: 36px; cursor: pointer;"
type="button" class="button margin-zero create-new-dialog-btn"
value="Curate" id="curateId" onClick="curate(false)">
</form>
You have several erros in your code.
Firstly, checkIfValidText function is not defined. It is defined as checkIfValidTextFiedld.
Secondly, you are using $(fieldId).val() this will translate to an error as id is referenced with a #. Use $('#'+fieldId).val().
I have used .on() click function in my fiddle code because the curate() function was not able to load before the DOM and it was not able to find the curate() function. Use the on() click listener if you face similar issue.
Hope it helps.
JS fiddle for working code
There are about 6-7 <select> items in a <table> column. In order to press Submit button, the condition is all <select> items should be selected. So how this can be done using Javascript..?
The sample code seems to be like this:
<table>
<tr>
<td><select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td><select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td><select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<table id="mytable">
<tr>
<td>
<select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<form action="" method="post" onsubmit="if(!check()) return false;">
<input type="submit" />
</form>
<script type="text/javascript">
function check() {
elements=document.getElementById("mytable").getElementsByTagName("select");
for(i=0;i<elements.length;i++){
if(elements[i].value == "--") { return false; }
}
return true;
}
</script>
var arr=new Array();
status=true;
function fnc()
{
elements=document.getElementById("atable").getElementsByTagName("option");
for(i=0;i<elements.length;i++)
{
arr=elements[i].value;
if(Number(arr)=='NaN')
{
status=false;
break;
}
console.log(Number(arr));
}
if(status==true)
document.getElementById("formname").submit();
}
you also give your table an id
<table id="atable">
One option is to use the jQuery validation plugin, then add "required" to all your select fields.
<form id="my_form">
<select name="select1" class="required"> ... </select>
<select name="select2" class="required"> ... </select>
<select name="select3" class="required"> ... </select>
....
</form>
Then the javascript is as simple as -
$('#my_form').validate();
All you need to do to use the plugin is include the jQuery and jQuery validation scripts in the page head
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
....
</head>
UPDATE
Obviously your requirement is a pretty simple one, and adding a full js library to your site for this use case is definitely over-kill. If this is the only validation you're going to do I'd recommend a pure js solution (such as polin's answer). However if you're likely to have further validation requirements on your site, then the jQuery validation plugin is quite powerful.