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">

DOM changes with javascript aren't working

I'm trying to make a simple drop down menu which will have two elements: "male" and "female". I'm using a button to have these elements become visible. The problem is that they become visible but only for a fraction of a second and go back to being hidden.
Here's my code:
<html>
<head>
<title>
Validation Form
</title>
</head>
<body>
<h1>
Validation Form
</h1>
<form id="contactForm" action="" >
<fieldset>
<legend>Validation</legend>
<p>
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" type="text"/>
</p>
<p>
<label for="lastname">Last Name</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="gender">Gender</label>
<input id="gender" name="gender" type="text" />
</p>
<div class="dropdown">
<button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" style="display: none">
<p id="drop_male">Male</p>
<p id="drop_female">Female</p>
</div>
</div>
<p>
<label for="website">Website</label>
<input id="website" name="website" type="text" />
</p>
<p>
<input type="button" id="submit" name="submit" value="Submit" />
<input type="reset" value="clear" />
</p>
</fieldset>
</form>
<script>
var dropBtn = document.getElementById("btn_drop");
dropBtn.onclick = function () {
// show all elements on clicking submit!
var drop = document.getElementById("myDropdown");
drop.style.display = 'block';
}
</script>
</body>
</html>

Look at you browser console. I assume you have an error because you didn't declare myFunction.
Please read this URL: http://www.w3schools.com/jsref/event_onclick.asp and use one of described approaches.

you can make this without javascript live fiddle with css
<p>
<label for="gender">Gender</label>
<select id="gender" name="gender" type='select' >
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>

HTML form with JavaScript Function

