This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 6 years ago.
Probably an easy one. When I click on submit button in a form I have created I am supposed to see the message "clicked" on my console but it does not appear. Any ideas why this happens?
$("#button").on("click", function() {
console.log("clicked");
return false;
});
<div class="col-md-8">
<form>
<div class="form-group">
<label for="name" class="sr-only">Name</label>
<input type="text" class="form-control" id="name" placeholder="Your name here" maxlength="20">
</div>
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email here*" required="required">
</div>
<label for="textBox" class="sr-only">TextBox</label>
<textarea class="form-control message-box" id="textBox" style="resize:none" cols="40" rows="5" placeholder="Your message here" minlength="20"></textarea>
<button type="submit" class="btn btn-default" id="button">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
The $ function is defined only by jQuery. You need to include jQuery for this to work.
$("#button").on("click", function() {
console.log("clicked");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-8">
<form>
<div class="form-group">
<label for="name" class="sr-only">Name</label>
<input type="text" class="form-control" id="name" placeholder="Your name here" maxlength="20">
</div>
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email here*" required="required">
</div>
<label for="textBox" class="sr-only">TextBox</label>
<textarea class="form-control message-box" id="textBox" style="resize:none" cols="40" rows="5" placeholder="Your message here" minlength="20"></textarea>
<button type="submit" class="btn btn-default" id="button">Submit</button>
</form>
Adding jQuery works here.
Related
I have created a simple form for contact-us section on a website. For submit button, initially I used type=submit but later came across a suggestion to change it to type=button. However the code is not working for submit as well as reset. Can someone please help to point out whats wrong in my code below.
function submitForm() {
var frm = document.getElementById('contactFormAP');
alert('H2');
frm.submit(); // Submit the form
alert('H3');
frm.reset(); // Reset form data
return false;
}
<form class="contactForm" action="email_form.php?do=send" method="post" role="form" id="contactFormAP">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="contactnumber" id="contactnumber" placeholder="Contact Number" data-rule="minlen:10" data-msg="Please enter correct contact number with country code" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="text-center">
<input type="button" value="Submit" id="submitbtn" onclick="submitForm()">
</div>
</form>
Use the OnSubmit-Listener instead:
https://www.w3schools.com/jsref/event_onsubmit.asp
Hi I have a website which was developed using php and it contains contact form where users submit their data. Down below is the code for contact form
<div class="form">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm" >
<div class="form-row">
<div class="form-group col-lg-6">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
</textarea>
<div class="validation"></div>
</div>
<p style="-webkit-margin-collapse: discard;">Captcha: </p>
<p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
<div class="validation"></div>
<div id ="ss" class="text-center" >
<button type="submit" value="submit" name="submit" title="Send Message" >SUBMIT</button>
</div>
</form>
</div>
After submitting the form I want to clear the fields and I tried the below code
<script>
function myFunction() {
document.getElementById("innov-contact").reset();
}
</script>
From the above when I try to save the form it refreshes the fields but it does not save in database and even I tried the below code
<script type="text/javascript">
$("#innov-contact")[0].reset();
</script>
But it does not clear the form and even I tried the below code
$(document).ready(function() {
var options = {
target: '#output1',
clearForm: true // clear all form fields after successful submit
};
// bind form using 'ajaxForm'
$('#innov-contact').ajaxForm(options);
});
Please let me any other method to clear the form
you can use trigger() to reset the form with jQuery
$('#form_id').trigger("reset");
This is from the jQuery Form Plugin docs.
$('#innov-contact').clearForm();
If you want to clear any specific fields.
$('#innov-contact #email').clearFields();
$('.form-control').val('');
This will clear all form fields with the class form-control.
Add 1 input type reset in form and click after ajax request:
$(document).ready(function() {
$('#innov-contact').submit((e) => {
e.preventDefault();
//Ajax...
$("#reset").click();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm">
<div class="form-row">
<div class="form-group col-lg-6">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
</textarea>
<div class="validation"></div>
</div>
<p style="-webkit-margin-collapse: discard;">Captcha: </p>
<p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
<div class="validation"></div>
<div id="ss" class="text-center">
<button type="submit" value="submit" name="submit" title="Send Message">SUBMIT</button>
</div><input type="reset" id="reset">
</form>
use this $("#fname").val(""); it will clear the value in the 'fname' input field. Like this you can clear every field.
I am have a small script written in JS for a form. The script looks like so:
$(document).ready(function() {
// Test for placeholder support
$.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
// Hide labels by default if placeholders are supported
if($.support.placeholder) {
$('.form-label').each(function(){
$(this).addClass('js-hide-label');
});
// Code for adding/removing classes here
$('.form-group').find('input, textarea').on('keyup blur focus', function(e){
console.log(e);
// Cache our selectors
var $this = $(this),
$parent = $this.parent().find("label");
if (e.type == 'keyup') {
if( $this.val() == '' ) {
$parent.addClass('js-hide-label');
} else {
$parent.removeClass('js-hide-label');
}
}
else if (e.type == 'blur') {
if( $this.val() == '' ) {
$parent.addClass('js-hide-label');
}
else {
$parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
}
}
else if (e.type == 'focus') {
if( $this.val() !== '' ) {
$parent.removeClass('js-unhighlight-label');
}
}
});
}
});
and this is my form in HTML:
<form id="contact-form" class="form" action="#" method="POST" role="form">
<div class="form-group">
<label class="form-label" for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Your Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<label class="form-label" for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
</div>
<div class="form-group">
<label class="form-label" for="message">Message</label>
<textarea rows="5" cols="50" name="message" class="form-control" id="message" placeholder="Message..." required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-start-order">Send Message</button>
</div>
</form>
This works well, as can be seen here: https://codepen.io/stephanrusu/pen/QwKLJX
I have modified my form to have a <span></span> tags around the input/textarea. In the JS this requires looking for input and textfield inside the span which has class name wpcf7-form-control-wrap. So my HTML looks like this now:
<form id="contact-form" class="form" action="#" method="POST" role="form">
<div class="form-group">
<label class="form-label" for="name">Your Name</label>
<span class="wpcf7-form-control-wrap fullname">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
</span>
</div>
<div class="form-group">
<label class="form-label" for="email">Your Email</label>
<span class="wpcf7-form-control-wrap email">
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
</span>
</div>
<div class="form-group">
<label class="form-label" for="subject">Subject</label>
<span class="wpcf7-form-control-wrap subject">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
</span>
</div>
<div class="form-group">
<label class="form-label" for="message">Message</label>
<span class="wpcf7-form-control-wrap message">
<textarea rows="5" cols="50" name="message" class="form-control" id="message" placeholder="Message..." required></textarea>
</span>
</div>
<div class="text-center">
<span class="wpcf7-form-control-wrap fullname">
<button type="submit" class="btn btn-start-order">Send Message</button>
</span>
</div>
</form>
So my questions is how can the JS be modified to work with the following form. All that is added is around the inputs and textareas.
Many thanks in anticipation.
In your code, just change the line:
$parent = $this.parent().find("label");
to
$parent = $this.closest(".form-group").find("label");
After update of form, $(this).parent() refers to <span> instead of <label>. $this.closest(".form-group").find("label") will refer correctly to label elements.
What I am trying to achieve is that if user clicks on close button a function Exit is triggered which displays a form before user leaves the website.But my form is not getting displayed
Javascript
<script type="text/javascript">
window.onbeforeunload = Exit;
function Exit()
{
setTimeout(function() {
setTimeout(function() {
document.getElementById('form').style.display="block";
window.location.href="register.html";
}, 1000);
},1);
return "Message";
}
</script>
Html code
<div class="container">
<form role="form" id="form" method="post" action="register.php" style="display:none">
<div class="form-group">
<label for="username">Name:</label>
<input type="text" name="username" class="form-control" id="username" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="number" name="phone" class="form-control" id="phone" placeholder="Enter phonenumber">
</div>
<div class="form-group">
<label for="reason">Reason to leave:</label>
<textarea class="form-control" name="reason" rows="5" id="comment"></textarea>
</div>
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</form>
</div>
I've two tabs in my homepage, one for personal registration and another to companies. The validation works fine in the first, but in the second tab, the validation don't work and returns nothing.
First of all, the HTML:
<!-- Fire nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Pessoa Fisica</li>
<li>Pessoa Juridica</li>
</ul>
<!-- Nav tabs -->
<div class="tab-content">
<div class="tab-pane fade in active" id="pf">
<form id="pfRegister" action="" method="post" autocomplete="off">
<div class="form-group">
<input type="text" id="firstName" class="form-control inputSk" placeholder="Name" name="firstName" required>
</div>
<div class="form-group">
<input type="text" id="lastName" class="form-control inputSk" placeholder="Surname" name="lastName" required>
</div>
<div class="form-group">
<input type="text" id="email" class="form-control inputSk" placeholder="Email" name="email" required>
</div>
<div class="form-group">
<input type="password" id="password" class="form-control inputSk" placeholder="Password" name="password" required>
</div>
<div class="form-group">
<input type="password" id="confirm_password" class="form-control inputSk" placeholder="Confirm your password" name="confirm_password" required>
</div>
<div class="form-group">
<select id="gender" name="gender" class="form-control inputSk" required>
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control inputSk input" name="birth" id="birth" required>
</div>
</div>
</div>
<div class="actionForm">
<button type="submit" id="send" class="btn btn-default sk skBtn-primary submit">Sign up</button>
</div>
</form>
</div>
<!-- company register -->
<div class="tab-pane fade" id="pj">
<form id="pjRegister" class="captcha" action="" method="post" autocomplete="off">
<div class="form-group">
<input type="text" class="form-control inputSk" name="cnpj" id="cnpj" placeholder="CNPJ" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="juridicIdentity" id="razaosocial" placeholder="Razao Social" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="companyIdentity" id="company" placeholder="Company Name" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="administrator" id="administrator" placeholder="Administrator Account" required>
</div>
<div class="form-group">
<input type="email" class="form-control inputSk" id="pjEmail" name="pjEmail" placeholder="Email" required>
</div>
<div class="form-group">
<input type="email" class="form-control inputSk" id="pj_confirm_email" name="pj_confirm_email" placeholder="Confirm Email" required>
</div>
<div class="form-group">
<input type="password" id="pjPassword" class="form-control inputSk pwstrength_viewport_progress" placeholder="Password" required>
</div>
<div class="form-group">
<input type="password" id="pjConfirm_password" class="form-control inputSk" placeholder="Confirm Password" required>
</div>
<div class="actionForm">
<button type="button" id="pjSend" class="btn btn-default sk skBtn-primary submit">Sign up</button>
</div>
</form>
</div>
</div> <!-- end of pj panel -->
The JS:
$("#pfRegister").validate({
rules: {rules},
messages: {msgs}
});
//companies validator
$("#pjRegister").validate({
rules: {rules},
messages: {msgs}
});
The defaults and showErrors is set inside $.validator.setDefaults.
I tried to validate one by one with this, but still not working:
var pfreg = $("#pfRegister").validate({
rules: {rules},
messages: {msgs}
});
//companies validator
var pjreg = $("#pjRegister").validate({
rules: {rules},
messages: {msgs}
});
pjreg.element('input');
pfreg.element('input');
Searching the web, I found a possible solution:
$("#pjRegister").each(function(){
$(this).validate();
});
But this way the form don't validate when I click the Submit button.
Your first button is a type="submit", which is captured automatically by the validation plugin, so validation is triggered.
Your second button is a type="button", which is not captured, so the plugin does nothing when you click it.
Working DEMO: http://jsfiddle.net/9o0zd4pt/1/