Just starting with HTML and JavaScript, been set an assignment to use JavaScript for some logical function. I have created a form and wanted to check that the elements are filled in correctly. I have tried to look at the duration and ideally wanted to set a minimum value upon submission, however it is not working as expected.
I have to use codepen for the assignment which has a separate column for JavaScript but I have put the code used in the form, not sure what I need to do.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student recovery recording</title>
<link rel="stylesheet" href="newstyle.css" />
<meta charset="UTF-8" />
</head>
<body>
<header><h1>Student Recovery Recording</h1></header>
<main>
<div class="container1">
<p>form content goes here</p>
</div>
<div class="container">
<form name="myForm" form action="" method="get">
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" />
</div>
<div class="form-row">
<label for="Exam"> Exam Code:</label>
<select name="Exam" id="Exam">
<option value="">--Please choose the correct Exam code--</option>
<option value="code1">AT017</option>
<option value="code2">CT154</option>
<option value="code3">AT317</option>
<option value="code4">BT141</option>
</select>
</div>
<div class="form-row">
<label for="reason"> Reason For Training:</label>
<select name="reason" id="reason">
<option value="">
--Please select the correct reason for training
</option>
<option value="train1">ATT</option>
<option value="train2">ITT</option>
<option value="train3">ETT</option>
</select>
</div>
<div class="form-row">
<label for="date">Date:</label>
<input type="date" id="date" />
</div>
<div class="form-row">
<label for="Studentname"> Student Name:</label>
<input type="text" id="Studentname" />
</div>
<div class="form-row">
<label for="Duration">Duration:</label>
<input type="time" id="Duration" min="1:00" />
</div>
<div class="form-row">
<textarea name="comment" rows="4" cols="50">
Enter details of work carried out and KLP's covered here...</textarea
>
</div>
<input type="submit" value="Submit" onclick="myFunction()" />
<script>
function myFunction() {
var text;
if (document.getElementById("Duration").validity.rangeUnderflow) {
text = "Not enough Recovery Time";
} else {
text = "Recovery Time acceptable";
}
document.getElementById("myForm").innerHTML = text;
}
</script>
</form>
</div>
</main>
<footer>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img
style="border: 0; width: 88px; height: 31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"
/>
</a>
</p>
</footer>
</body>
</html>
Maybe you can use setTimeOut() method to the set duration trigger the method when the user load the window or the user starting to press the key.
example:
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" onkeypress="setTimeout(showSubmitButton(), 5000)" /> //trigger showSubmitButton() when key pressed wait 5 sec then run showSubmitButton()
<input type="submit" id="submit" value="submit" style="display:none">// set display to none for hiding the button
</div>
<script>
function showSubmitButton() {
document.getElementById("submit").style.display = "block" // show the button after 5 sec
}
</script>
hope this help you
Related
I'm trying to develop a form where fields will be show according to already selected fields.
I'm facing problem to integrate JavaScript with html properly. I need your help to let me know how I can update the display of fields asynchronously.
Expected Behavior :
By default there will 1 choice selected and 1 input field , if user selects 2 choices from select input then there should be 2 input fields
This is minimal example where I'm trying:
document.getElementById("app").innerHTML = `
<h1>Show fields According to Selected Choice</h1>
<div>
1 field if selected one choice
2 fields if selected 2 choices
</div>
`;
body {
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
<div>
<label for="id_choice_2">Choice 2:</label>
<input
type="text"
name="choice_2"
class="vTextField"
maxlength="100"
id="id_choice_2"
/>
</div>
</fieldset>
<script>
function myFunction() {
var x = document.getElementById("id_type").value || null;
// Put logic here
}
</script>
<script src="src/index.js"></script>
</body>
</html>
I also added this into a sandbox if you want to run the code. https://codesandbox.io/s/fervent-worker-r6xszj?file=/src/index.js
Using the onchange event of the select you can call a function that first clears all the fields and then adds N fields as selected:
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type" onchange="genFields()">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
<option value="3">3 Choices</option>
<option value="4">4 Choices</option>
</select>
</div>
</div>
<div id="fields"></div>
</fieldset>
</body>
<script>
function genFields() {
document.getElementById("fields").innerHTML = "";
let numFields = document.getElementById("id_type").value;
for (let i = 1; i <= numFields; i++) {
document.getElementById(
"fields"
).innerHTML += `<div><label for='id_choice_${i}'>Choice ${i}</label><input type='text' id='id_choice_${i}' name='choice_${i}' class='vTextField' maxLength=100></div>`;
}
}
</script>
</html>
You can follow this:
let selects = document.querySelector("#id_type");
console.log(selects);
selects.onchange = function (e) {
let inputs = document.querySelector("#inputs");
inputs.innerHTML = `
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
`;
if(e.target.value == "2") {
inputs.innerHTML +=`
<div>
<label for="id_choice_1">Choice 2:</label>
<input
type="text"
name="choice_2"
class="vTextField"
maxlength="100"
id="id_choice_2"
/>
</div>
`;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div id="inputs">
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
</div>
</fieldset>
</body>
</html>
You just have to toggle the visibility of those elements with some logic to compare the selected option.
function myFunction(e) {
switch (e.target.value) {
case '1':
document.getElementById('id_choice_1_container').style.display = "block";
document.getElementById('id_choice_2_container').style.display = "none";
break;
case '2':
document.getElementById('id_choice_1_container').style.display = "none";
document.getElementById('id_choice_2_container').style.display = "block";
break;
default:
break;
}
}
<div id="app">
<h1>Show fields According to Selected Choice</h1>
</div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type" onchange="myFunction(event)">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div id="id_choice_1_container">
<label for="id_choice_1">Choice 1:</label>
<input type="text" name="choice_1" class="vTextField" maxlength="100" id="id_choice_1" onchange="myFunction(event)"/>
</div>
<div id="id_choice_2_container" style="display: none">
<label for="id_choice_2">Choice 2:</label>
<input type="text" name="choice_2" class="vTextField" maxlength="100" id="id_choice_2" onchange="myFunction(event)"/>
</div>
</fieldset>
I am new to programming. I have got an issue with my jquery codes.
I have a form that I want to hide some sections of it and do not show until the first section which is input text, be completed then after clicking on the next button first check if all data inputs are completed then show the next section which is dropdown text (part2) and if I pick one of the dropdown text then show next section which is part3.
I tried this code.
<script>
$(".part2").hide()
$(".nextBtn").on("click", function(){
$('input').each(function() {
if(!$(this).val()){ alert('Some fields are empty'); return false; }
else{
$(".part2").show();}
});
});
</script>
<div class="form">
<div class="inputfield">
<label>First Name</label>
<input type="text" class="input" name="get[firstname]">
</div> <br/>
<div class="inputfield">
<label>Last Name</label>
<input type="text" class="input" name="get[lastname]">
</div> <br/>
<div class="inputfield">
<label>Email Address</label>
<input type="text" class="input" name="get[email]">
</div>
<div class="inputfield">
<label>Phone Number</label>
<input type="text" class="input" name="get[phone]">
</div>
<button class="nextBtn">Next</button>
<section class="part2">
<div class="inputfield">
<label for="text">Choose a text:</label>
<select name="text" id="text">
<option value="1">Text1</option>
<option value="2">Text2</option>
</select>
</div>
<section class="part3">
<div class="inputfield">
<label for="text">Choose a text:</label>
<select name="text" id="text">
<option value="1">Text1</option>
<option value="2">Text2</option>
</select>
</div>
Thanks.
Wrap all in sections as part2 and part3 and try this, and include one next button in each section in order to know the section will have to show
$('.nextBtn').click(function(){
if ($(this).closest('section').find('input').val() != '') {
$('section').hide();
$(this).closest('section').next().show();
}else {
console.log('Some fields are empty')
}
})
I am trying to add validation to a html form that looks like this:
<div id="container">
<header>
<h1>Production Form</h1>
</header>
</br>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<br><br>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="url" id="link" class="form-control" name="output[link]">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</section>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
However the code is not picking validation when I use the required attribute, how can I add validation for this within a js script that will check against the values in this html form before submitting
I think maybe you get the errors because the HTML tags were not opened and closed in the correct order, and you had an opened div that needed to be closed. Try validating the HTML code. I think it can cause problems if your html is not valid.
I added these attributes to your HTML (and validated it), and also some CSS to see the validation result.
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
and
:invalid {
border: 1px solid red;
}
This works and validates as expected.
:invalid {
border: 1px solid red;
}
input {
margin: 1em
}
<div id="container">
<header>
<h1>Production Form</h1>
</header>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</div>
</section>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
Note that the validation patterns are only for testing and not real patterns that should be used!
I used this page as reference: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
If you want the required attribute to work, I think you need to change your last input type to "submit" :
<input type="submit" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
But I agree that it would be great to add some JS if you want to do proper form validation. I see some people shared useful links on the subject.
<form id="cf-task-form" onsubmit="return validateForm()">
const link = document.querySelector("#link").value
const Address = document.querySelector("#Address").value
const research = document.querySelector("#research").value
function validateForm() {
if (link == '') {
alert("filled out url");
return false;
}
else if (Address == '') {
alert("filled out Address");
return false;
}
else if (research == '') {
alert("filled out research");
return false;
}
}
I am having difficulty getting this to work, everything works except the dependent dropdown, am I doing something wrong?
I am trying to add this to a google sheet script working with a sheet, it all seems to work except the dependent dropdown.
This is the error I'm getting:
Uncaught ReferenceError: nameCheck is not defined
if I test this code on an HTML tester it seems to work correctly, however, it does not seem to work in google sheets.
<html lang="en">
<body>
<h4>Add a Customer</h4>
Select a Date: <input type="date" id="date" name="start" class="mb-3">
<div>
Sales Rep:
<select id="rep">
<option>select option</option>
<option>Neil</option>
<option>Dave</option>
<option>Bob</option>
<option>Trick</option>
</select>
</div>
<div class="add-customer-form">
<div class="form-group">
<label for="first-name">Company name : </label>
<input type="text" class="form-control" id="first-name">
</div>
<div>
Product type:
<select id="input" onchange="nameCheck()">
<option>select option</option>
<option>CASH</option>
<option>Training</option>
<option>Optional Modules</option>
<option>Annual Additional Modules</option>
<option>Hosting Existing user moving Licence</option>
<option>Rentals</option>
<option>Existing Customer - Rentals</option>
<option>Existing Customer - CASH</option>
<option>other</option>
google.script.run.nameCheck();
console.log(input);
</select>
<div>
Product:
<select id="output" onchange="nameCheck()">
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="first-name">Quantity : </label>
<input type="number" class="form-control" id="last-name">
</div>
<div class="form-group mt-3">
<label for="phone-number">Previous CAD : </label>
<input type="text" class="form-control" id="phone-number">
<div class="form-group">
<label for="sales-price">Sales Price : </label>
<input type="number" class="form-control" id="salesP">
</div>
<div class="form-group">
<label for="deposit">Deposit : </label>
<input type="number" class="form-control" id="deposit">
</div>
<div class="form-group">
<label for="install">No. Intallments : </label>
<input type="number" class="form-control" id="install">
</div>
<div class="form-group">
<label for="invoice">Invoice Nr : </label>
<input type="text" class="form-control" id="invoice">
</div>
<div class="form-group">
<label for="Notes">Notes : </label>
<input type="text" class="form-control" id="notes">
</div>
<button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
Successfully Added!!
</div>
<script>
function nameCheck(){
var a=document.getElementById("input").value;
console.log(a);
if(a==="CASH")
{
var arr=["Cash 1","cash2"];
}
else if(a==="Existing Customer - CASH")
{
var arr=["existing 1", "existing 2"];
}
else if(a==="Training")
{
var arr=["Level 1 Training (in-house)","Level 2 Training (in-house)","Level 3 Training (in-house)","Onsite Training (up to 4 people)","Training Online per hour","Principles of Design (Renee Mascari)","Graham Hayden Sales/Care","KBBConnect training (per hours)","Training Solus (in-house) - 8 people"];
}
var string="";
for(i=0;i<arr.length;i++)
{
string=string+"<option value="+arr[i]+">"+arr[i]+"</option>";
}
document.getElementById("output").innerHTML=string;
}
</script>
</body>
</html>
Screenshot off dialog:
The code in the question have several issues, i.e.:
Bad HTML
Remove google.script.run.nameCheck(); and console.log(input); from
<select id="input" onchange="nameCheck()">
<option>select option</option>
<option>CASH</option>
<option>Training</option>
<option>Optional Modules</option>
<option>Annual Additional Modules</option>
<option>Hosting Existing user moving Licence</option>
<option>Rentals</option>
<option>Existing Customer - Rentals</option>
<option>Existing Customer - CASH</option>
<option>other</option>
google.script.run.nameCheck();
console.log(input);
</select>
The above because JavaScript can't be included that way between HTML tags.
Use of HTML attributes for handling events.
Instead of
<select id="input" onchange="nameCheck()">
Use
<select id="input">
then between <script></script> use something like
document.getElementById('input').onchange = nameCheck;
or use addEventListener
Related
HTML form submits twice if the onsubmit function runs longer than 10 seconds
Suppose I have a form with some input values(name, mobile_number, age and gender).
After fill up the form while I clicked submit button, I want to print the form values.
I have already tried with jQuery but not get the exact result.
Here is my result
But I want to print the form data like this
Name : Raff
Mobile Number : 016*******
Age : **
Gender : Male
Here is my form
<form action="{{url('/add-prescription')}}" method="post" id="new_prescription_form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row clearfix">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
<div class="card">
<div class="body">
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Name: </b>
<input type="text" id="name" class="form-control" placeholder="" name="name" required/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Mobile Number: </b>
<input type="text" id="mobile_number" class="form-control" placeholder="" name="mobile_number" required/>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Age: </b>
<input type="text" id="age" class="form-control" placeholder="" name="age" required/>
</div>
</div>
</div>
<div class= "col-sm-6">
<b>Gender: </b>
<select id="gender" class="form-control show-tick" name="gender" required>
<option value="">-- Please select --</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Others</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="form-group">
<button type="submit" class="btn btn-primary m-t-15 waves-effect" value="print" onclick="PrintElem()">SUBMIT</button>
</div>
</div>
</form>
jQuery
function PrintElem()
{
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
How to solve this ? Anybody help please.
You have to get the values of input fields and add those into the print HTML, this can be achieved using JavaScript , you don't need JQuery for this.
Update your PrintElem function with this and check
function PrintElem()
{
var name = document.getElementById('name').value;
var mobile_number = document.getElementById('mobile_number').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()"><div><p><lable>Name :</lable><span>'+name+'</span></p><p><lable>Mobile Number :</lable><span>'+mobile_number+'</span></p><p><lable>Age:</lable><span>'+age+'</span></p><p><lable>Gender</lable><span>'+gender+'</span></p></div></body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Hope this works for you
<html>
<head>
<title>jQuery example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#InputText').keyup(function() {
$('#OutputText').val($(this).val());
$('#DIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
</head>
<body>
<div id="JQDiv">
<form id="JQForm" action="">
<p>
<label for="InputText">
Enter Name :
</label><br />
<input id="InputText" type="text" name="inputBox" />
</p>
<p>
<label for="OutputText">
Output in box
</label><br/>
<input id="OutputText" type="text" name="outputBox" readonly="readonly" />
</p>
<p>
Output in div
</p>
<div id="DIVTag"></div>
</form>
</div>
</body>
</html>
Similarly you can do it for other form fields.
Also use angularjs to achieve same functionalities you can
This is what you are looking for?
Let me know.