I have a script
<html>
<head>
<title> FORM REGISTRASI </title>
<link rel="stylesheet" type="text/css" href="css/coba.css">
</head>
<body>
<script type="text/javascript" src="js/default.js"></script>
<!--Input-->
<form name="fform" class="daftar">
<h1>REGISTRASI AKUN</h1>
<fieldset class="row1">
<legend>Emal</legend>
<p>
<label>Email</label><input type="text" placeholder="Email" name="email">
<label>Password</label><input type="password" placeholder="Password">
</p>
<p>
<label>Konfirmasi Email</label><input type="text" placeholder="Konfirmasi Email">
<label>Konfirmasi Password</label><input type="password" placeholder="Konfirmasi Password">
</p>
</fieldset>
<fieldset class="row2">
<legend>Biodata Pengguna</legend>
<p>
<label>Nama Lengkap</label><input type="text" class="panjang" placeholder="Nama Lengkap" name="nama">
</p>
<p>
<label>Nomor Telepon</label><input type="text" maxlength="12" name="telepon">
</p>
<p>
<label> Alamat </label>
<textarea cols="32" rows="5" placeholder="Alamat" name="alamat"></textarea>
</p>
</fieldset>
<fieldset class="row3">
<legend>Biodata Lain</legend>
<p>
<label>Jenis Kelamin</label>
<input type="radio" value="Pria" name="Pria">
<label class="JK">Pria</label>
<input type="radio" value="Wanita" name="Wanita">
<label class="JK">Wanita</label>
</p>
<p>
<label>Tempat Lahir</label>
<input class="panjangkota" type="text" maxlength="20" name="tempatlahir" />
</p>
<p>
<label>Tanggal Lahir</label>
<input type="date" size="2" maxlength="2" name="tanggal" />
</p>
<p>
<label>Hobby</label>
<input type="checkbox" value="Browsing" name="Browsing">
<label class="hobby">Browsing</label>
<input type="checkbox" value="Membaca" name="Membaca">
<label class="hobby">Membaca</label>
</p>
<p>
<label> </label>
<input type="checkbox" value="Sepakbola" name="Sepakbola">
<label class="hobby">Sepakbola</label>
<input type="checkbox" value="Galau" name="Galau">
<label class="hobby">Galau</label>
</p>
</fieldset>
<div><input type="button" value="kirim" onclick="daftar()"></div>
<tr>
<div><input type="reset" value="ulang"></div>
</form>
<!--Output-->
<hr>
<form class="daftar2">
<h1>OUTPUT</h1>
<fieldset class="row4">
<legend>Pendaftaran Akun</legend>
<p>
<label>Nama Depan :</label><input type="text" name="znama">
</p>
<p>
<label>Nomor Telepon :</label><input type="text" name="ztelepon">
</p>
<p>
<label>Email :</label><input type="text" name="zemail">
</p>
<p>
<label>Jenis Kelamin :</label><input type="text" name="zJK">
</p>
<p>
<label>Tempat Lahir :</label><input type="text" name="ztempatlahir">
</p>
<p>
<label>Tanggal Lahir :</label><input type="text">
</p>
<p>
<label>Hobby :</label><input type="text" name="zHobby">
</p>
<p>
<label>Alamat :</label><textarea cols="32" rows="5" zalamat></textarea>
</p>
</fieldset>
</form>
</body>
</html>
and I have a JavaScript code link this:
function daftar()
{
var emailstr = (document.fform.email.value);
var namastr = (document.fform.nama.value);
var teleponstr = (document.fform.telepon.value);
var alamatstr = (document.fform.alamat.value);
var tempatlahirstr = (document.fform.tempatlahir.value);
//obejek teks
(document.fform.zemail.value) = emailstr;
(document.fform.znama.value) = namastr;
(document.fform.ztelepon.value) = teleponstr;
(document.fform.ztempatlahir.value) = tempatlahirstr;
//textarea
(document.fform.zalamat.value) = alamatstr;
//radio button
if (fform.Pria.checked)
{
Pria = (document.fform.Pria.value);
(document.fform.zJK.value) = Pria;
} else
if (fform.Wanita.checked)
{
Wanita = (document.fform.Wanita.value);
(document.fform.zJK.value) = Wanita;
}
//checkbox
if (fform.Browsing.checked)
{
Browsing = (document.fform.Browsing.value);
(document.fform.zHobby.value) = Browsing;
} else
if (fform.Membaca.checked)
{
Membaca = (document.fform.Membaca.value);
(document.fform.zHobby.value) = Membaca;
} else
if (fform.Sepakbola.checked)
{
Sepakbola = (document.fform.Sepakbola.value);
(document.fform.zHobby.value) = Sepakbola;
} else
if (fform.Galau.checked)
{
Galau = (document.fform.Galau.value);
(document.fform.zHobby.value) = Galau;
}
I want to print all item (specially for text and radio/checkbox object, don't see date object) in the input form to output form with one javascript function, when i try to submit all item, it didn't shown on output form. What wrong with that code and how to print all of them to the output form? Please help me, this is my collage assignment. (If you want, you can copy and paste that code to test that code).

For this pupose why dont you use angular js?
its simple and easy bro.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
Name:<input type="text" name="name" ng-model="name"><br>
<p>Gender: <input type="radio" ng-model="gen" value="male" name="gen">Male
<input type="radio" ng-model="gen" value="female" name="gen">Female</p>
<p ng-bind="name"></p>
<p ng-bind="gen"></p>
</div>
</body>
</html>
Learn more Angularjs from W3schools :)

update date in popup form all times not only when refresh site

How i can update date and time value in a field, when i called popup?
Because in my case the datetime django was updated on refresh.
My popup :
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#popup1").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup1").hide();
});
}
function PopUpHide(){
$("#popup1").hide();
}
In html form popup :
<div class="b-popup b-popup-content" id="popup1">
<div class="cleanuphtml-1">
Add 'problem' item
</div>
<form action="" method="post">
{% csrf_token %} <input id="id_pk_post" value="1" maxlength="1" name="pk_post" type="text" /> <input id="id_post_request" value="1" maxlength="1" name="post_request" type="text" />
<div class="cleanuphtml-2">
<label for="id_description_post">Description:</label>
<textarea id="id_description_post_id" maxlength="9999" name="description_post" autofocus="" onkeyup="enableField(this.form,this.value)" type="text">
</textarea>
</div>
<div class="cleanuphtml-4">
<label for="id_start_date">Start date : <input type="text" name="start_date" id="datetimepicker" /> <label>End date :</label> <input type="text" name="end_date" id="datetimepicker2"
class="cleanuphtml-3" /></label>
</div>
<div class="cleanuphtml-6">
<p class="cleanuphtml-5">
<label>Priority :</label> <select method="post" name="priority_post">
<option value="1" id="id_priority_post" name="priority_post">
High
</option>
<option value="2" id="id_priority_post" name="priority_post">
Medium
</option>
<option value="3" id="id_priority_post" name="priority_post" selected="selected">
Low
</option>
</select>
</p>
</div>
<div class="cleanuphtml-9">
<input type="submit" name="bttnsubmit" value="Add" onclick="window.location.href='/'" disabled="true" class="cleanuphtml-7" /> <input type="button" value="Cancel" onclick="PopUpHide()"
class="cleanuphtml-8" />
</div>
</form>
</div>
This is with jquery called calendar :
$('#datetimepicker').datetimepicker()
.datetimepicker({value:'{{ now_date|date:'Y-m-d H:i' }}',step:10});

concatenate values from select inputs and radio groups into one hidden field value

