Its a simple form that looks like below:
<form class="form register-form" data-parsley-validate data-parsley-excluded="input[type=button],input[type=submit], input[type=reset]" method="POST">
<div class="notification hide"></div>
<div class="row first-rg">
<div class="col-sm-6">
<input type="text" class="tfield-2" name="contact_fname" id="contact_fname" placeholder="First Name*" required data-parsley-trigger="focusout">
<div style="display:none;"><input type="text" class="tfield-2" name="contact_projectname" id="contact_projectname" value="Royal Pearls"></div>
</div>
<div class="col-sm-6">
<input type="text" class="tfield-2" name="contact_lname" id="contact_lname" placeholder="Last Name*" required data-parsley-trigger="focusout">
</div>
</div>
<div class="row second-rg">
<div class="col-sm-6">
<input type="text" id="contact_phone" placeholder="Phone No. *" name="contact_phone" maxlength="50" required="" class="international-number-input international-phone-number-input intl-phone-number-input" aria-required="true" autocomplete="off" data-parsley-intl-tel-no data-parsley-trigger="focusout" required>
</div>
<div class="col-sm-6">
<input type="email" class="tfield-2" name="contact_email" id="contact_email" placeholder="Email*" data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-error-message="Enter Valid Email" required>
</div>
</div>
<p class="form-tag">Are you searching for a</p>
<div class="checkbox regiterpage">
<label class="background-co">
<input
type="checkbox"
value="1"
name="bedroom[]"
required
type="checkbox"
data-parsley-mincheck="1"
data-parsley-error-message="Check atleast 1"
>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 1 Bedroom </label>
<label class="background-co" >
<input type="checkbox" value="2" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 2 Bedrooms </label>
<label class="background-co">
<input type="checkbox" value="3" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 3 Bedrooms </label>
<label class="background-co">
<input type="checkbox" value="4" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 4 Bedrooms </label>
</div>
<div class="radioin">
<p class="form-tag">Are you searching for a property as an</p>
<label class="radio-inline background-co">
<input type="radio"
name="propertytype"
required
data-parsley-mincheck="1"
data-parsley-error-message="Check atleast 1"
>
<span class="rlabl">End-user / Owner-occupier</span> </label>
<label class="radio-inline background-co">
<input type="radio" name="optradio">
<span class="rlabl">Investor</span> </label>
</div>
<!-- HIDDEN INPUTS FOR google captcha -->
<input type="hidden" value="No Bots" id="google-captcha" required>
<input type="hidden" id="google-captcha-check" data-parsley-equalto="#google-captcha" data-parsley-error-message="Fill the captcha!" required>
<!-- HIDDEN INPUTS FOR google captcha -->
<div class="captch">
<div class="g-recaptcha" data-sitekey="6LdksigUAAAAAKw5idd69Xa3ysK_RZJ3xAleTbVj" data-callback="google_captcha_callback" data-expired-callback="google_captcha_callback"></div>
</div>
<button type="submit" class="btn-default">Submit</button>
</form>
Now i have validated the form using parsely.js , the validation works just fine , but there is a problem with my submit handler, i have the following submit handler in my form:
$('.register-form').submit(function() {
$.ajax({
type: 'POST',
url: 'mail/reg_send.php',
data : $('.register-form').serialize(),
success : (data , status) => {
(data === 'success') ? $('.notification').text('Thank you for contacting us.').removeClass('hide') : $('.notification').text('There was a problem submitting your form').removeClass('hide');
$('.register-form')[0].reset();
}
});
return false;
});
But even though i have a submit handler and a return false in the submit handler, the page still refreshes and even the i add a breakpoint to my submit handler in my dev tools , the breakpoint is never reached. Why ? what am i doing wrong here ?
I have tried changing the submit handler to something more generic such as:
$('form').submit((){
// code here
})
But my page will still refreah. Why ?
Include the event in the handler with function(e) and prevent default on it.
$('.register-form').submit(function(e) {
e.preventDefault();
// the rest of your code
});
Your other problem might be that your event handler is not being attached to the element because it is not available when the JavaScript is executed. You can test this easily by using the following instead:
$(document).on("submit", ".register-form", function(e) {
e.preventDefault();
// the rest of your code
});
Related
I have a simple form where I am using a vanilla JS library (https://pristine.js.org/) for form validation. The form validation is successful (mostly) but then the form doesn't submit. For the life of me I can't figure out what's going wrong.The form is supposed to post to a PHP file where I can get the posted variable values.
My HTML page with the form and necessary JS and CSS are in the jsfiddle here. In case JSFiddle is acting up, the actual code's below.
I'd appreciate it if someone can help me out with this.
Thanks a ton!
Dexxterr
P.S.: I've beginner level knowledge about JS.
My HTML Code:
<div style="width: 50%; margin: auto;">
<form class="fv-stacked-form" id="inquiry" method="POST" action="form.php">
<div class="fv-row form-group">
<label>Which industry does your organization belong to?</label>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Manufacturing" id="indManufacturing" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indManufacturing">Manufacturing</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Education" id="indEducation" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indEducation">Education</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Real Estate" id="indRealestate" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indRealestate">Real Estate</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="" id="indOther" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indOther">Other</label>
<input style="display: none;" class="label-inline" type="text" name="indOtherValue" id="indOtherValue" value="" minlength="3" class="form-control" data-pristine-min-message="Please enter your industry" />
</div>
</div>
<div class="fv-row form-group">
<label>What is your budget? (In USD)</label>
<input class="form-control" type="number" min="100" required name="budget" data-pristine-min-message="Enter at least 100" />
</div>
<div class="fv-row form-group">
<label>How soon do you want to get started??</label>
<div>
<input class="form-control" type="radio" name="timeline[]" value="Immediately" id="immediately" required />
<label class="label-inline" for="immediately">Immediately</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="3Months" id="3months" required />
<label class="label-inline" for="3months">In the next 3 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="6Months" id="6months" required />
<label class="label-inline" for="6months">In the next 6 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="NoIdea" id="noidea" required />
<label class="label-inline" for="noidea">I don't have a timeline yet</label>
</div>
</div>
<div class="fv-row form-group">
<label>First Name</label>
<input class="form-control" type="text" name="fname" required />
</div>
<div class="fv-row form-group">
<label>Last Name</label>
<input class="form-control" type="text" name="lname" required />
</div>
<div class="fv-row form-group">
<label>Company Email</label>
<input class="form-control" type="email" name="email" required />
</div>
<div class="fv-row form-group">
<label>No. of Employees</label>
<select class="form-control" id="ageRangeField" required>
<option value=""></option>
<option value="1-100">1-100</option>
<option value="100-500">100-500</option>
<option value="500-2500">500-2500</option>
<option value="2500+">2500+</option>
</select>
</div>
<div class="fv-row form-group">
<input name="formsubmit" id="formsubmit" type="submit" class="" value="Submit" />
</div>
</form>
<p id="confmsg" style="display: none;">Thank you for submitting the form.</p>
</div>
My JS Code:
window.onload = function ()
{
var form = document.getElementById("inquiry");
var pristine = new Pristine(form);
form.addEventListener('submit', function (e)
{
e.preventDefault();
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
// alert("This doesn't work");
}
});
};
var sb = document.getElementById('formsubmit'); // Submit button
var cbother = document.getElementById('indOther'); // Checkbox
var txtother = document.getElementById('indOtherValue'); // Other Textbox
cbother.addEventListener('click',function(e){
if(cbother.checked){
cbother.value=txtother.value;
txtother.style.display = 'block';
}else{
txtother.value='';
txtother.style.display = 'none';
}
},false);
e.preventDefault();
is preventing the form from being submitted. If you simply remove it the form will be submitted even if the pristine check fails. So what you want to do is only prevent the default behaviour (which is the form to be submitted) if the pristine check fails:
form.addEventListener('submit', function (e)
{
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
e.preventDefault();
// alert("This doesn't work");
}
});
to simplify that a little you could simply write:
form.addEventListener('submit', function (e)
{
//if the pristine check fails, prevent the form from being submitted
if(!pristine.validate()){
e.preventDefault();
}
});
before submit i'm checking 2 fields if one of two fields is checked i return true else false. the problem is that if false is return , ido check one of two checkboxes but the submit button doesn't seem to work(i do console.log()) on click it shows customvalidity message
gif that shows the problem gif
here is code :
function validateForm() {
var checkcapelli = $('#TaglioCapelli').is(':checked');
var checkcolore = $('#checkcolore').is(':checked');
console.log(checkcapelli);
console.log(checkcolore);
console.log("hello");
if (checkcapelli || checkcolore){
return true;
}else{
document.getElementById('TaglioCapelli').setCustomValidity("Selezionare almeno una opzione");
return false;
}
}
form (i removed some fields): I do check two checkboxes:
<form id="userForm" action="php/userForm.php" onsubmit="return validateForm()" method="post">
<div class="modal-body">
<div class="form-group">
<input class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
<label class="form-check-label" for="TaglioCapelli">
Taglio Capelli
</label>
<input class="form-check-input" type="number" readonly value ="30" name ="tempTaglioCapelli" id="tempTaglioCapelli" >
<label class="form-check-label" for="tempTaglioCapelli">
Tempo in minuti
</label>
</div>
<div class="form-group">
<input class="form-check-input" type="checkbox" name ="checkcolore" id="checkcolore" >
<label class="form-check-label" for="checkcolore">
Colore Capelli
</label>
<input class="form-check-input" type="number" readonly name ="tempcheckcolore" value ="40" id="tempcheckcolore" >
<label class="form-check-label" for="tempcheckcolore">
Tempo in minuti
</label>
</div>
<div class="form-group">
<label for="noteUser">Note</label>
<input type="text" name ="noteUser" class="form-control" id="noteUser" placeholder="Opzionale">
</div>
<div class="form-group">
<label for="finalTime">Tempo finale stimato</label>
<input type="text" name ="finalTime" class="form-control" readonly id="finalTime" placeholder="">
</div>
</div>
<div class="modal-footer">
<div class="form-check mb-2 mr-sm-2 tratdati">
<input class="form-check-input" type="checkbox" required name ="CheckDati" id="CheckDati" checked>
<label class="form-check-label" for="CheckDati">
Autorizzo il trattamento dei dati
</label>
</div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
<button type="submit" id="sendUserForm" class="btn btn-primary">Prenota</button>
</div>
</form>
Because when you first submit the form, it puts the form in an 'invalid' state. The form will not submit until the fields are changed to put the form in a valid state.
Two options:
$('input[name="myinput"]').on("blur", () => {
// Do your checks and setCustomValidity depending on if is valid or not
});
Or you can change your submit button to a
type="button" onclick="submitForm()"
function submitForm() {
...do my validation checks
call form.submit() if validation passes.
}
Changing the check box html from
<input class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
to
<input onClick="this.setCustomValidity('')" class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
here on click we are nullifying the custom validation added.
Note: in this case even you tried to check other checkbox and try to submit, it will still not submit the form as per the validation logic you have set.
I'm working with Angular forms and trying to see if there is a better way to fire an event on the first initial focus of any cell within a form. This way the event only gets called once.
I am aware you can fire an event by adding the attribute ng-focus to each of the cell elements. However, this will result in the event being fired every time each of the form's cell elements gains focus.
Lets say we have this form with inputs, text-areas, and radio buttons, etc.
I was hoping that this would work but it does not:
Adding the attribute ng-cell-has-focus="vm.clearAllMessages()" on the <form> element
<form
name="vm.form"
novalidate
ng-cell-has-focus="vm.clearAllMessages()"
ng-submit="vm.form.$valid && vm.sendForm($event)">
<div class="form-group">
<label for="name-id">Name</label>
<input id="name-id"
name="name"
type="text"
ng-model="vm.formData.username"
autofocus
required>
<div class="error-message"
ng-messages="vm.form.name.$error"
ng-if="vm.form.name.$touched || vm.form.$submitted">
<div ng-message="required">Name is required.</div>
</div>
</div>
<div class="form-group">
<label for="email-id">Email</label>
<input id="email-id"
name="email"
type="email"
ng-model="vm.formData.emailAddress"
required>
<div class="error-message"
ng-messages="vm.form.email.$error"
ng-if="vm.form.email.$touched || vm.form.$submitted">
<span ng-message="required">Email address is required.</span>
<span ng-message="email">Please enter a valid email address.</span>
</div>
</div>
<div class="form-group">
<input id="radio-1-id"
name="radio"
type="radio"
value="First option"
ng-model="vm.formData.radio"
required>
<label for="radio-1-id">First option</label>
<input id="radio-2-id"
name="radio"
type="radio"
value="Second option"
ng-model="vm.formData.radio"
required>
<label for="radio-2-id">Second option</label>
<div class="error-message"
ng-messages="vm.form.radio.$error"
ng-if="vm.form.radio.$touched || vm.form.$submitted">
<span ng-message="required">Choose an option is required.</span>
</div>
</div>
<div class="form-group">
<label for="message-id">Message</label>
<textarea id="message-id"
name="message"
cols="1"
rows="4"
ng-model="vm.formData.message"
placeholder="Type in Message here ..."
required></textarea>
<div class="error-message"
ng-messages="vm.form.message.$error"
ng-if="vm.form.message.$touched || vm.form.$submitted">
<div ng-message="required">Message is required.</div>
</div>
</div>
<div class="form-group">
<label for="terms-id">Agree to Terms of Use</label>
<input id="terms-id"
name="terms"
type="checkbox"
ng-model="vm.formData.terms"
required>
<div class="error-message"
ng-messages="vm.form.emailConfirm.$error"
ng-if="vm.form.emailConfirm.$touched || vm.form.$submitted">
<div ng-message="required">You must agree to Terms of Use.</div>
</div>
</div>
<button type="submit">SUBMIT</button>
</form>
I have a .less file with a form-validate class in it. When the input type is set to url, and an invalid url is entered, the border turns red.
Normally it works, but when I add the element dynamically, it does not.
The .less file is from a template and I don't know much about it.
I'm adding the input element dynamically on a button click.
I've added the form-validate to the form which is parent.
$("#panelHolder").html('<input type="url" name="hostUrl" id="hostUrl" ng-model="hostUrl" placeholder="http://" class="form-control "/>');
If the same code is added directly in the panelHolder, it works.
<form name="myForm" class="form-validate " data-ng-submit="create(myForm.$valid)"
novalidate>
<script>
function showPanel1()
{
$("#servicePanelHolder").html('<div id="panel1" class="controls"><div class="form-group"><label class="control-label">Host</label><input type="url" form="syncForm" name="hostUrl" id="hostUrl" ng-model="hostUrl" placeholder="http://"class="form-control "/><span ng-show="form.validateInput(\'url\', \'url\')"></span></div></div>');
}
function showPanel2()
{
$("#servicePanelHolder").html('<div id="panel2" class="controls"><div class="form-group"><label class="control-label">Access Key</label><input type="text" name="accessKey" id="accessKey" ng-model="accessKey" class="form-control "/></div><div class="form-group"><label class="control-label">Secret Access Key</label><input type="text" name="secretKey" id="secretKey" ng-model="secretKey"class="form-control "></div></div>');
}
</script>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" name="name" id="name" ng-model="name" class="form-control "/>
</div>
<legend>Service</legend>
<div class="row form-group">
<label class="radio-inline c-radio ">
<input type="radio" name="type" value="Panel1"
checked="" ng-model="type"
onchange="showPanel1()"/>
<span class="fa fa-circle"></span>Panel 1</label>
<label class="radio-inline c-radio">
<input type="radio" name="type" value="Panel2"
ng-model="type"
onchange="showPanel2()"/>
<span class="fa fa-circle"></span>Panel 2</label>
</div>
</div>
<div class="panel-body" id="servicePanelHolder">
</div>
<div class=" mt">
<input type="submit" class="mb-sm btn btn-primary">
</div>
</form>
UPDATE: I'm also unable to read values of these elements in my controller when the form is submitted.
I have PHP Contact form which has a checkbox that a user upon registration has a option if he wants to subscribe to the newsletter or not, but I want to use a Mailchimp to capture the email address and put into a list. Also I'm using an javascript once the form is submit.
How can I make a condition if a checkbox is check, code from my form and the mailchimp will execute at the same time?
This is my form
<form role="form" id="feedbackForm">
<div class="form-group">
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
</div>
<div class="form-group">
<input type="text" class="form-control" id="company_name" name="company_name" placeholder="Company">
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group">
<textarea rows="10" cols="100" class="form-control" id="message" name="message" placeholder="Message"></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group">
<label for="selectbasic">How did you hear about us?</label>
<select id="selectbasic" name="selectbasic" class="form-control">
<option>Select</option>
<option>Search engine</option>
<option>Microsoft DPE</option>
<option>Microsoft event</option>
<option>Social media</option>
<option>Word of mouth</option>
<option>Other</option>
</select>
</div>
<img id="captcha" src="library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" />
Show a Different Image<br/>
<div class="form-group" style="margin-top: 10px;">
<input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="For security, please enter the code displayed in the box." />
<span class="help-block" style="display: none;">Please enter the code displayed within the image.</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="emailUpdates" name="emailUpdates" value="Yes">
Please keep me informed of product updates and news
</label>
</div>
<span class="help-block" style="display: none;">Please enter a the security code.</span>
<button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg" style="display: block; margin-top: 10px;">Send Feedback</button>
</form>
CODE FOR THE CHECKBOX -
<div class="checkbox">
<label>
<input type="checkbox" id="emailUpdates" name="emailUpdates" value="Yes">
Please keep me informed of product updates and news
</label>
</div>
PHP Script for the checkbox
<?php
if ($_POST['emailUpdates'] == 'Yes') {
//EXECUTE MAILCHIMP CODE
}
?>
Just leave the value attribute of the checkbox blank, if it is checked it will submit a value of on otherwise it will submit nothing
<?php
if (isset($_POST['emailUpdates'])) {
//EXECUTE MAILCHIMP CODE
}
?>
<input type="checkbox" id="emailUpdates" name="emailUpdates"/>