Develop Reference

Display different type of form by using switch JavaScript

I have a problem. I want to display different types of forms such as the form for adding, the form for modifying, and the form for deleting based on the user input by using a JavaScript switch statement. So if the user input "A", the add form will show up, when the user input "B" then the modify form will show up, etc. The problem here is it doesn't matter what I typed in nothing shows up. Can someone explain it to me? Thank you.
Note: The CSS for the forms display: none; because I don't want the forms to show up when the page load. I just want base on the user input, then the specific form will show. I want to make the dropdown list instead of typing in the box, but it is not easy to do it.
var val=document.getElementById("user").value;
var check=document.getElementById("enter");
function change(){
switch(val){
case 'A': {
document.getElementById("add").style.display="block";
break;
}
case 'B': {
document.getElementById("modify").style.display="block";
break;
}
case 'C': {
document.getElementById("delete").style.display="block";
break;
}
}
}
check.addEventListener("click", change);
div#add, div#modify, div#delete{
display: none;
}
<div id="add">
<div id="add_task_form">
<button id="add_task">Add New Task</button>
<form id="add_form" name="task_form" method="post">
<div id="title_form">
<label for="title">Title</label>
<input type="text" name="title" id="title"><br>
</div>
<div id="description_form">
<label for="description">Description</label>
<input type="text" name="description" id="description"><br>
</div>
<div id="due_date_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_form">
<label for="time">Time</label>
<input type="text" name="time" id="time" placeholder="hh:mi"><br>
</div>
<input id="submit_add_form" type="submit" name="submit" value="Save">
</form>
<br>
</div>
</div>
<div id="modify">
<div id="modify_task_form">
<button id="modify_task">Modify Task</button>
<form id="modify_form" name="modify_form" method="post">
<div id="modify_section">
<label for="modify_com_in">What section?</label>
<input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="modify_section_id">
<label for="modify_com_in_id">What ID?</label>
<input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>
</div>
<div id="title_modify_form">
<label for="modify_title">Title</label>
<input type="text" name="title" id="modify_title"><br>
</div>
<div id="description_modify_form">
<label for="modify_description">Description</label>
<input type="text" name="description" id="modify_description"><br>
</div>
<div id="due_date_modify_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_modify_form">
<label for="modify_time">Time</label>
<input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>
</div>
<input id="submit_modify_form" type="submit" name="modify" value="Modify">
</form>
<br>
</div>
</div>
<div id="delete">
<div id="delete_task_form">
<button id="delete_task">Delete Task</button>
<form id="delete_form" name="delete_form" method="post">
<div id="delete_section">
<label for="delete_com_in">What section?</label>
<input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="delete_section_id">
<label for="delete_com_in_id">What ID?</label>
<input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>
</div>
<input id="submit_delete_form" type="submit" name="delete" value="Delete">
</form>
<br>
</div>
</div>
<label for="user">User</label>
<input id="user" type="text" name="user">
<input type="button" value="Enter" id="enter">

Try this to use a dropdown menu instead:
<label for="action">Choose an action:</label>
<select id="action" name="action" onchange='onSelectChangeHandler()'>
<option value="add">Add</option>
<option value="modify">Edit</option>
<option value="delete">Delete</option>
</select>
and the Javascript code:
function onSelectChangeHandler() {
var val = document.getElementById("action").value;
switch (val) {
case "add":
// document.getElementById("add").style.display="block";
console.log("Show form Add");
break;
case "modify":
// document.getElementById("modify").style.display = "block";
console.log("Show form Modify");
break;
case "delete":
// document.getElementById("delete").style.display = "block";
console.log("Show form Delete");
break;
}
}
Just remove the comments if it works.
But you could also remove the switch statement by simply doing:
function onSelectChangeHandler() {
var val = document.getElementById("action").value;
document.getElementById(val).style.display="block";
console.log("Show form ", val);
}
That is if the option value(s) are the exact same as their id tags counterparts