I'm trying to concatenate various select menus and radio groups into one hidden field value. I have something that "works" but does not provide the desired results. Basically it returns the first value of the radio groups but not the "selected" one. I'm assuming I need an array of some sort and then concatenate the "selected" value.
Here is some pertinent code:
jQuery
$(window).load(function() {
$(document).ready(function() {
$("#colorSelect, input[name=Radiogroup1]:checked, input[name=Columns]:checked, #fontSelect").change(function() {
concatenated_string = $("#colorSelect").val() + '&' +
$("input[name=Names]").val() + '&' +
$("input[name=Columns]").val() + '&' +
$("#fontSelect").val();
$("#productImage").val(concatenated_string);
$("#temp_display").text(concatenated_string)
})
})
});
html
<form action="https://im-here.foxycart.com/cart" method="post" accept-charset="utf-8">
<div class="center">
<!--Begin leftSide-->
<div class="submission">
<!--Begin hiddenInputs-->
<input type="hidden" name="name" value="I'm Here Notification Sign" />
<input type="hidden" name="price" value="10" />
<input type="hidden" name="image" id="productImage" value="http://2plygraphics.com/im-here/images/01.jpg" />
<!--End hiddenInputs-->
<!--Begin colorSelection-->
<div class="left eighty center">
<label>Color</label>
<br>
<select id="colorSelect" name="Color" tabindex="1" required>
<option value="" selected="selected" disabled>Choose A Color...</option>
<option value="Black">Black</option>
<option value="DarkGrey">Brushed Aluminum</option>
<option value="DarkKhaki">Brass</option>
</select>
</div>
<!--End colorSelection-->
<br>
<!--Begin nameSelection-->
<div class="left eighty center">Number Of Names
<br>
<input type="radio" name="Names" value="1{p+100}" id="Names_1" class="NameRad1 trigger textBox1" tabindex="5" required />One
<br>
<input type="radio" name="Names" value="2{p+200}" id="Names_2" class="NameRad2 trigger textBox2" tabindex="6" />Two
<br>
<input type="radio" name="Names" value="3{p+300}" id="Names_3" class="NameRad3 trigger textBox3" tabindex="7" />Three
<br>
<input type="radio" name="Names" value="4{p+400}" id="Names_4" class="NameRad4 trigger textBox4" tabindex="8" />Four
<br>
</div>
<!--End nameSelection-->
<br>
<!--Begin columnSelection-->
<div class="left eighty center">Number Of Columns
<br>
<input type="radio" name="Columns" value="1" id="Columns_0" class="ColumnRad1 " tabindex="3" required />One
<br>
<input type="radio" name="Columns" value="2" id="Columns_1" class="ColumnRad2 " tabindex="4" />Two
<br>
</div>
<!--End columnSelection-->
<br>
<!--Begin fontSelection-->
<div class="left eighty center">
<label>Font</label>
<br>
<select id="fontSelect" name="Font" tabindex="2" required>
<option value="" selected="selected" disabled>Choose A Font...</option>
<option value="Arial">Modern</option>
<option value="Times New Roman">Classic</option>
<option value="Impact">Vintage</option>
<option value="Verdana">Retro</option>
</select>
</div>
<!--End fontSelection-->
</div>
<!--End leftSide-->
<!--Begin rightSide-->
<div class="submission">
<div class="signCreatorDiv">
<div class="signMain"></div>
<div class="namesColumn">
<div class="NameImg content">
<div class="NameTxt1 right test">
<input class="test" type="text" name="name1" id="textBox1" value="" placeholder="Name 1" tabindex="9" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt2 right test ">
<input class="test" type="text" name="name2" id="textBox2" value="" placeholder="Name 2" tabindex="10" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt3 right test">
<input class="test" type="text" name="name3" id="textBox3" value="" placeholder="Name 3" tabindex="11" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt4 right test">
<input class="test" type="text" name="name4" id="textBox4" value="" placeholder="Name 4" tabindex="12" />
</div>
</div>
</div>
<div class="submitDiv">
<input type="submit" name="x:productsubmit" id="productsubmit" value="Add My Sign" class="submit" tabindex="13" />
</div>
</div>
</div>
<br>
<br>
<!--End rightSide-->
</div>
</form>
<div id="temp_display"></div>
here is a fiddle:
http://jsfiddle.net/mU3Ab/
Thanks for any help :)

Fix these lines:
$("#colorSelect, input[name=Names], input[name=Columns], #fontSelect").change(function(){
concatenated_string =
$("#colorSelect").val() + '&' +
$("input[name=Names]:checked").val() + '&' +
$("input[name=Columns]:checked").val() + '&' +
$("#fontSelect").val();
Anyway, I recommend you to have a look to:
https://api.jquery.com/serialize/

try this.
var concatenated_object ={};
$("#colorSelect, input[name=Names], input[name=Columns], #fontSelect").change(function(){
$("#colorSelect, input[name=Names]:checked, input[name=Columns]:checked, #fontSelect").each(function(){
concatenated_object[$(this).attr("name")]=$(this).val();
});
console.log(JSON.stringify(concatenated_object));
$("#productImage").val(JSON.stringify(concatenated_object));
$("#temp_display").text(JSON.stringify(concatenated_object))
});
});