My alert message pop ups before the loading/submission of a record, so if the user didn't input any data. It still pops up. What additional javascript function should I use for my alert box?
Here's my code
function myFunction() {
alert("Adding Succesful!");
}
<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
<input name="bName" class="form-control req" required/>
<button type="submit" class="btn btn-default bt" onclick="myFunction()" style="align:right;">ADD</button>
Use HTML5 validity checks to see if the form is valid or not.
var form = document.getElementById('f');
function myFunction() {
if (form.checkValidity()) {
alert("Adding Succesful!");
}
}
<form id="f">
<label for="bName" class="control-label col-xs-4">
<p class="left">Brand Name</p>
</label>
<input name="bName" class="form-control req" required/>
<button type="submit" class="btn btn-default bt" onclick="myFunction()" style="align:right;">ADD</button>
</form>
Try using:
<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
<input name="bName" class="form-control req" required/>
<button type="submit" class="btn btn-default bt" onclick="return myFunction(this)" style="align:right;">ADD</button>
(note I changed the onclick to include a return and a this)
And use it with the JavaScript:
function myFunction(t)
{
if($(t).prev().val())
{
alert('Adding Succesful!')
return true;
}else{
return false;
}
}
Related
I have been trying to cycle between the disability states of two inputs on my website by using a button attached to some JavaScript. My current code has two buttons in use which both disable one input and enable the other, however this is not very practical. I wanted to know how I can use one button and one script to cycle between the disability states of my inputs, this is my current code:
<script>
function switch_monthlyexpense()
{
document.getElementById("monthlyexpenses").disabled=false;
document.getElementById("monthlypexpenses").disabled=true;
}
</script>
<script>
function switch_monthlypexpense()
{
document.getElementById("monthlyexpenses").disabled=true;
document.getElementById("monthlypexpenses").disabled=false;
}
</script>
<button class="btn btn-primary" onclick="switch_monthlyexpense()" id="monthlyexpensestoggle">Expenses</button>
<button class="btn btn-primary" onclick="switch_monthlypexpense()" id="monthlypexpensestoggle">P Expenses</button>
<form id="expenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
<input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
</div>
<span class="input-group-text" id="dsign5">$</span>
</form>
<form id="pexpenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
<input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
</div>
<span class="input-group-text" id="psign4">%</span>
</form>
<script>
// use a variable to note which one is disabled
let selected = "monthlyexpenses"
function switchDisabled () {
// toggle the from "monthlyexpenses" to "monthlypexpenses" or vice versa
selected = selected === "monthlyexpenses" ? "monthlypexpenses" : "monthlyexpenses"
// check if the DOM disabled state is the same as the selected
document.getElementById("monthlyexpenses").disabled = selected === "monthlyexpenses";
document.getElementById("monthlypexpenses").disabled = selected === "monthlypexpenses";
}
</script>
<button class="btn btn-primary" onclick="switchDisabled()" id="switch-button">Switch</button>
<form id="expenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
<input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
</div>
<span class="input-group-text" id="dsign5">$</span>
</form>
<form id="pexpenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
<input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
</div>
<span class="input-group-text" id="psign4">%</span>
</form>
disabled is an attribute so you can set it by:
document.getElementById("myId").setAttribute('disabled', '');
And to enable the element:
document.getElementById("myId").removeAttribute('disabled');
Your first function will look like:
function switch_monthlyexpense()
{
document.getElementById("monthlyexpenses").removeAttribute('disabled');
document.getElementById("monthlypexpenses").setAttribute('disabled', '');
}
I am basically checking to see if the input field(fullName) is empty or not. If it is empty, then I want to disable the submit button, and forcing the user to add text in the FullName field.
To achieve this scenario, I did the following(code below), but when testing, I am still able to click the submit button, even if the FullName field is empty. I am not sure, what I am doing wrong with the JavaScript code.
I am doing all of this inside an .htm file.
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
}
return true;
}
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
</fieldset>
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
} else {
return true;
}
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<fieldset>
<form name='form' id='form'>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button id="btn_sumbit" type="button" class="btn btn-namebtn" onclick='checkform(form)'>Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</form>
</fieldset>
</div>
</div>
Note:- You have not added form tag and onclick='checkform(form)' which created issue in your code.
Your JS is ok. There are some changes -
First, wrap the form content in a form with a name attribute of form.
Next, fire the checkform function on clicking the submit button.
Check the snippet below-
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
}
return true;
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<form name="form">
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name
<span class="required">*</span>
</label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button id="btn_sumbit" type="submit" class="btn btn-namebtn" onclick="checkform(document.form)">Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
Is this what you are attempting?
Onclick if value of input is empty then you will see alert and button will disable.
EDIT: Included comments in code.
//get FullName input by id
var FullName = document.getElementById("FullName");
//get button by id
var btn_submit = document.getElementById("btn_submit");
function checkform() {
//if FullName is empty then alert and disable button
if (FullName.value === "") {
alert("Please enter your name!");
btn_submit.disabled = true;
}
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button onclick="checkform();" id="btn_submit" type="submit" class="btn btn-namebtn">Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</div>
</div>
I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});
I have a validation in my form for email. If the user is already registered, it shows the alert and resets the form with null value. I need the alert message as well as data should retain in the form.
Thanks in advance.
https://plnkr.co/edit/WhdRmJmLs69yaf6Q2uYI?p=preview
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">First Name:</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="firstName" ng-disabled="!edit" name="firstName" ng-model="user.firstName" ng-required="true">
<span style="color:red" ng-show="userForm.myName.$touched && userForm.myName.$invalid">Please enter a First Name</span>
</div>
<label class="control-label col-sm-2">Email:</label>
<div class="col-xs-4"><input type="email" id="email" class="form-control" ng-disabled="!edit" name="email" ng-model="user.email" ng-required="true">
<span style="color:red" ng-show="userForm.email.$touched && userForm.email.$invalid">Please enter valid email ID</span>
</div>
</div>
<div class="panel-footer">
<button type="button" ng-click='edit=!edit'id="Edit" ng-show="!edit" class="btn btn-default" >Edit</button>
<button ng-show="edit" id="save" type="submit" ng-click='addOrModifyUser(user)' class="btn btn-default"
ng-disabled="userForm.$invalid">Save
</button>
<a ng-if="user.accountId" ui-sref="account.locations.contacts({accountId: user.accountId})">
<button type="type" class="btn btn-default">Cancel</button>
</a>
</div>
I?p=preview
Don't know exactly what your problem is here but this is how I would have solved a custom email validation check in angular 1.x.
Html:
<form ng-submit="submit()">
<input type="email" class="form-control" id="email" name="email" placeholder="email" ng-model="formModel.email" />
<span ng-show="formModel.$submitted && formModel.teamName.$error.exists">Email already exists</span>
</form>
Js: (in your angular controller) where "EmailService" would be your http service of choice that checks if email exists against your backend:
myApp.controller('mainController', function($scope, EmailService) {
$scope.submit = function() {
$scope.formModel.email.$setValidity("exists", true);
EmailService.emailExist($scope.formModel.email, { // check if email exists
success: function(exists) {
$scope.$apply(function(){
$scope.formModel.email.$setValidity("exists", !exists); // set validation flag
});
if($scope.formModel.$valid) {
// submit if valid
}
}
}
}
}
Good luck!
I have the following form. I want to validate the email field .it should only contain for domain name "#somename.com " when the user clicks submit.
The mail should only be validated when the check box is clicked to show the email field.
If the email is invalid i want to prevent submission
<form class="form-horizontal" id="rForm" data-toggle="validator" role="form">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<label class="checkbox-inline col-xs-10">
<input type="checkbox" ID="chkbx"> Email
</label>
</div>
</div>
<div class="form-group email">
<div class="col-xs-offset-3 col-xs-8">
<div class="col-xs-8">
<input type="text" class="form-control " placeholder="Enter email">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<input type="reset" class="btn btn-default" id="rset" value="Reset">
<input type="submit" class="btn btn-primary" id="submit" value="Submit">
</div>
</div>
</form>
JS
$("#submit").on('keypress click', function(e){
e.preventDefault();
$('#chkbx').hide();
$('#chkbx').click(function () {
// This will show / hide your element accordingly
$('.email').toggle();
});
});
Checkout JavaScript RegEx to determine the email's domain (yahoo.com for example). You can use that and augment your example:
$('#chkbx').click(function() {
// This will show / hide your element accordingly
$('.email').toggle();
});
$("#submit").on('click', function(e) {
e.preventDefault();
if ($('#chkbx').is(':checked')) {
// https://stackoverflow.com/questions/3270185/javascript-regex-to-determine-the-emails-domain-yahoo-com-for-example
console.log(/#testdomain.com\s*$/.test($('#email_input').val()));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" id="rForm" data-toggle="validator" role="form">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<label class="checkbox-inline col-xs-10">
<input type="checkbox" ID="chkbx" checked>Email
</label>
</div>
</div>
<div class="form-group email">
<div class="col-xs-offset-3 col-xs-8">
<div class="col-xs-8">
<input id="email_input" type="text" class="form-control " placeholder="Enter email">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<input type="reset" class="btn btn-default" id="rset" value="Reset">
<input type="submit" class="btn btn-primary" id="submit" value="Submit">
</div>
</div>
</form>
Use the following function to test for your email.
EDIT:
You first need to add a name= and id= to your email input field.... So what you want to do is:
<input type="text" class="form-control " placeholder="Enter email" name="email" id="email">
and then do:
function testEmail(string) {
var regex = /.+#somename.com$/i;
return regex.test(string);
}
//testEmail("nope#test.com"); // false
//testEmail("what#somename.com.other"); //false
//testEmail("yeah#somename.com"); //true
//testEmail("#somename.com"); // false
$('form').submit(function(e){
var values = $('form').serialize();
if(!testEmail(values.email))
e.preventDefault();
// your submission code goes here.
})