Actually working on a little one pager and need to verify that the form is properly filled before inserting the data in the database. The function works fine it does prevent the user from submitting when fields are empty, the only problem is that the error text that show up isn't the one I wrote in my code. Probably the default alert text showing and not mine for some reason. For your information I am currently using a bootstrap template with some php and javascript it is pretty basic. If anyone could point me in the good direction would be much appreciated.
Here is the script in the head of the html page:
<script type="text/javascript">
function checkForm(form)
{
...
if(!form.terms.checked) {
alert("Veuillez indiquer que vous acceptez de recevoir des offres promotionnelles");
form.terms.focus();
return false;
}
if(form.email.value == 0) {
alert("Veuillez remplir le courriel");
form.email.focus();
return false;
}
if(form.fname.value == 0) {
alert("Veuillez remplir votre prénom");
form.fname.focus();
return false;
}
if(form.lname.value == 0) {
alert("Veuillez remplir votre nom");
form.lname.focus();
return false;
}
return true;
}
</script>
Here is the Html :
<?php include 'send_post.php';?>
<form method="post" action="send_post.php" onsubmit="return checkForm(this)">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-pencil text-primary sr-icons"></i>
<h3>Prénom</h3>
<input type="text" class="form-control" id="fname" name="fname" required="">
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-pencil text-primary sr-icons"></i>
<h3>Nom</h3>
<input type="text" class="form-control" id="lname" name="lname" required="">
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-envelope text-primary sr-icons"></i>
<h3>Courriel</h3>
<input type="email" class="form-control" id="email" name="email" required="">
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-globe text-primary sr-icons"></i>
<h3>Montagne</h3>
<select class="form-control" id="mont" name="mont" required="">
<option>Valinouet</option>
<option>Mont Bélu</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-10 style="margin-right:100px;padding-bottom:10px;>
<br>
<div class="checkbox">
<input type="checkbox" name="terms" value="check" id="terms" required=""/> J'accepte de recevoir des offres promotionnelles par e-mail, en cochant la case prévue à cet effet
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<button class="btn btn-primary btn-lg" type="submit" value="Submit" name="submit">Soumettre</button>
</div>
</div>
</form>
Thanks a lot for your time.
This is happening because you have used 'required' attribute in the html code which by default is triggered before the onsubmit() call
Related
I need to hide a div for aditional coments if the input file is empty.
I don't mind if it's done with Jquery or plain Javascript.
I've used JQuery, I know that it's been called correctly because my alert pops up, but my function does not hide the div with ID: #instrucciones-adicionales and all its contents.
HTML:
<script>
alert( "Animation complete." );
$(function () {
$("input:file").change(function () {
var fileName = $(this).val();
if (filename != "") {
$("#instrucciones-adicionales").hide();
} //show the button
});
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">
<div class="form-group">
<div id="div_id_imagenes" class="form-group">
<label for="id_imagenes" class="col-form-label requiredField">
Imagenes<span class="asteriskField">*</span>
</label>
<div class="">
<input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">
</div>
</div>
<div id="instrucciones-adicionales">
<p class="bold-font"> Instrucciones adicionales (opcional):</p>
<div id="div_id_instrucciones" class="form-group">
<label for="id_instrucciones" class="col-form-label requiredField">
Instrucciones<span class="asteriskField">*</span>
</label>
<div class="">
<textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
</textarea>
</div>
</div>
</div>
</div>
</br>
</br>
<p>O, sáltate este paso y envía tu arte por correo electrónico</p>
<button type="submit" class="btn btn-naranja text-white btn-block">Continuar
</button>
You had a typo (variables are case sensitive - fileName !== filename).
I added the show part:
alert( "Animation complete." );
$(function () {
$("input:file").change(function () {
var fileName = $(this).val();
if (fileName != "") {
$("#instrucciones-adicionales").hide();
} else {
$("#instrucciones-adicionales").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main role="main">
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">
<div class="form-group">
<div id="div_id_imagenes" class="form-group">
<label for="id_imagenes" class="col-form-label requiredField">
Imagenes<span class="asteriskField">*</span>
</label>
<div class="">
<input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">
</div>
</div>
<div id="instrucciones-adicionales" style="display: none">
<p class="bold-font"> Instrucciones adicionales (opcional):</p>
<div id="div_id_instrucciones" class="form-group">
<label for="id_instrucciones" class="col-form-label requiredField">
Instrucciones<span class="asteriskField">*</span>
</label>
<div class="">
<textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
</textarea>
</div>
</div>
</div>
</div>
</br>
</br>
<p>O, sáltate este paso y envía tu arte por correo electrónico</p>
<button type="submit" class="btn btn-naranja text-white btn-block">Continuar
</button>
</form>
</main>
I trying to use the jQuery validate in modal but this doesn't work or don't call the action to validate the inputs.
this is my from into the modal, this are into a template name="modalregistro"
<form id="formregister" class="p-t-15 formregister" role="form" method="get">
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-default">
<label>Correo electrónico</label>
<input type="text" name="uname" placeholder="usuario#correo.com" class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group form-group-default">
<label>Contraseña</label>
<input type="password" id="setPassword" name="user[password]" placeholder="Minimo de 8 Carácteres" class="form-control" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-group-default">
<label>Validar contraseña</label>
<input type="password" name="user[password_confirmation]" placeholder="Minimo de 8 Carácteres" class="form-control" required>
</div>
</div>
</div>
<div class="row m-t-10">
<div class="col-md-6">
<p>Estoy de acuerdo con <strong>TP Landings</strong>, terminos y condiciones de uso y su Privacidad.</p>
</div>
<div class="col-md-6 text-right">
¿Ayuda? Contactar el soporte
</div>
</div>
<hr class="b-dashed b-grey">
<div class="row">
<div class="col-sm-6 col-xs-12">
<button data-dismiss="modal" class="btn btn-default btn-lg btn-large btn-block text-uppercase">Cancelar</button>
</div>
<div class="col-sm-6 col-xs-12">
<button id="btnHecho" class="text-uppercase btn btn-primary btn-lg btn-large btn-block btn-cons show-notification" type="submit">Crear cuenta</button>
</div>
</div>
</form>
I call this template into my Layout of the website
<template name="website">
<section class="website">
{{> navbarWebsite}}
</section>
{{> modallogin}}
{{> modalregistro}}
</template>
and this is my rendered
Template.website.rendered = function(){
$(function(){
$('.formregister').validate()
});
jQuery('.formregister').validate({
rules: {
"user[password]": {
minlength: 2
},
"user[password_confirmation]": {
minlength: 2,
equalTo : "#setPassword"
}
}
});
}
the jQuery validate are on, and the website.rendered too but I don't know why validate it.
You are calling the .validate() method twice on the same form...
$(function(){
$('.formregister').validate()
});
jQuery('.formregister').validate({
rules: { ...
.validate() is the initialization method and once called on a particular form, it cannot be called again. All subsequent calls will be ignored. Since your rules are declared from the second instance, they are ignored.
EDIT:
Perhaps you don't realize that you're using a class selector when your form only has an id.
The form only contains an id:
<form id="formregister" ...
But your selector is targeting class="formregister":
$('.formregister')
To select id="formregister", you'll need to use an id selector:
$('#formregister')
I have the following code snippet:
(document)
.on("submit", ".edit-employee-form", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
method: $(this).attr("method"),
dataType: "html",
context: this,
data: $(this).serialize(),
success: function (response) {
p = $(this).parent();
p.prevAll('#first-name').html($(this).find("#first_name").val());
p.prevAll('#last-name').html($(this).find("#last_name").val());
p.prevAll('#email').html($(this).find("#email").val());
p.prevAll('#remain_case').html($(this).find("#remain_case").val());
$(this).parent().hide();
console.log('yay');
},
error: function (response, error) {
console.log("ERROR");
console.log(response);
console.log(error);
}
});
}
);
What it does is it submits a form to edit a particular employee (a list is displayed on the page) and then updates the html to reflect the changes the user submitted.
My problem is that some of the employees are also added via ajax calls, so their corresponding list elements are added dynamically to the html. I don't seem to be able to access their divs with id first-name, last-name, email etc. Any advice on how I can select divs which have been added dynamically?
I'm sorry for this being an image but I don't seem to be able to copy off the chrome console. The second element is added dynamically.
<div class="container firm-employees">
<div class="row">
<div class="col-lg-3 table-header">Name</div>
<div class="col-lg-2 table-header">Surname</div>
<div class="col-lg-3 table-header">E-Mail</div>
<div class="col-lg-1 table-header">Cases</div>
<div class="col-lg-3 table-header">Options</div>
</div>
<div class="row manage-user-row">
<div class="col-lg-3" id="first-name">Gray</div>
<div class="col-lg-2" id="last-name">Sawyer</div>
<div class="col-lg-3" id="email">masakotypu#hotmail.com</div>
<div class="col-lg-1" id="remain_case">1</div>
<div class="col-lg-3">
<button type="button" id="205" class="btn btn-default btn-xs edit-user-button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit User
</button>
<a href="edit/22">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
Edit Secretaries
</button>
</a>
</div>
<div id="ed-205" class="edit-employee-box">
<form id="ef-205" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/205">
<div class="row">
<div class="col-lg-3">
<label for="first_name" class="form_label">First Name</label>
<input type="text" name="first_name" value="Gray" id="first_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="last_name" class="form_label">Last Name</label>
<input type="text" name="last_name" value="Sawyer" id="last_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="email" class="form_label">E-Mail</label>
<input type="text" name="email" value="masakotypu#hotmail.com" id="email" class="form-control">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="phone" class="form_label">Phone Number</label>
<input type="text" name="phone" value="+899-67-1063253" id="phone" class="form-control">
</div>
<div class="col-lg-3">
<label for="remain_case" class="form_label">Remaining Cases</label>
<input type="text" name="remain_case" value="1" id="remain_case" class="form-control">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<br>
<input type="submit" class="btn btn-success btn-md" value="Update User">
<a href="edit/22">
<button type="button" class="btn btn-info btn-md">
Reset Password
</button>
</a>
</div>
<div class="col-gl-3">
</div>
</div>
</form>
</div>
</div>
<div class="row manage-case-row"><div class="col-lg-3" id="first-name">Evan</div><div class="col-lg-2" id="last-name">Thompson</div><div class="col-lg-3" id="email">pubazof#hotmail.com</div><div class="col-lg-1" id="remain_case">2</div><div class="col-lg-3"><button type="button" id="206" class="btn btn-default btn-xs edit-user-button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit User</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Edit Secretaries</button></div></div><div class="edit-employee-box" id="ed-206"><form id="ef-206" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/206"><div class="row"><div class="col-lg-3"><label for="first_name" class="form_label">First Name</label><input type="text" name="first_name" value="Evan" id="first_name" class="form-control"></div><div class="col-lg-3"><label for="last_name" class="form_label">Last Name</label><input type="text" name="last_name" value="Thompson" id="last_name" class="form-control"></div><div class="col-lg-3"><label for="email" class="form_label">E-Mail</label><input type="text" name="email" value="pubazof#hotmail.com" id="email" class="form-control"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><label for="phone" class="form_label">Phone Number</label><input type="text" name="phone" value="+927-10-4155477" id="phone" class="form-control"></div><div class="col-lg-3"><label for="remain_case" class="form_label">Remaining Cases</label><input type="text" name="remain_case" value="2" id="remain_case" class="form-control"></div><div class="col-lg-3"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><br><input type="submit" class="btn btn-success btn-md" value="Update User"><button type="button" class="btn btn-info btn-md">Reset Password</button></div><div class="col-gl-3"></div></div></form></div></div>
</div>
Your code should be sure the order of finished ajax calls because it's too fast to follow with human eyes. If when appending ajax call is not completed, you cannot select those elements using even element id.
To do so, you should put ajax function calls in "success handler".
if Number one is success then Number two in the one's success handler, and Number three in two's success handler, and so on...
The simple solution is to use PROMISE to get all of ajax relative functions in order.
Please refer to the link : https://api.jquery.com/promise/
To check the element is successfully appended in time, check out the console with 'console.info or console.log" or something like that. if it's length is 0, then the appending ajax call is not yet completed.
I have a Jquery function to activate and deactivate forms based off the current form. When I click on the submit button I can get the value of the activeform on the page load if I have it set to ID, but nothing off the second form. When I set it to class it doesn't seem to load any at all and I get no alert back when I click the submit. My jquery is as such:
<script>
$(document).ready(function() {
var activeform = "register";
$("#loginlink").click(function(e) {
var activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
})
$("#registerlink").click(function(e) {
var activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
})
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
</script>
And the code for my forms:
<p>
<form id="register">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for email><i class="fa fa-envelope"></i> Email</label>
<input class="form-control" type="text" id="email"></div>
<div class="col-xs-4"><i class="fa fa-info-circle" title="You may be notified of delayed or denied payments." data-toggle="tooltip"></i></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for submit><i class="fa fa-info" data-toggle="tooltip" title="By Registering you Agree to be Bound by our Terms of Service"></i></label>
<button type="button" class="btn btn-success form-control" class="submit">Register</button></div>
<div class="col-xs-4"></div>
</div>
</form>
<form id="login" style="display:none;">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<br />
<button type="button" class="btn btn-success form-control" class="submit">Login</button></div>
<div class="col-xs-4"></div>
</div>
</form>
</p>
Login | Register
Last but not least. Here's a fiddle. :)
https://jsfiddle.net/rm6j5da9/2/
You were recreating the activeform variable every time in the click event. remove the var keyword. you already declared that as a global variable inside the document ready scope.
$(function(){
var activeform = "register";
$("#loginlink").click(function(e) {
activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
});
$("#registerlink").click(function(e) {
activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
});
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
Also you need to make sure that you have the submit css class on both the login and register buttons
Here is a working sample
I've got a very simple script, by pressing on a button an other PHP script needs to be loaded(not redirected but loaded in a div in that page). Now everything is working just fine, but one little problem remains.
The page is refreshing out of itself, I don't know if it's because of the function load or because the button is in a form?
My HTML code:
<div class="widget">
<!-- Widget title -->
<div class="widget-head">
<div class="pull-left">Poll</div>
<div class="widget-icons pull-right">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-wrench"></i>
<i class="fa fa-times"></i>
</div>
<div class="clearfix"></div>
</div>
<div class="widget-content">
<!-- Widget content -->
<div class="padd">
<p>U kunt hier de <strong>polls beheren</strong> die onder andere worden weergeven op de homepagina van
<?php echo $site[ 'name']; ?>
</p>
<hr />
<form method="post" class="form-horizontal" role="form" action="poll">
<div class="form-group">
<label class="control-label col-sm-1" for="name">Poll naam:</label>
<div class="col-sm-11">
<input type="text" name="poll-name" id="poll-name" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="question">Poll vraag:</label>
<div class="col-sm-11">
<input type="text" name="poll-question" id="poll-question" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="option1">Optie 1:</label>
<div class="col-sm-11">
<input type="text" name="poll-option1" id="poll-option1" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="option2">Optie 2:</label>
<div class="col-sm-11">
<input type="text" name="poll-option2" id="poll-option2" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="option1">Optie 3:</label>
<div class="col-sm-11">
<input type="text" name="poll-option3" id="poll-option3" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="option1">Optie 4:</label>
<div class="col-sm-11">
<input type="text" name="poll-option4" id="poll-option4" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<button type="submit" name="poll-submit" id="poll-submit" class="btn btn-danger"><i class=""></i> Poll toevoegen</button>
</div>
<div class="col-sm-12">
<div class="pull-right">
<button type="submit" name="poll-list" id="poll-list" class="btn btn-primary"><i class=""></i> Poll lijst</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="widget" style="display: none;" id="widget2">
<!-- Widget title -->
<div class="widget-head">
<div class="pull-left">Poll-lijst</div>
<div class="widget-icons pull-right">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-wrench"></i>
<i class="fa fa-times"></i>
</div>
<div class="clearfix"></div>
</div>
<div class="widget-content">
<!-- Widget content -->
<div class="padd" id="padd2">
</div>
</div>
</div>
My JS code:
/* Dit is een aparte JS bestand, dit heeft geen PHP handler. Dit include wel een PHP bestand om te poll lijst op te halen. */
$('#poll-list').click(function() {
$('#widget2').show('fast');
// Pagina inladen.
$('#padd2').load('poll-list.php', function() {
noty({
text: 'De poll lijst is succesvol ingeladen'
});
});
});
So I know everything is working fine because the div is showing itself on the page(http://prntscr.com/72yu6q)
But after 2 seconds the page is refreshing, and the button hasn't been clicked so the div is not showing.
Thank you in advance, also my apologies for any bad grammar or spelling mistakes!
Using <button type="submit"> creates a button that submits the form when clicked, causing the browser to load the form's action page (here, 'poll'). You can prevent this with jQuery as in erkaner's answer, or you can not make it a submit button in the first place. <button type="button"> won't do anything unexpected.
Can you add event.preventDefault():
$('#poll-list').click(function(event){
event.preventDefault();
})
Wrap everything in $(document).ready() function
$( document ).ready(function() {
console.log( "ready!" );
});