You need to get the value of user input inside change function.
var check=document.getElementById("enter");
function change(){
var val=document.getElementById("user").value;
switch(val){
case 'A': {
document.getElementById("add").style.display="block";
break;
}
case 'B': {
document.getElementById("modify").style.display="block";
break;
}
case 'C': {
document.getElementById("delete").style.display="block";
break;
}
}
}
check.addEventListener("click", change);
div#add, div#modify, div#delete{
display: none;
}
<div id="add">
<div id="add_task_form">
<button id="add_task">Add New Task</button>
<form id="add_form" name="task_form" method="post">
<div id="title_form">
<label for="title">Title</label>
<input type="text" name="title" id="title"><br>
</div>
<div id="description_form">
<label for="description">Description</label>
<input type="text" name="description" id="description"><br>
</div>
<div id="due_date_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_form">
<label for="time">Time</label>
<input type="text" name="time" id="time" placeholder="hh:mi"><br>
</div>
<input id="submit_add_form" type="submit" name="submit" value="Save">
</form>
<br>
</div>
</div>
<div id="modify">
<div id="modify_task_form">
<button id="modify_task">Modify Task</button>
<form id="modify_form" name="modify_form" method="post">
<div id="modify_section">
<label for="modify_com_in">What section?</label>
<input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="modify_section_id">
<label for="modify_com_in_id">What ID?</label>
<input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>
</div>
<div id="title_modify_form">
<label for="modify_title">Title</label>
<input type="text" name="title" id="modify_title"><br>
</div>
<div id="description_modify_form">
<label for="modify_description">Description</label>
<input type="text" name="description" id="modify_description"><br>
</div>
<div id="due_date_modify_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_modify_form">
<label for="modify_time">Time</label>
<input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>
</div>
<input id="submit_modify_form" type="submit" name="modify" value="Modify">
</form>
<br>
</div>
</div>
<div id="delete">
<div id="delete_task_form">
<button id="delete_task">Delete Task</button>
<form id="delete_form" name="delete_form" method="post">
<div id="delete_section">
<label for="delete_com_in">What section?</label>
<input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="delete_section_id">
<label for="delete_com_in_id">What ID?</label>
<input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>
</div>
<input id="submit_delete_form" type="submit" name="delete" value="Delete">
</form>
<br>
</div>
</div>
<label for="user">User</label>
<input id="user" type="text" name="user">
<input type="button" value="Enter" id="enter">

Check if box in form has information or not

