Please check below js fiddle:
https://jsfiddle.net/Lfz567tw/
I have created a form in which when I enter, it selects next input and at last, submits the form.
But this function disables my validation function and on submitting the form, function validate() is not working.
Is there any way I can fire function validate() also when submitting the form?
There is simple example to show you how you can check or call your validate function before form submittion
e.preventDefault : Used for prevent default functionallity
$(function() {
$("#entertonext").submit(function(e) {
e.preventDefault();
// validate code (calling function)
validate();
});
});
function validate() {
alert('Validating');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="card-block" id="entertonext">
<form name="bank" action="#" method="post">
<div class="form-group row" >
<label for="default-input" class="col-sm-2 form-control-label">Account No.</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="acc_no" id="acc_no" placeholder="Account No." tabindex="1" onblur="validate(this,event)">
<span id="msg8"></span>
</div>
</div>
<div class="form-group row">
<label for="default-input-rounded" class="col-sm-2 form-control-label">Branch Name</label>
<div class="col-sm-10">
<div class="input-group icon icon-lg icon-color-primary">
<input type="text" class="form-control entertonext" name="b_name" id="b_name" placeholder="Branch Name" tabindex="2">
</div>
<span id="msg2"></span>
</div>
</div>
<div class="form-group row" id="drawn" >
<label for="default-input" class="col-sm-2 form-control-label">IFSC Code</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="ifsc_code" id="ifsc_code" placeholder="IFSC Code" tabindex="3">
<span id="msg5"></span>
</div>
</div>
<div class="form-group row" id="deposited">
<label for="default-input" class="col-sm-2 form-control-label">Address</label>
<div class="col-sm-10">
<textarea class="form-control entertonext" name="address" id="address" placeholder="Address" tabindex="4"></textarea>
<span id="msg6"></span>
</div>
</div>
<div class="form-group row" id="deposited">
<label for="default-input" class="col-sm-2 form-control-label">Bank Balance</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="balance" id="balance" placeholder="Bank Balance" tabindex="5">
<span id="msg6"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary entertonext" tabindex="6">Submit</button>
</div>
</div>
</form>
</div>
Related
Using the following form with required tags does not actaully validate my input, and always alerts "ok", what am I missing?
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputFirstName">Förnamn</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputLastName">Efternamn</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputPhone">Telefon</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Telefon"/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputMobile">Mobiltelefon</label>
<input type="text" class="form-control" id="inputMobile" placeholder="Mobiltelefon"/>
</div>
<div class="form-group col-sm-8">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="inputCompany">Företag</label>
<input type="text" class="form-control" id="inputCompany" placeholder="Företag" required/>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-3 pull-right" data-bind="click: submit">Submit</button>
</form>
Javascript, where i want to alert "ok" if validation passes:
vm.submit = function(){
alert("ok");
};
I want to send a form via Ajax, not via a submit button.
I defined the form as follows in the below code excerpt, and later I defined the jQuery function to trap the CREATE BUTTON action.
When I debug this I get that
console.log($('#customer_form').serialize()); does not throw anything.
Is this the right way of serializing a form?
Do the buttons need to be inside the <form></form> element?
Here is the used code:
HTML:
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>
JavaScript:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
You just forgot to add the name attribute to your inputs:
<input name="nameofInput" .... />
-------^
See the below snippet:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="name" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress1" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress2" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="town" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>
I want to make a confirmation box if the form validated. This is my code:
I use webshim/pollyfill for validation
<script src="js-webshim/polyfiller.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script>
$.webshims.polyfill('forms');
</script>
-
<form method="post" action="process.php">
<label class="control-label col-sm-3" for="inputSuccess3">Paket:</label>
<div class="col-sm-9">
<select class="form-control" id="Paket" name="paket">
</select>
</div>
<label class="control-label col-sm-3" for="inputSuccess3">Miktar:</label>
<div class="col-sm-9">
<input class="form-control" type="number" id="adet" name="adet" min="20" max="250" value="20" required>
</div>
<label class="control-label col-sm-3" for="inputSuccess3">Link:</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="link" required>
</div>
<div class="col-sm-offset-4 col-sm-8">
Ücret: <span id="output">40</span> Kredi
</div>
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary" onclick="alert('Hello\nHow are you?')">Gönder</button>
<script>
function myFunction() {
confirm("Press a button!");
}
</script>
</div>
</form>
In this version, it open box, even if the form is empty. Could you help me?
<script>
function myFunction(){
var message = document.getElementById('input').value
if(message){
alert("me")
}
}
</script>
<form id="form">
<label class="control-label col-sm-3" for="inputSuccess3">Paket:</label>
<div class="col-sm-9">
<select class="form-control" id="Paket" name="paket">
</select>
</div>
<label class="control-label col-sm-3" for="inputSuccess3">Miktar:</label>
<div class="col-sm-9">
<input class="form-control" type="number" id="adet" name="adet" min="20" max="250" value="20" required>
</div>
<label class="control-label col-sm-3" for="inputSuccess3">Link:</label>
<div class="col-sm-9">
<input id="input" class="form-control" type="text" name="link" required>
</div>
<div class="col-sm-offset-4 col-sm-8">
Ücret: <span id="output">40</span> Kredi
</div>
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary" onclick="myFunction()">Gönder</button>
</div>
</form>
I have a modal where i put my form inside. Now, my problem is, when i click the button of my onclick="regpatient()" button, the required will pop-up but when i look at it in console, the data was submited by a post because of my onlick function. How can i do this?
Here is my modal:
<div class="modal-body">
<form class="form-horizontal" id="frm_patientreg">
<div class="form-group">
<label class="control-label col-sm-3" for="pfname">First Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pafname" name="pafname" placeholder="First name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pmname">Middle Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pamname" name="pamname" placeholder="Middle name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="plname">Last Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="palname" name="palname" placeholder="Last name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="paddress">Address:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="paaddress" name="paaddress" placeholder="Address" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pcontact">Contact #:</label>
<div class="col-sm-7">
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" id="pacontact" name="pacontact" placeholder="Contact number" maxlength="11" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pbdate">Birthdate:</label>
<div class="col-sm-5">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="pabdate" name="pabdate" placeholder="Birthdate" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="page">Age:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paage" name="paage" placeholder="Age" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pheight">Height:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paheight" name="paheight" placeholder="Height (cm)" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pweight">Weight:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paweight" name="paweight" placeholder="Weight (kg)" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="psex">Sex:</label>
<div class="col-sm-5">
<select class="form-control" id="psex" name="psex">
<option value="0">--- SELECT OPTION ---</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pmartiastat">Civil Status:</label>
<div class="col-sm-5">
<select class="form-control" id="pmartialstat" name="pmartialstat">
<option value="0">--- SELECT OPTION ---</option>
<option value="Single">Single</option>
<option value="Living common law">Living common law</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Separated">Separated</option>
<option value="Divorced">Divorced</option>
</select>
</div>
</div>
</div><!-- modal-body -->
<div class="modal-footer">
<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div><!-- modal-footer -->
</div><!-- modal-content -->
and here is my ajax where it fires when the button in footer of my modal is clicked:
function regpatient() {
var a = $('#psex').val();
var b = $('#pmartialstat').val();
if(a == "0" || b == "0") {
alert("Please select option");
}
else {
$.ajax({
url: siteurl+"sec_myclinic/addpatient",
type: "POST",
data: $('#frm_patientreg').serialize(),
dataType: "JSON",
success: function(data) {
alert("Successfully Added");
$('#frm_patientreg')[0].reset();
}
});
}
}
If I understand your problem right you want to stop the button's default submit action and only use your onclick script. Try this:
onclick="regpatient(event)"
and
function regpatient(event) {
event.preventDefault();
...
Edit
The required fields are not getting validated by the onclick function. Some checks like this for the required values should help stop the ajax call.
if (!$('#pafname').val()) {
return alert('Please fill in all required fields.');
}
// ajax code here ...
Use this
<button value="button" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
instead of this
<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
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.