I am working on a webpage and I have this form that will execute a script once the submit button is pressed. I plan to add AJAX in to push data to a PHP script, but for now I can't even get the javascript code block to run. Am i doing something wrong? In addition, I do have the includes for jQuery.
Below are snippets of my code.
<!--Scripts -->
<script src="js/jquery.min.js"></script>
<!--Legacy jQuery support for quicksand plugin-->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<div class="col-md-6">
<form id="contact-form" role="form">
<div class="form-group">
<label class="sr-only" for="contact-name">Name</label>
<input type="text" name="name" class="form-control" id="contact-name" placeholder="Name">
</div>
<div class="form-group">
<label class="sr-only" for="contact-email">Email</label>
<input type="email" name="email" class="form-control" id="contact-email" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="contact-message">Message</label>
<textarea rows="12" name="message" class="form-control" id="contact-message" placeholder="Message"></textarea>
</div>
<input type="submit" class="btn btn-primary" value="Send Message">
</form>
<!-- Function To Submit Contact Us Form-->
<script type="text/javascript">
$("#contact-form").submit(function(event) {
alert("Dammit");
});
</script>
</div>
When clicking submit the Web Browser URL shows the fields and content from the form, however the alert is not being executed. I appreciate any assistance in advanced.
$("#contact-form").submit(function(event) {
alert("Dammit");
});
You need the # character when querying for an element by ID. Your code is currently looking for a tag named contact-form
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
I am using the bootstrap version 4. Index.php includes the below contact form. I want users to see the validation messages when they click submit to draw their attention to the required fields they have missed. For example, when a user hits submit without filling any field, the user sees the below, which is the behavior I want to achieve, and I currently have:
[please note that to save space in this post, all images can be shown by clicking on run code snippet]
<img src="https://i.stack.imgur.com/h1KwJ.png" width="50%" height="50%" />
The contact form: Index.php
<!DOCTYPE HTML>
<html>
<head>
<title>Contact form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class ="container">
<div class="col-lg-6 push-lg-3">
<h1> Contact us</h1>
<p>Fill out the below form to contact us</p>
<form id="contactForm" class="contact-form needs-validation" action="form.php" method="POST" novalidate>
<div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
<strong>Success!</strong> Your message has been sent to us.
</div>
<div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
<strong>Error!</strong> There was an error sending your message.
<span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
</div>
<div class="form-row">
<div class="form-group col-lg-6">
<label for="name" class="required font-weight-bold text-dark">Full Name</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
</div>
<div class="form-group col-lg-6">
<label class="required font-weight-bold text-dark">Email Address</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label class="font-weight-bold text-dark">Phone</label>
<input type="text" value="" data-msg-required="Please enter the phone number." maxlength="100" class="form-control" name="phone" id="phone" required>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label class="required font-weight-bold text-dark">Message</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="5" class="form-control" name="message" id="message" required></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<div class="g-recaptcha" data-sitekey="Your_Public_Key"></div>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
</div>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/view.contact.js"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
else {
$("#submit-btn .text").text("Enviado");
$("#submit-btn").addClass("active");
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<script>
$("#contactForm").validate();
</script>
</body>
</html>
The issue
I have the issue that when the user hits submits, everything goes as planned, and the form refreshes, and the success message appears, but the form refreshes with validation showing red boxes, which is the problem I want to solve. This is how a successful form submission currently looks like and this is incorrect:
<img src="https://i.stack.imgur.com/eV7A6.png" width="50%" height="50%" />
When the user hits submit, I want the user to see the success message; I want the form to refresh without green or red boxes to the input fields. To better understand this, please have a look at the below behavior I want to achieve:
<img src="https://i.stack.imgur.com/0Yf01.png" width="50%" height="50%" />
I know that the issue is in the JavaScript for disabling form submissions (above) or in the view.contact.js:
I appreciate any insights or guidance about how I can fix this.
One more question I have is this: Will I need the below code?
<script>
$("#contactForm").validate();
</script>
Any comment on how to make this code better is highly appreciated.
From the official documentacion:
To reset the appearance of the form (for instance, in the case of
dynamic form submissions using AJAX), remove the .was-validated class
from the again after submission.
Bootstrap > Form > Validation > How it Works
In your case, you need to add the following line:
$form.removeClass('was-validated');
Inside:
$.ajax({...})
.done(function() {
//HERE
),
.always({...});
I'll try to explain this as best as possible.
I have a form that on submit actions on email.php:
<form data-toggle="validator" role="form" method="POST" action="email.php">
<div class="row">
<!-- Full Name -->
<div class="form-group col-lg-4">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" name="inputName" id="inputName" required>
</div>
<!-- email -->
<div class="form-group col-lg-4">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" name="inputEmail" id="inputEmail" data-error="Incorrect Email Format" required>
</div>
<!-- phone number -->
<div class="form-group col-lg-4">
<label for="inputTel" class="control-label">Phone Number</label>
<input type="text" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" name="inputTel" id="inputTel" data-minlength="10" maxlength="15" class="form-control" placeholder="123-456-7890" data-error="(123)-456-7890 | 1234567890 | 123-456-7890">
</div>
<!-- message -->
<div class="form-group col-lg-12">
<label for="content" class="control-label">Message</label>
<textarea name="content" id="content" class="form-control" rows="6" data-minlength="5" data-error="Message Must be longer"></textarea>
</div>
<!-- button -->
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
After the form is successfully processed in email.php, I want it to go back to the page the form is located on and show the "thank you" modal I created
currently I have in email.php (after validation):
echo "<script>
$(window).load(function(){
$('#myModal').modal('show');
});
window.location.href="Websitename";
</script>";
This does not work. What happens is the page just gets redirected but does not display the modal.
Can anyone please provide me any assistance?
I think the problem is in
window.location.href="Websitename";
When browser see this line , she will automatically locate the browser which means new request immediately made.
Let me explain :
Your form send request to email.php -----> sends response as a javascript --> javascript request to "website name".
In order to correct this issue , you should put window.location.href inside timeout function and that timeout triggered after window.load .
Please check :
echo "<script>
function deferredFunction(){
window.location.href="Websitename";
}
$(window).load(function(){
$('#myModal').modal('show');
setTimeout(deferredFunction,5000);
});
</script>";
Hope Helps!!
so I'm having a weird problem that I haven't encountered before. My code is the following:
<div class="row">
<div class="col-md-12">
<h4>Send message to seller</h4>
<div class="panel panel-default">
<div class="panel-body">
<form action="#" method="POST">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter your email" >
</div>
<div class="form-group">
<label for="InputText">Your text</label>
<textarea class="form-control" id="InputText" name="message" placeholder="Type in your message" rows="5" style="margin-bottom:10px;"></textarea>
</div>
<button class="btn btn-info" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
When I run it on the server, this is the result, and it is really annoying:
<div class="form-group">
<label for="InputEmail">Email address</label>
<div class="has-placeholder form-control"><label>Enter your email</label><input type="email" class="form-control" id="InputEmail"></div>
For the second code, I omitted the rest of the code. As you can see, it adds a new and a new with a class of place-holer.
I have 2 versions of this file. Full HTML, and one with PHP etc.. The HTML version is just fine, but this one, for some reason, has this result. Can anyone explain to my why this is happening.
I have looked in the js files that are being included and cannot find anything regarding that added class and what not.
Thanks.
Your this html code is just perfect. Probably you missed some tag in php file. Can you please post your php code so that we can sorted it out.
Thanks
I am working through http://twitterbootstrap.org/bootstrap-form-validation/. I have got the project working except for adding an image at the end of the individual fields in my form.
my form looks like:
form id="registration-form" class="form-horizontal">
<h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2>
<!-- Text input-->
<div class="form-control-group">
<label class="control-label" for="FirstName">First Name</label>
<div class="controls">
<input id="FirstName" name="FirstName" type="text" placeholder="Bob" class="input-xlarge" required="">
</div>
</div>
<!-- <div class="form-form-control-group">
<label class="control-label" for="name">Your Name</label>
<div class="controls"><input class="input-xlarge" id="name" type="text" name="name" /></div>
</div>
<pre>-->
<!-- Text input-->
<div class="form-control-group">
<label class="control-label" for="LastName">Last Name</label>
<div class="controls">
<input id="LastName" name="LastName" type="text" placeholder="Smith" class="input-xlarge" required="">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success btn-large">Register</button>
<button type="reset" class="btn">Cancel</button></div>
</form>
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script src="assets/js/script.js"></script>
<script>
addEventListener('load', function (event) { prettyPrint() }, false); $(document).ready(function(){
$('pre').addClass('prettyprint linenums');
});
</script>
when the page loads in firebug I see:
ReferenceError: prettyPrint is not defined
referring to :
addEventListener('load', prettyPrint, false);
There are no other js errors.
PS I've added:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
as above but am still getting the error. what am I doing wrong.
From: http://google-code-prettify.googlecode.com/svn/trunk/README.html
If you are calling prettyPrint via an event handler, wrap it in a function. Instead of doing
addEventListener('load', prettyPrint, false);
wrap it in a closure like
addEventListener('load', function (event) { prettyPrint() }, false);
so that the browser does not pass an event object to prettyPrint which will confuse it.
That being said, make sure
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
is loaded before your script is, even though it shouldn't matter.