I want to check if my last name element has information on it with an "If" statement but i dont know where to place it or if im going about this wrong. The purpose is to eventually check if all the boxes are filled before i can hit the submit button. So whats the best way to go about checking this?
function check() {
let lastName = document.findElementById('last-name').value;
addressForm = document.shippingAddressForm;
addressForm.addEventListener('submit', (event) => {
event.preventDefault();
});
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>

Problem
You didn't call the function check(). You only defined it.
Suggested solution
Try this I deleted the content of function check(). This example only shows calling the function (but better is using required attribute in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input required is on half of the page)
function check() {
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'>
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
and also if you want display error message with FF
Error messages
If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:
<input type="email"
x-moz-errormessage="Please specify a valid email address.">

JavaScript mandatory based on selection Selection List

I would like to make a java script what will make comment field (textarea) as mandatory when you will select a selection list , for now I just make a required icon next to comment code below and stuck on it code bellow.
Thank in advice for all help
Code what I Wrote :
<select id="ddlViewBy">
<option value="1">AJS.$("#comment-popup").parent().children('label').append('<span class="aui-icon icon-required"></span>');</option>
Source Code of my Website :
<form action="/jira/rest/tempo-rest/1.0/worklogs/{issueKey}" class="aui tempo-form" data-form-type="" name="tempo-panel-form-popup" method="post">
<div class="form-body" style="max-height: 393px;">
<input type="hidden" name="id" value="">
<input type="hidden" name="type" value="issue">
<input type="hidden" name="use-ISO8061-week-numbers" value="false">
<input type="hidden" name="ansidate" value="">
<input type="hidden" name="ansienddate" value="">
<input type="hidden" name="selected-panel" value="">
<input type="hidden" name="analytics-origin-page" value="">
<input type="hidden" name="analytics-origin-view" value="">
<input type="hidden" name="analytics-origin-action" value="">
<input type="hidden" name="startTimeEnabled" value="false">
<input type="hidden" name="tracker" value="false">
<input type="hidden" name="preSelectedIssue" class="tempoIssueKey" value="AB-5048">
<input type="hidden" name="planning" value="false">
<div class="field-group">
<label for="user-picker-popup">User</label>
<div class="tempo-pickers">
<div class="aui-ss medium aui-ss-has-entity-icon" id="user-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="user-picker-popup-field">
<div class="aui-list" id="user-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span><img class="aui-ss-entity-icon" alt="" src="google.pl"> </div>
<select id="user-picker-popup" class="plan-user-picker dialog-user-picker aui-ss-select" name="user" data-container-class="medium" data-counter="popup" data-input-text="Jon Smith" multiple="multiple" style="display: none;">
<optgroup id="tempo-user-suggested-popup" data-weight="0" label="">
<option selected="selected" style="background-image:url(/jira/secure/useravatar?size=small&ownerId=jsmith&avatarId=12927)" value="jsmith">Jon Smith</option>
</optgroup>
</select>
</div>
</div>
<div class="field-group tempo-issue-container">
<label for="tempo-issue-picker-popup">Issue </label>
<div class="aui-ss" id="tempo-issue-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="tempo-issue-picker-popup-field">
<div class="aui-list" id="tempo-issue-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span>
</div>
<select id="tempo-issue-picker-popup" class="tempo-issue-picker tempo-picker-all-issues tempo-issue-picker-logwork aui-ss-select" name="issue" multiple="multiple" style="display: none;">
<option selected="selected" value="AB-5048">AB-5048 - Holiday - Jon Smith 2016-06-13-2016-06-13</option>
</select>
</div>
<div class="tempo-datepicker">
<div class="field-group tempo-show-period">
<label for="showPeriod-popup">Period</label>
<div class="checkbox">
<input id="showPeriod-popup" name="showperiod" type="checkbox" value="showperiod" class="showperiod tempo-show-period"> </div>
</div>
<div class="field-group datepicker ">
<label for="datefield-popup">Date</label>
<input type="text" id="datefield-popup" name="date" size="7" value="2016-06-09" class="text medium-field"> <span id="datefield-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
<div class="field-group enddate datepicker " style="display: none;">
<label for="enddate-popup">End date</label>
<input type="text" id="enddate-popup" name="enddate" size="7" value="2016-06-09" class="text medium-field"> <span id="enddate-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
</div>
<div class="tempo-timepicker resetable">
<div class="field-group tempo-worked-hours">
<label class="timepicker-label" tmp="Work per day" for="time-popup">Worked </label>
<input autocomplete="off" type="text" id="time-popup" name="time" size="3" value="" class="tempo-time text short-field"> </div>
<div class="remaining-and-billed-hours-container">
<div class="field-group tempo-logged-work">
<label for="totalSpent-popup">Logged</label> <span class="totalSpent" id="totalSpent-popup">8h</span> </div>
<div class="field-group tempo-remaining-estimate" style="clear: left;">
<label for="remainingEstimate-popup">Remaining estimate </label>
<input type="hidden" id="remainingEstimateHidden-popup" size="3" maxlength="6" value="">
<input type="text" id="remainingEstimate-popup" name="remainingEstimate" size="3" maxlength="6" value="" class="validate remaining resetable text short-field"> </div>
<div class="field-group tempo-original-estimate">
<label for="originalEstimate-popup">Original estimate</label> <span class="originalEstimate" id="originalEstimate-popup"></span> </div>
</div>
</div>
<div class="field-group resetable">
<label for="comment-popup">Description</label>
<textarea id="comment-popup" name="comment" class="tempo-comment textarea resetable"></textarea>
</div>
<ul id="errors-popup" class="error-list"> </ul>
<p style="width: 97%; margin: 0 0 10px 0;" id="tempo-logwork-issue-hint" class="hint-container overflow-ellipsis" title="Pressing w also opens this dialog box"> <a class="shortcut-tip-trigger" title="Click to view all shortcuts" href="#" tabindex="-1">Shortcut tip:</a> Pressing <strong>w</strong> also opens this dialog box </p>
</div>
<div class="buttons-container form-footer"> <span id="logwork-spinner" class="aui-icon aui-icon-wait" style="display:none"></span>
<div class="buttons"><span class="icon throbber"></span>
<input type="checkbox" id="issue-add-another" class="tempo-add-another-input" value="Another">
<label for="issue-add-another" class="tempo-add-another-label"> Log another </label>
<input type="submit" id="issue-add-button" class="button button-panel-button" accesskey="s" value="Log Work"> <a id="tempo-logwork-issue-cancel" class="cancel" href="/jira/browse/AB-5048?" accesskey="'">Cancel</a> </div>
</div>

Looks like you working inside the atlassian product suite.
So You make a html field mandatory you can add the required attribute
which is workable in all modern browsers except safari I thing please check this
the js(jquery) to add a attribute would be
$('#comment-popup').attr('required', 'required');
if it is a AUI-select or AUI input read the docs there
https://docs.atlassian.com/aui/latest/docs/single-select.html on a select for instance there is a non-empty attribute

Post Values to an alert box after been validated

I have this form that has a lot of validation in place.
What i'm struggling with is, when all fields have been filled out correctly I want the values of the fields to be displayed in an alert box.
Here is my code
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
My HTML is
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
I have also provided a Fiddle - http://jsfiddle.net/barrycorrigan/vzdp64m4/
Any help is greatly appreciated

try something like this,
$("#form").submit(function(){
var x = $(this).serializeArray();
$.each(x, function(i, field){
alert(field.name + " : " + field.value);
});
});
demo in FIDDLE

jquery toggle between login and registration in same page

I have two form login and registration, by default show login form. There has a link "Don't have account?" I want to create when click on link then registration form will show and login form will hide.
HTML Code:
<div class="login_form">
<div id="form">
<h2>Login Here </h2>
<form method="post" action="login.php" >
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="login_username" id="login_username" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="login_password" id="login_password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="login" id="login" class="btn btn-success" />
</div><!--end form_elements-->
<br />
Don't have a account?
</form>
</div>
</div>
<div class="clear_both"></div>
<div class="register_form">
<div id="form">
<h2>Register Here </h2>
<form method="post" action="login.php" name="">
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="username" id="usename" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Email</label>
<input type="text" name="email" id="email" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="password" id="password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">RePassword</label>
<input type="password" name="repassword" id="repassword" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="register" id="register" class="btn btn-success" />
</div><!--end form_elements-->
</form>
</div><!-- div form-->
jQuery Code:
$(function(){
('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});
Please guide me to solve this difficulty.

Use as , $ is missing in show_register
$(function(){
$('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});