I'm learning javascript so this question may seem basic. I have a form that takes email address and a choice from a dropdown menu as inputs. When the button is clicked, I'd like both these inputs to be sent to the console log.
The javascript I'm using below just returns 'null'
How do I send the email AND the option selected from the dropdown menu to the console log?
document.getElementById('email').addEventListener('change', function() {
console.log(this.getAttribute('value'));
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<form role="form" id="sub_form">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<select id="dropdown" name="dropdown" class="form-control custom-dropdown">
<option>Select...</option>
<option>Design</option>
<option>Human Resources</option>
<option>Finance</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<button type="submit" class="btn btn-large custom-button"> Sign up now </button>
</div>
</div>
</div>
</form>
Try this way:
document.getElementById('sub_form').onsubmit = function(){
console.log(document.getElementById('email').value, document.getElementById('dropdown').value)
return false;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<form role="form" id="sub_form">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<select id="dropdown" name="dropdown" class="form-control custom-dropdown">
<option>Select...</option>
<option>Design</option>
<option>Human Resources</option>
<option>Finance</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<button type="submit" class="btn btn-large custom-button"> Sign up now </button>
</div>
</div>
</div>
</form>
In event listener.. this is not proerly availabe so use. event listner function receives event object as first parameter. so you can use that ...
change your code as below.
document.getElementById('email').addEventListener('change', function(e) {
console.log(e.target.value);
});
Try this to get email & dropdown value when clicked on Sign up now button.
document.getElementById('custom-button').addEventListener("click", function(e) {
e.preventDefault();
console.log(document.getElementById("custom-email").value);
console.log(document.getElementById("dropdown").value);
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<form role="form" id="sub_form">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<input type="email" id="custom-email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<select id="dropdown" name="dropdown" class="form-control custom-dropdown">
<option>Select...</option>
<option>Design</option>
<option>Human Resources</option>
<option>Finance</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<button type="submit" id="custom-button" class="btn btn-large custom-button"> Sign up now </button>
</div>
</div>
</div>
</form>
Related
I have an issue with BS modal (im using BS 3) and it is confirming form submission. But it is placed in accordion and when i click e.g. 5th element modal and validator works but shows error in first element. I dont know what can be the problem, maybe data-toggle is mixed (modal and validator).Below I put that part of code (with erased loop and other things connected with template viewer -> smarty)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form id="myForm" action="" method="post" data-toggle="validator" role="form">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="">
<input type="hidden" name="hash" value="">
<input type="button" name="btn" value="Utwórz" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn button btn-primary" />
</form>
</div>
</div>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<p class="body" style="font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight: 400;">
<b> Klikając „Załóż konto/Aplikuj” akceptujesz
Regulamin Serwisu i potwierdzasz, że zapoznałeś się z
Polityką ochrony prywatności oraz
Polityką Cookies.
</b>
</p>
</div>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-success col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">Załóż konto/Aplikuj
</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I dont use any js file to this (only the validator, but its default code).
To clarify whats going on with this problem i attach video https://drive.google.com/file/d/1pYwLbxyZTZUFiGXny5LdO9Zg1S9_jKnr/view?usp=sharing
Earlier the code was without modals an validator was working correctly e.g i click submit on 5th element and validator runs in this element and so on.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<div>
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="hash_{$v.id}" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form action="" method="post" data-toggle="validator" role="form" onsubmit="return confirm('Czy na pewno chcesz założyć konto pracownikowi?');">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="{$i}">
<input type="hidden" name="hash" value="{$v.hash}">
<input type="submit" class="btn button btn-primary" value="Utwórz">
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
production code snippet
version of bootstrap - 3.3.7
Thanks in advance for help :)
I have a form in which I have multiple forms to like add and remove so it can be one or two or 3.
I just want to get data from the form and save it in an array
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<section>
<div class="container">
<form method="post" action="submit.php">
<div class="form-group fieldGroup">
<div class="input-group">
<div class="row">
<div class="col-lg-4">
<input type="text" name="userfname" class="form-control" placeholder="Enter First Name"/>
</div>
<div class="col-lg-4">
<input type="text" name="usermname" class="form-control" placeholder="Enter Middle Name"/>
</div>
<div class="col-lg-4">
<input type="text" name="userlname" class="form-control" placeholder="Enter Last Name"/>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<input type="text" name="usermobilenumber" class="form-control" placeholder="Enter Mobile Number"/>
</div>
<div class="col-lg-4">
<input type="text" name="userdob" class="form-control" placeholder="Enter Date of birth"/>
</div>
<div class="col-lg-4">
<select id="gender">
<option value="volvo">Male</option>
<option value="saab">Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<input type="text" name="useremail" class="form-control" placeholder="Enter Email id"/>
</div>
<div class="col-lg-4">
<input type="text" name="userpassword" class="form-control" placeholder="password"/>
</div>
<div class="col-lg-4">
<select id="User Category">
<option value="">Head of Family</option>
<option value="">Mother</option>
<option value="">Father</option>
<option value="">Brother</option>
<option value="">Sister</option>
<option value="">Dependent</option>
<option value="">Child</option>
<option value="">Spouse</option>
</select>
</div>
</div>
<div class="row">
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<div class="row">
<div class="col-lg-4">
<input type="text" name="userfname" class="form-control" placeholder="Enter First Name"/>
</div>
<div class="col-lg-4">
<input type="text" name="usermname" class="form-control" placeholder="Enter Middle Name"/>
</div>
<div class="col-lg-4">
<input type="text" name="userlname" class="form-control" placeholder="Enter Last Name"/>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<input type="text" name="usermobilenumber" class="form-control" placeholder="Enter Mobile Number"/>
</div>
<div class="col-lg-4">
<input type="text" name="userdob" class="form-control" placeholder="Enter Date of birth"/>
</div>
<div class="col-lg-4">
<select id="gender">
<option value="volvo">Male</option>
<option value="saab">Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<input type="text" name="useremail" class="form-control" placeholder="Enter Email id"/>
</div>
<div class="col-lg-4">
<input type="text" name="userpassword" class="form-control" placeholder="password"/>
</div>
<div class="col-lg-4">
<select id="User Category" class="form-control">
<option value="">Head of Family</option>
<option value="">Mother</option>
<option value="">Father</option>
<option value="">Brother</option>
<option value="">Sister</option>
<option value="">Dependent</option>
<option value="">Child</option>
<option value="">Spouse</option>
</select>
</div>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
</div>
</section>
<script src="js/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
index.js
$(document).ready(function(){
//group add limit
var maxGroup = 15;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
Now what I want to do is get values of form in array-like
[{'name': 'inputname', 'email': 'inputEmail'}, {'name': 'inputname', 'email': 'inputEmail'},]
As you can see I have 2 arrays in JSON that I want my data so how many forms will add it will increase data.
https://api.jquery.com/serialize/
try serialization, the method walks through the specified fields and collects data
I have tried various solutions for the same and but I am unable to figure out the correct way. I am not able to know why the output is not coming in desired way.
I am not able to trigger the modal on page load for Bootstrap v3.4.
I have added both HTML and JavaScript code.
The Javascript code is added above the closing body tag.
The preloader comes first after the opening body tag and followed by the modal.
<body>
<div class="preloader">
<div class="loader">
<div class="wrapper">
<div class="circle circle-1"></div>
<div class="circle circle-1a"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" style="font-size:18px;">Franchise Enquiry Form</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body scrollable">
<div class="row">
<div class="col-md-6">
<div class="quote-pic">
<img src="assets/img/modal/Pop-Up-Form-1.jpg" alt="">
</div>
</div>
<div class="col-md-6">
<div class="quote-item">
<form action="process.php" method="POST">
<div class="form-group">
<select class="form-control" name="brochure_type" required>
<option value="">Select Franchise Model</option>
<option value="Pre_Schools">Pre-schools</option>
<option value="Model_Schools">Model Schools </option>
<option value="International_Schools">International Schools</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" name="name" required />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Email Address" name="email" required />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile Number" name="number" required />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Location" name="location" required />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Type Your Requirements" name="requirement" required />
</div>
<button type="submit" class="default-btn">
Submit Now
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
// Triggering modal on page load
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</body>
Did you include the Bootstrap's JavaScript file? I believe jQuery is required too, did you include that as well?
What method do you use to include the Bootstrap / jQuery Javascript files? CDN or npm?
I got it to work using the 3.4.1 Bootstrap CSS and JavaScript CDN, as well as the jQuery 3.6.0 CDN.
I have two different forms with id newForm and oldForm . But when i click on submit button then html5 validation is only shown on input fields of 'newForm'.The html5 validation is not appearing in oldForm ,as i have kept the required field in input fileds of oldForm. How can i validate these two different forms when i click Submit button ? I need the html5 valdiation in both forms but the validation is appearing in seconnd form but not in first form.
$(document).ready(function() {
$("#saveBtn").on("click", function() {
console.log("form submitted");
/*$.ajax({
// ajax code to submit
}); */
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-bottom: 20px;">
<h2>Pre Assessment</h2>
<div class="card">
<div class="card-body">
<div class="col-md-12" style="float: none;">
<form id="oldForm">
<div class="row">
<div class="form-group col-md-6 assess">
<div class="col-md-12">
<font face="preeti" size="5">s/ lgwf{/0f ug{ kg]{ sf/0f
</font>
<select class="form-control" name="causeOfExciseAct" id="causeOfExciseAct">
<option value="" selected disabled hidden>Choose here</option>
<option value="appeal">Appeal</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group col-md-6">
<div class="row">
<div class="col-md-12 pnbp" style="margin-bottom: 10px;">
<font face="preeti" size="5">
k'g/fj]bgsf] lg0f{o cg';f/ ePsf] eP k'g/fj]bg g+ </font>
<input type="text" class="form-control" id="appealId" name="appealId" required />
</div>
</div>
<div class="row">
<div class="col-md-12 orIf" style="margin-bottom: 10px;">
<font face="preeti" size="5">cGo</font>
<input type="text" class="form-control" id="reasonDesc" name="reasonDesc" required />
</div>
</div>
</div>
</div>
<!-- for other two field -->
<div class="row">
<div class="form-group col-md-3">
<div class="col-md-12" style="margin-bottom: 10px;">
(B.S.)
<input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('intCalUptoAd').id)" id="intCalUpto" name="intCalUpto" required>
</div>
</div>
<div class="form-group col-md-3">
<div class="col-md-12" style="margin-bottom: 10px;">
<font face="preeti" size="5">
</font>(A.D.)
<input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('intCalUpto').id)" id="intCalUptoAd" name="intCalUptoAd" required>
</div>
</div>
<div class="form-group col-md-3">
<div style="margin-bottom: 40px;">
(B.S)
<input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('assessmentDateAd').id)" id="assessmentDate" name="assessmentDate">
</div>
</div>
<div class="form-group col-md-3">
<div style="margin-bottom: 40px;">
(A.D)
<input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('assessmentDate').id)" id="assessmentDateAd" name="assessmentDateAd">
</div>
</div>
</div>
</form>
<form id="newForm">
<div id="formContainer" class="col-md-12" style="float: none;">
<div style="margin-bottom: 30px;">
<div class="form-group row">
<div class="col-md-1"></div>
<div class="col-md-4">
<label>Reason</label>
</div>
<div class="col-md-2">
<label>Amount</label>
</div>
<div class="col-md-2">
<label>Penalty</label>
</div>
<div class="col-md-1">Total</div>
<div class="col-md-2">Action</div>
</div>
<div class="customs-table row">
<div class="col-md-1">
<label>Customs</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control customReason" required />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" required />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" required />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="vat-table row">
<div class="col-md-1">
<label>VAT</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control vatReason" name="vatReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="excise-table row">
<div class="col-md-1">
<label>Excise</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control exciseReason" name="exciseReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div id="a"></div>
<div class="col-md-12 pull-right">
<label>Total:</label> <b><span id="tot">0</span></b>
</div>
</div>
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Since you're using HTML5 validation, use HTML5 DOM methods:
$(document).ready(function() {
// Add the e (event) argument to your event handler...
$("#saveBtn").on("click", function(e) {
// and call preventDefault() on it to prevent submission of the form.
e.preventDefault();
let allValid = true;
$("form").each(function (index, form) {
allValid = allValid && form.reportValidity();
});
if (allValid) {
/*$.ajax({
// ajax code to submit
}); */
}
});
});
form { border: 1px solid blue; }
input:invalid { border: 1px solid red; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-bottom: 20px;">
<h2>Pre Assessment</h2>
<div class="card">
<div class="card-body">
<div class="col-md-12" style="float: none;">
<form id="oldForm">
<div class="row">
<div class="form-group col-md-6 assess">
<div class="col-md-12">
<font face="preeti" size="5">s/ lgwf{/0f ug{ kg]{ sf/0f
</font>
<select class="form-control" name="causeOfExciseAct" id="causeOfExciseAct">
<option value="" selected disabled hidden>Choose here</option>
<option value="appeal">Appeal</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group col-md-6">
<div class="row">
<div class="col-md-12 pnbp" style="margin-bottom: 10px;">
<font face="preeti" size="5">
k'g/fj]bgsf] lg0f{o cg';f/ ePsf] eP k'g/fj]bg g+ </font>
<input type="text" class="form-control" id="appealId" name="appealId" required />
</div>
</div>
<div class="row">
<div class="col-md-12 orIf" style="margin-bottom: 10px;">
<font face="preeti" size="5">cGo</font>
<input type="text" class="form-control" id="reasonDesc" name="reasonDesc" required />
</div>
</div>
</div>
</div>
<!-- for other two field -->
<div class="row">
<div class="form-group col-md-3">
<div class="col-md-12" style="margin-bottom: 10px;">
(B.S.)
<input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('intCalUptoAd').id)" id="intCalUpto" name="intCalUpto" required>
</div>
</div>
<div class="form-group col-md-3">
<div class="col-md-12" style="margin-bottom: 10px;">
<font face="preeti" size="5">
</font>(A.D.)
<input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('intCalUpto').id)" id="intCalUptoAd" name="intCalUptoAd" required>
</div>
</div>
<div class="form-group col-md-3">
<div style="margin-bottom: 40px;">
(B.S)
<input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('assessmentDateAd').id)" id="assessmentDate" name="assessmentDate">
</div>
</div>
<div class="form-group col-md-3">
<div style="margin-bottom: 40px;">
(A.D)
<input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('assessmentDate').id)" id="assessmentDateAd" name="assessmentDateAd">
</div>
</div>
</div>
</form>
<form id="newForm">
<div id="formContainer" class="col-md-12" style="float: none;">
<div style="margin-bottom: 30px;">
<div class="form-group row">
<div class="col-md-1"></div>
<div class="col-md-4">
<label>Reason</label>
</div>
<div class="col-md-2">
<label>Amount</label>
</div>
<div class="col-md-2">
<label>Penalty</label>
</div>
<div class="col-md-1">Total</div>
<div class="col-md-2">Action</div>
</div>
<div class="customs-table row">
<div class="col-md-1">
<label>Customs</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control customReason" required />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" required />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" required />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="vat-table row">
<div class="col-md-1">
<label>VAT</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control vatReason" name="vatReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="excise-table row">
<div class="col-md-1">
<label>Excise</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control exciseReason" name="exciseReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div id="a"></div>
<div class="col-md-12 pull-right">
<label>Total:</label> <b><span id="tot">0</span></b>
</div>
</div>
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Things to note:
This will show the validation message on the last invalid field on the last form in document order.
I added CSS to highlight the form boundaries and invalid fields to make it more obvious.
The font element has been deprecated for a long time. Use a span and CSS.
Don't use HTML5 validation, instead create your own validation methods using Ajax to prevent client side user manipulation.
Using JavaScript to validate the forms before POST as follows:
<!--Html Form-->
<form name="contact-form" action="" method="post" onsubmit="return checkFields()">
<label for="nameinput">Name</label>
<input type="text" name="name">
<label for="emailinput">Email address</label>
<input type="email" name="email">
<label for="textarea-input">Message</label>
<textarea rows="5" name="message"></textarea>
<button type="submit" name="contactSubmitBtn">Submit</button>
</form>
function checkFields() {
var x = document.forms["example-form"]["name"].value;
var y = document.forms["example-form"]["email"].value;
var z = document.forms["example-form"]["message"].value;
if (x == "") {
Response Here
return false;
}
if (y == "") {
Response Here
return false;
}
if (z == "") {
Response Here!
return false;
}
}
what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap.
Here is my html part:-
<div class="container">
<div class="jumbotron checkInGuest">
<h3 class="h3Heading">Request for following information from guest</h3>
<form class="form-horizontal" id="checkInForm">
<div class="form-group">
<label for="reservationId" class="col-md-4">Reservation Id</label>
<div class="col-md-8">
<input type="text" class="form-control" id="reservationId" name="reservationId" required>
</div>
</div>
<div class="form-group">
<label for="dlNum" class="col-md-4">Driver License #</label>
<div class="col-md-8">
<input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
</div>
</div>
</form>
<!-- Form when info is found. Initially all fields are disabled-->
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Information Found</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="resId" class="col-md-3">Reservation Id</label>
<div class="col-md-3">
<input type="text" class="form-control" id="resId" name="resId" disabled>
</div>
<label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
<div class="col-md-3">
<input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
</div>
</div>
<div class="form-group">
<label for="guestFullName" class="col-md-3">Guest Full Name</label>
<div class="col-md-3">
<input type="text" class="form-control" id="guestFullName" name="guestFullName" disabled>
</div>
<label for="email" class="col-md-3">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" id="email" name="email" disabled>
</div>
</div>
<div class="form-group">
<label for="numRooms" class="col-md-3">Rooms Booked</label>
<div class="col-md-3">
<input type="number" class="form-control readable" id="numRooms" name="numRooms" disabled>
</div>
<label for="roomType" class="col-md-1">Room Type</label>
<div class=" col-md-2">
<label for="smoking">
<input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
</label>
</div>
<div class=" col-md-3">
<label for="nonSmoking">
<input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
</label>
</div>
</div>
<div class="form-group">
<label for="discount" class="col-md-3">Discount</label>
<div class="col-md-3">
<select class="form-control readable" id="discount" disabled>
<option selected>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
</select>
</div>
<label for="checkInDate" class="col-md-3">CheckIn Date</label>
<div class="col-md-3">
<input type="date" class="form-control readable" id="checkInDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<label for="checkOutDate" class="col-md-3">CheckOut Date</label>
<div class="col-md-9">
<input type="date" class="form-control readable" id="checkOutDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
</div>
</div>
</form>
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Final Room Order</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
<div class="col-md-8 " id="perInEachRoom">
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="checkInButton">Check In</button>
</div>
</div>
</div>
</form>
</div>
</div>
And this is jquery part:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
</script>
You need to put your code in a document.ready() function, so:
$(document).ready(function() {
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
});
You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?
Long story short, you should use
<button type="button"...
not
<button type="submit"...
Actually, all I did is:-
$("#checkInForm").submit(function(e)
{
e.preventDefault();
});
And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.