In my case my checkboxes are not ticked by default so when the checkbox var html is ticked I would like it to show the alert.
Is there anyway that this can be done via a variable/use of #id or do I have to do something along the lines of ($('.checkbox_check').is(':checked'))?
I am just trying not to bloat my code if possible.
Code:
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
if(html)
{
alert("muppets");
}
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>
For that you have to attach event delegate to jquery .change() event
$(document).ready(function(){
var html = $('#showInline');
html.change(function() {
alert("muppets : "+ $(this).is(":checked"));
});
});
Try the FIDDLE.
Hope this helps..
You can use the var html directly as it is a valid jquery object. Use below code -
if(html.is(':checked'))
{
alert("muppets");
}
$(document).ready(function() {
var html = $('#showInline');
if (html.prop('checked')) {
alert("muppets");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style="width:380px; padding:20px;">
<div class="form-group">
<label>
<input id="showInline" type="checkbox" value="" checked>
<strong>Show as HTML Code</strong>
</label>
</div>
</form>
</div>
First I suggest you to change jquery and bootstrap library sequence on page.
Please follow below code.
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
$("input[type='checkbox']").on("click",function() {
alert("muppets");
});
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>
$(document).on('click', '#showInline', function() {
if (html.get(0).checked) {
alert('Checked')
}
});
HERE
Try this
if(html.prop('checked')){
alert('Do something');
}
I want to make you notice that you may have an scope issue with the html variable, as it is declared inside the closure of the function called on document ready. So once the function is executed the variable "disappears". One solution might be declare the variables you want to initialize as global vars, meaning outside any function declaration.
var html; //declare as global
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var file = $('#html');
html = $('#showInline'); //initialize
if(html)
{
alert("muppets");
}
});
Although it is not a very elegant solution. You may think of using a class and initialize a instance on your document ready callback.
Related
<form action="">
<h2>Fill out the following details: </h2>
<div class="inp">
<label for="name">Name: </label>
<input type="text" id="name">
</div>
<br>
<div class="inp">
<label for="rollno">Roll No: </label>
<input type="text" id="rollno">
</div>
<br>
<div class="inp">
<label for="image">Image: </label>
<input type="file" id="image" accept="image/jpeg">
</div>
<input type="button" id="submit" value="Submit">
</form>
<div id="output">
<h2>Your Details: </h2>
<div class="out">Name: <span id="outname"></span></div>
<div class="out">Roll No: <span id="outrollno"></span></div>
<div class="out">Image: <img id="outimage" width="200px"></div>
</div>
<script type="text/javascript">
function displayImage()
{
var x = document.getElementById("outimage");
var y = document.getElementById("image").src;
x.setAttribute("src",y);
}
document.getElementById("submit").onclick = function()
{
document.getElementById("output").style.display = "block";
document.getElementById("outname").innerHTML = document.getElementById("name").value;
document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value;
displayImage();
}
</script>
Can someone tell me why is this happening? The image is in the same folder as the HTML file. Is there a better way to achieve this? I want to display the image that is selected in the form by the user.
You need to make sure that you read the content of the image file which is being uploaded. use filereader and then readAsDataURL and once the content is loaded by filereader assign that as source to preview image placeholder.
function readURL() {
// just to avoid the error since i dont know what readURL is doing nor it is mentioned in the OP.
}
function displayImage() {
var x = document.getElementById("outimage");
var file = document.getElementById('image').files[0]
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function(e) {
x.setAttribute("src", this.result);
}
}
document.getElementById("submit").onclick = function() {
document.getElementById("output").style.display = "block";
document.getElementById("outname").innerHTML = document.getElementById("name").value;
document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value;
displayImage();
}
<form action="">
<h2>Fill out the following details: </h2>
<div class="inp">
<label for="name">Name: </label>
<input type="text" id="name">
</div>
<br>
<div class="inp">
<label for="rollno">Roll No: </label>
<input type="text" id="rollno">
</div>
<br>
<div class="inp">
<label for="image">Image: </label>
<input type="file" id="image" accept="image/jpeg" onchange="readURL(this)">
</div>
<button type="button" id="submit">Submit
</button>
</form>
<div id="output">
<h2>Your Details: </h2>
<div class="out">Name: <span id="outname"></span></div>
<div class="out">Roll No: <span id="outrollno"></span></div>
<div class="out">Image: <img id="outimage" width="200px"></div>
</div>
This is my .gs file:
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("page")
return tmp.evaluate()
}
function get_sum(el1,el2) {
var rs=parseInt(el1)+ parseInt(el2)
return rs;
}
and this is my .html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<h1> Get listing price of a car </h1>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">First element</label>
<input type="text" class="form-control" id="el1" placeholder="Enter the first number">
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">Second element</label>
<input type="text" class="form-control" id="el2" placeholder="Enter the first number">
</div>
<div class="col-sm-5">
<button id="btn" class="btn btn-primary">Search</button>
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput"> <?=result; ?> </label>
<input type="text" class="form-control" id="result">
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function set_sum(result){
document.getElementById("result").innetHTML=result;
}
function doStuff(){
var el1=document.getElementById("el1").value;
var el2=document.getElementById("el2").value;
google.script.run.withSuccessHandler(set_sum).get_sum(el1,el2)
}
</script>
</body>
</html>
I would like to return to the user the sum of two numbers that he chooses. Namely, the user enters two numbers, presses the button and then I would like to show him back the sum of it . However, I can not find a way to do this. Can anyone help me please?
you can use withSuccessHandler() to return the sum calculated in code.gs file and set the value in a html element on the successHandler function.
.gs File:
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("page")
return tmp.evaluate()
}
function get_sum(el1,el2) {
var rs=parseInt(el1)+ parseInt(el2)
Logger.log(rs)
return rs;
}
.html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<h1> Get sum of two values </h1>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">First element</label>
<input type="text" class="form-control" id="el1" placeholder="Enter the first number">
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">Second element</label>
<input type="text" class="form-control" id="el2" placeholder="Enter the first number">
</div>
<div class="col-sm-5">
<button id="btn" class="btn btn-primary">Search</button>
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput"> <div id="resultVal" name="resultVal"> </div> </label>
<input type="text" class="form-control" id="result">
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var el1=document.getElementById("el1").value;
var el2=document.getElementById("el2").value;
google.script.run.withSuccessHandler(set_sum).get_sum(el1,el2)
}
function set_sum(result){
document.getElementById("result").value=result;
}
</script>
</body>
</html>
you can refer this article
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.
I have a registration form that I would like to have multiple field validation. What I mean by this is if more than one field is not filled in it will be highlighted red. I have some code already written but instead of highlighting the field not filled in, it's highlighting all of them. I realise it is quite long winded but I'm fairly new to this. My JS code is as follows:
`function formCheck() {
var val = document.getElementById("fillMeIn").value;
var val = document.getElementById("fillMeIn2").value;
var val = document.getElementById("fillMeIn3").value;
var val = document.getElementById("fillMeIn4").value;
var val = document.getElementById("fillMeIn5").value;
var val = document.getElementById("fillMeIn6").value;
var val = document.getElementById("fillMeIn7").value;
if (val == "") {
alert("Please fill in the missing fields");
document.getElementById("fillMeIn").style.borderColor = "red";
document.getElementById("fillMeIn2").style.borderColor = "red";
document.getElementById("fillMeIn3").style.borderColor = "red";
document.getElementById("fillMeIn4").style.borderColor = "red";
document.getElementById("fillMeIn5").style.borderColor = "red";
document.getElementById("fillMeIn6").style.borderColor = "red";
document.getElementById("fillMeIn7").style.borderColor = "red";
return false;
}
else {
document.getElementById("fillMeIn").style.borderColor = "green";
document.getElementById("fillMeIn2").style.borderColor = "green";
document.getElementById("fillMeIn3").style.borderColor = "green";
document.getElementById("fillMeIn4").style.borderColor = "green";
document.getElementById("fillMeIn5").style.borderColor = "green";
document.getElementById("fillMeIn6").style.borderColor = "green";
document.getElementById("fillMeIn7").style.borderColor = "green";
}
}`
My HTML is as follows:
'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
<input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
<input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
<input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>'
Thanks!
You could have the ids in an Array, iterate through its values, and execute the repeatable code in a function that groups all the logic inside.
example :
["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
// do things with id
})
Why not use the html "required" property instead?
If you want to do this with JS, you should give each variable a different name. In the code you posted you are continuously overwriting the same variable, and then, it evaluates val (which ended up being assigned to the (fill me7 value) to "", and if true, setting all the borders to red.
Set different variables, push the input values into an array when submit is triggered and loop through them if variables[i]==0, set getElementId(switch case[i] or another array with the name of the inputs[i]).bordercolor to red.
AGAIN, this sound VERY INEFFICIENT and I am not sure at all it would work. My guess is that it would take A LOT of time, and probably get timed out (except you are using some asych/try-catch kind of JS).
I would simply go for an HTML required property and then override the "required" property in CSS to make it look as you intend to. Simpler, easy and clean.
The main issue in your code is that you override the variable val each time you wrote var val = ....
Keeping your own your logic, you could write something like that.
var formModule = (function () {
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
function markInvalid($field) {
$field.style.borderColor = 'red';
}
function markValid($field) {
$field.style.borderColor = 'green';
}
return {
check: function () {
var isValid = true;
$fields.forEach(function ($f) {
if ($f.value === '') {
if (isValid) alert('Please fill in the missing fields');
isValid = false;
markInvalid($f);
}
else markValid($f);
});
return isValid;
}
};
})();
There are some extra concepts in this example which may be useful:
Working with the DOM is really slow, that's why you should
put your elements in a variable once for all and not everytime you
click on the submit button.
In my example i wrap the code with var formModule = (function () {...})();.
It's called module pattern. The goal is to prevent variables to leak in the rest of the application.
A better solution could be this one using the 'power' of html form validation:
HTML:
<form id="mbrForm" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
<input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
<input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>
JS:
var formModule = (function () {
var $form = document.getElementById('mbrForm');
var $btn = document.getElementById('btnSubmit');
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
checkValidation();
$form.addEventListener('change', checkValidation);
$form.addEventListener('keyup', checkValidation);
$fields.forEach(function ($f) {
$f.addEventListener('change', function () {
markInput($f, $f.checkValidity());
});
});
function checkValidation() {
$btn.disabled = !$form.checkValidity();
}
function markInput($field, isValid) {
$field.style.borderColor = isValid ? 'green' : 'red';
}
})();
In this example, the button gets disabled until the form is valid and inputs are validated whenever they are changed.
I added required attribute in HTML inputs so they can be handled by native javascript function checkValidity(). Note that in this case inputs email and number are also correctly checked. You could also use attribute pattern to get a more powerfull validation:
<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">
Hope it helps.
I have a checkbox with ID GlandularFever and on click (which checks it) I can get it to show another DIV with data-field name="GlandularDetails". Though on un-check, how do I get it to hide that div again? If data-field name="GlandularDetails hidden = true then show, else if data-field name="GlandularDetails hidden = false then hide.
<script>
$(document).ready(function(){
$("#GlandularFever").click(function(){
$(document.querySelectorAll('[data-field name="GlandularDetails"]')).show(100);
hidden = false;
});
});
</script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/>
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
Thank you
Try this:
$(document).ready(function () {
$('#GlandularFever').click(function () {
if ($(this).prop('checked')) {
$('[data-field name="GlandularDetails"]').show(100);
} else {
$('[data-field name="GlandularDetails"]').hide(100);
}
});
});
You can use the JQuery method .toggle( [duration ] [, complete ] )
var glandularDetails = $('[data-field-name="GlandularDetails"]');
glandularDetails.hide();
$("#GlandularFever").click(function() {
glandularDetails.toggle(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" />
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
Use toggle to alternate between hidden and visible.
Also, avoid document.querySelectorAll when using jQuery. jQuery automatically handles that:
$("#GlandularFever").click(function() {
$('[data-field-name="GlandularDetails"]').toggle(100);
});
div.form-group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" />
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
check this code and run
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div[data-field-name=GlandularDetails]").hide();
$("#GlandularFever").click(function(){
if($(this).is(':checked'))
{
$("div[data-field-name=GlandularDetails]").show();
}
else
{
$("div[data-field-name=GlandularDetails]").hide();
}
});
});
</script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/>
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
.