Here is my javascript code. The commented line works:
$("#regForm").submit(function(event) {
// event.preventDefault()
password = $("#inputPassword3")
login = $("#inputEmail3")
user_instance = 0
$.ajax({
url: "{{ url_for('get_users') }}",
method: 'POST'
}).done(function(data) {
data.forEach(function(item) {
if (item.username == login.val() || item.mail == login.val()) {
user_instance = item
}
})
pass_arr = sjcl.hash.sha256.hash(password.val())
hash = sjcl.codec.hex.fromBits(pass_arr)
console.log(hash, user_instance.passwd)
if (hash != user_instance.passwd) {
event.preventDefault()
console.log("+")
password.attr("style", "border:#f00 solid 1px")
password.attr("placeholder", "Wrong password")
}
event.preventDefault() is not working here:
<div id="regForm">
<form class="form-horizontal" method="POST" action="{{ url_for('login') }}">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email/Login</label>
<div class="col-sm-10">
<input type="imput" class="form-control" id="inputEmail3" placeholder="Email/Login" name="email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" name="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="remember_me"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" name="sign-in">Sign in</button>
</div>
</div>
</form>
It submits form anyway, even though color of form changing, why is that? When uncommented preventDefault() is working as should be
Try this
$('body').on('submit', 'YOUR-ID' ,function(event) {}
Related
I'm a novice at Laravel. How can I add new text input fields with the button and add data in each field separately? Add or plus button or whatever.
Below my code, which allows you to enter the sledge, but only in one field, in addition you have to separate the words with a comma.
<div class="card-body">
<form method="post" action="{{route('randomizeTeam.store')}}">
{{ csrf_field() }}
<div class="form-group">
<label for="players">Add player names</label>
<input type="text" class="form-control" name="players">
</div>
<div class="form-group">
<label for="teams">Add team names</label>
<input type="text" class="form-control" name="teams">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Send</button>
</div>
</form>
</div>
This is how you can do it in a simple way
$(function(){
var more_fields = `
<div class="form-group">
<label for="players">Add player name</label>
<input type="text" class="form-control" name="players[]">
</div>
<div class="form-group">
<label for="teams">Add team name</label>
<input type="text" class="form-control" name="teams[]">
</div>
`;
$('#add-more-field').on('click', (function (e) {
e.preventDefault();
$(".input-fields").append(more_fields);
}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
<form method="post" action="">
{{ csrf_field() }}
<div class="input-fields">
<div class="form-group">
<label for="players">Add player name</label>
<input type="text" class="form-control" name="players[]">
</div>
<div class="form-group">
<label for="teams">Add team name</label>
<input type="text" class="form-control" name="teams[]">
</div>
</div>
<div class="form-group">
<button id="add-more-field" class="btn btn-secondary btn-sm">add more</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Send</button>
</div>
</form>
</div>
And in your controller, you will do something like this
foreach($request->get('players') as $i => $player) {
YourModel::create([
'player' => $player,
'team' => $request->get('teams')[$i]
]);
}
I was trying to make a registration form using HTML, Bootstrap and JavaScript.
I am able to get the error message when a field is left empty, but the error message vanishes just after showing up. I don't know what am I doing wrong
function checkValidation() {
var firstName = document.getElementById('firstName').value;
if (firstName == "") {
console.log("enter");
document.getElementById('firstNameErrorMessage').innerHTML = "please enter";
} else {
console.log("done");
}
}
<div class="container-fluid">
<div class="container">
<h2>Registration Form</h2>
<form class="form-horizontal" name="myForm">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">
First Name
</label>
<div class="col-sm-10">
<input type="text" name="firstName" class="form-control" id="firstName" placeholder="Enter your First Name" name="firstName">
<div class="col-sm-12">
<p id="firstNameErrorMessage"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="checkValidation()">Submit</button>
</div>
</div>
</form>
</div>
</div>
You will need to use preventDefault in order to make it work as intended:
<div class="container-fluid">
<div class="container">
<h2>Registration Form</h2>
<form class="form-horizontal" name="myForm">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">
First Name
</label>
<div class="col-sm-10">
<input type="text" name="firstName" class="form-control" id="firstName" placeholder="Enter your First Name" name="firstName">
<div class="col-sm-12">
<p id="firstNameErrorMessage"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="checkValidation(event)">Submit</button>
</div>
</div>
</form>
and
function checkValidation(e) {
e.preventDefault();
var firstName = document.getElementById('firstName').value;
if (firstName == "") {
console.log("enter");
document.getElementById('firstNameErrorMessage').innerHTML = "please enter";
} else {
console.log("done");
}
}
Have a look here for some preventDefault questions:
How and when to use preventDefault()?
What's the difference between event.stopPropagation and event.preventDefault?
I have a bootstrap form the info from which I am saving to a json file using an ajax call.
My problem is that when I press the Submit button the page seems to refresh after the call(executed after the submit button is clicked), which is something i'd definitely like to avoid.
I tried to investigate the problem, but my knowledge is insufficient for that as I don't have an indepth understanding of any of these concepts.
Here is my BS form :
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Full Name:</label>
<div class="col-sm-2">
<input type="name" class="form-control" id="nameFull">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone:</label>
<div class="col-sm-2">
<input type="phone" class="form-control" id="phoneApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="emailApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-2">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Hour:</label>
<div class="col-sm-2">
<select class="form-control" id="time">
<option value="Time" class="">Time</option>
<option value="10am" class="">10:00-10:30</option>
<option value="1030am" class="">10:30-11:00</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="reason">Reason:</label>
<div class="col-lg-3">
<textarea class="form-control" id="reason" name="comments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="saveAppt" class="btn btn-default">Submit</button>
</div>
</div>
</form>
And here is the ajax call :
$(document).ready(function() {
$("#saveAppt").click(function(){
var fullName = $("#nameFull").val();
var userName = $("#cpr").val();
var phone = $("#phoneApp").val();
var email = $("#emailApp").val();
var date = $("#date").val();
var time = $("#time").val();
var reason = $("#reason").val();
console.log(time);
console.log(date);
console.log(reason);
var jAppointment= {};
jAppointment.fullName = fullName;
jAppointment.userName = userName;
jAppointment.phone = phone;
jAppointment.email = email;
jAppointment.date = date;
jAppointment.time = time;
jAppointment.reason = reason;
console.log(JSON.stringify(jAppointment));
$.ajax
({
type: "GET",
dataType : 'json',
async: false,
url: 'save-appointments.php',
data: { data: JSON.stringify(jAppointment) },
success: function () {console.log("Thanks!"); },
failure: function() {console.log("Error!");}
});
});
});
Now what the submit action refresh your page the click event will never be raised since the <button> tag has type='submit' by defaul just add type='button' type to avoid submit/refresh :
<button type="button" id="saveAppt" class="btn btn-default">Submit</button>
Hope this helps.
$(document).ready(function() {
$("#saveAppt").click(function(){
var fullName = $("#nameFull").val();
var userName = $("#cpr").val();
var phone = $("#phoneApp").val();
var email = $("#emailApp").val();
var date = $("#date").val();
var time = $("#time").val();
var reason = $("#reason").val();
console.log(time);
console.log(date);
console.log(reason);
var jAppointment= {};
jAppointment.fullName = fullName;
jAppointment.userName = userName;
jAppointment.phone = phone;
jAppointment.email = email;
jAppointment.date = date;
jAppointment.time = time;
jAppointment.reason = reason;
console.log(JSON.stringify(jAppointment));
$.ajax
({
type: "GET",
dataType : 'json',
async: false,
url: 'save-appointments.php',
data: { data: JSON.stringify(jAppointment) },
success: function () {console.log("Thanks!"); },
failure: function() {console.log("Error!");}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Full Name:</label>
<div class="col-sm-2">
<input type="name" class="form-control" id="nameFull">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone:</label>
<div class="col-sm-2">
<input type="phone" class="form-control" id="phoneApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="emailApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-2">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Hour:</label>
<div class="col-sm-2">
<select class="form-control" id="time">
<option value="Time" class="">Time</option>
<option value="10am" class="">10:00-10:30</option>
<option value="1030am" class="">10:30-11:00</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="reason">Reason:</label>
<div class="col-lg-3">
<textarea class="form-control" id="reason" name="comments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type='button' id="saveAppt" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<br><br><br><br><br><br>
Crate a reference to your event in your click handler.
$("#saveAppt").click(function(e){
then call the preventDefault function on that event after your AJAX call.
$.ajax
({
type: "GET",
dataType : 'json',
async: false,
url: 'save-appointments.php',
data: { data: JSON.stringify(jAppointment) },
success: function () {console.log("Thanks!"); },
failure: function() {console.log("Error!");}
});
e.preventDefault();
I have the following form : two text inputs then an ng-repeat with a text and radio inside.
<form class="form-horizontal" id="myForm" name="myForm">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-10">
<input type="text" name="cname" ng-model="company.name" class="form-control" required></input>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">HQ</label>
<div class="col-sm-10">
<select ng-model="company.hq" ng-options="hq as hq.name for hq in hqs" required>
<option></option>
</select>
</div>
</div>
<div class="form-group" ng-repeat="item in getR(4) track by $index">
<label for="name" class="col-sm-2 control-label">Top pick {{$index+1}}</label>
<div class="col-sm-10">
<input type="text" name="quizsize" ng-model="company.product[$index]" class="form-control" required></input>
<label><input type="radio" name="test" ng-model="company.radioValue" value="{{$index+1}}"/> Choose</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" value="submit" class="btn btn-primary" ng-click="addCompany(company)"></button>
<button type="btn" value="cancel" class="btn btn-danger" ng-click="cancelBtn()">Cancel</button>
</div>
</div>
</form>
addCompany method from the controller :
$scope.addCompany = function(company)
{
console.log(company.radioValue);
$http.post('http://localhost/api/index.php/Test/companies', company)
.success(function(data)
{
$scope.companies.push(data[0]);
})
.error(function(err)
{
})
};
And the method to for the inputs ng-repeat:
$scope.getR = function(n)
{
return Array(n);
}
When I submit it:
If I start by adding company name/hq then all is good, but
If I start by first clicking on a radio button then when I send the form I get an undefined radioValue error.
use ng-value instead of value to be sure the model is ready to be bound to
<input type="radio" ng-value="($index + 1)" ng-model="company.radioValue">
https://docs.angularjs.org/api/ng/directive/ngValue
For some reason, the form is not getting submitted. I have used ajax form to save the form details in my database.
Here is the site link:
http://www.famproperties.com/mudon/Abu-Dhabi/villas.html
Here is the script code.
<script>
$(document).ready(function() {
$("#submit-form-button").click(function() { submitForm(); });
});
function submitForm() {
if ( $("#NAME").val() == '' ||
$("#EMAIL").val() == '' ||
$("#MOBILE").val() == '' ||
$("#NOTE").val() == '' )
{ alert ("All field are required");}
else {
$.ajax({
type: "POST",
url: "http://famproperties.com/real_estate/property/contact/lead/",
data: {
NAME: $("#NAME").val(),
EMAIL: $("#EMAIL").val(),
MOBILE: $("#MOBILE").val(),
NOTE: $("#NOTE").val(),
SOURCE: 'MSB.COM'
},
success: function() {
alert("Thanks, Our specialist will contact you soon.");
},
dataType: 'html'
});
$("#NAME").val('');
$("#EMAIL").val('');
$("#MOBILE").val('');
$("#NOTE").val('');
}};
</script>
Here is the form code.
<!--NEW FORM -->
<div class="form-horizontal" role="form" accept-charset="UTF-8" action="http://famproperties.com/real_estate/property/contact/lead/" autocomplete="on" id="pro-form" method="post">
<div class="form-group">
<label for="NAME" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="NAME" required="" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="EMAIL" class="col-sm-2 control-label ">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="EMAIL" required="" placeholder="me#example.com">
</div>
</div>
<div class="form-group">
<label for="MOBILE" class="col-sm-2 control-label">Mobile</label>
<div class="col-sm-10">
<input type="phone" class="form-control inputs" id="MOBILE" required="" placeholder="Mobile">
</div>
</div>
<div class="form-group">
<label for="NOTE" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="NOTE" required="" placeholder="Note">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<a href="#" onclick="return false" class="btn btn-default btn-lg button" id="submit-form-button" style="background-color: #ffc600;
color: #2a292a;
width: 100%;"> Submit <span class="fa fa-chevron-right fa-1x"></span><span class="fa fa-chevron-right fa-1x"></span> </a>
</div>
</div>
</div>
<!--NEW FORM-->
Seeing the page on http://www.famproperties.com/mudon/Abu-Dhabi/villas.html you are not even loading jquery check the console and youll see this error:
Uncaught ReferenceError: $ is not defined
Thats why ajax is not working
Edit: Sorry, checking your code again i saw you are loading jQuery but you are trying to use jQuery before loading it. So, try moving the jquery script tag to the header or move your js below the jQuery script tag.