I create a form.
How do I prevent a form from submitting using jQuery?
<form id="form">
<div class="container form-group">
<h1 class="mb-5">Get in touch!</h1>
<div id="error"></div>
<label for="email">Email Address:</label>
<input type="email" name="email" class="form-control" id="email" />
<small class="text-muted d-block mb-3">we never share your email</small>
<label>Subject:</label>
<input type="text" name="text" class="form-control mb-3" id="subject" />
<label for="message">Message:</label>
<textarea
name="message"
id="content"
rows="3"
class="form-control mb-3"
></textarea>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</form>
This is my jQuery code:
$(document).ready(function () {
$("#form").submit(function (e) {
e.preventDefault();
});
});
Unfortunately, the page refreshes again
I don't know where the problem comes from
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
I made a validation form and I didn't use (required) attribute. I want to use only Javascript, but I try many scripts, Any scripts not working. Anyone write script which script worked please explain.
<div class="card-body">
<h2 class="text-center color-blue">Simple Form</h2>
<form class="myForm">
<div class="form-group">
<label>Name</label>
<input type="text" name="fname" class="form-control" placeholder="Enter Your Name" title="Enter Your Name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Enter Your Email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" id="phone" name="phone" class="form-control" oninput="validateNumber(this)" placeholder="Enter Your Number">
<!-- pattern="[0-9]{11}" -->
</div>
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" placeholder="Enter Your Username">
</div>
<div class="form-group">
<button class="btn btn-primary float-right">Save Info</button>
</div>
<div>
<p>Already have an acount? Login here</p>
</div>
</form>
</div>
const handleFormSubmit = event => {
event.preventDefault();
const data = form.elements;
console.log(data);
// your custom validation
// on fields
const isNumberValid = true
if(data.fname.value != "" && data.fname.vaue != "" && isNumberValid) {
form.submit();
alert(data.fname);
} else {
alert("ko");
}
return false;
};
const form = document.forms['myForm'];
form.addEventListener('submit', handleFormSubmit);
<div class="card-body">
<h2 class="text-center color-blue">Simple Form</h2>
<form id="myForm" action="/" method="post" accept-charset="utf-8">
<div class="form-group">
<label>Name</label>
<input type="text" name="fname" class="form-control" placeholder="Enter Your Name" title="Enter Your Name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Enter Your Email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" id="phone" name="phone" class="form-control" oninput="validateNumber(this)" placeholder="Enter Your Number">
<!-- pattern="[0-9]{11}" -->
</div>
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" placeholder="Enter Your Username">
</div>
<div class="form-group">
<button class="btn btn-primary float-right">Save Info</button>
</div>
<div>
<p>Already have an acount? Login here</p>
</div>
</form>
</div>
I have created a PHP page which have some form information and at the end of the form i have a submit button. I know how to take all the user inputs from the form using the PHP post method. My problem is the following, how can i create a mini pop up form which will pop up after the user clicks the submit button. The pop up form will ask from the user if the submission of the information is urgent or not, the user will just choose between urgent or not urgent and click a button in the mini pop up form("proceed") that will close the pop up and send all information of the user inputs along with the pop up in a different PHP page. Can someone please guide with this problem?
The source code of my form at the moment is the following
<?php include "includes/tasksheader.php"; ?>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main1">
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Social Ensuarance Number</label>
<input type="text" class="form-control" id="" placeholder="Ensuarance Number">
</div>
<div class="form-group">
<label for="exampleInputEmail">Land Regisrty Department</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
</div>
<div class="form-group">
<label for="telephone">Income Tax Office</label>
<input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
</div>
<div class="form-group">
<label for="telephone">Court</label>
<input type="tel" class="form-control" id="telephone" placeholder="Court">
</div>
<div class="form-group">
<label for="telephone">Limassol District Administration</label>
<input type="tel" class="form-control" id="telephone" placeholder="District Administration">
</div>
<div class="form-group">
<label for="telephone">Municipality</label>
<input type="tel" class="form-control" id="telephone" placeholder="Municipality">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputUsername">VAT Department</label>
<input type="text" class="form-control" id="" placeholder="VAT">
</div>
<div class="form-group">
<label for="exampleInputEmail">RCB Bank</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
</div>
<div class="form-group">
<label for="telephone">Hellenic Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
</div>
<div class="form-group">
<label for="telephone">Bank of Cyprus</label>
<input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
</div>
<div class="form-group">
<label for="telephone">CDB Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
</div>
<div class="form-group">
<label for="telephone">Other</label>
<input type="tel" class="form-control" id="telephone" placeholder="Other">
</div>
</div>
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
<div>
<button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
Thanks in regards
I'm guessing you'll need to do the following:
first create the popup form(having two buttons...) then you'll need to write the following in your javascript file:
$('form').on("submit", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
or
$('button').on("click", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
then in your popup you'll again need to preventDefault and do whatever is on your intention.
I hope it helps:)
You could change the button to a submit button and set an onsubmit for the form:
<button type="submit">
<form method="post" onsubmit="openPopup();return false">
And then use javascript to open the popup with all the data you need.
I hope this helps.
I am making a login form with a link if the user forgot password,
this form is inside div as below, but the problem is that when the user click Forgot the password, it opens this page in the whole page not on its div
<div>
<form class="form" method="POST" id="login-nav">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" class="form-control" id="emailaddress" name="emailaddress"placeholder="Email address" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" required>
<div class="help-block text-right">Forgot the password ?</div>
</div>
<div class="form-group">
<button type="submit" id="login_button" name="login_button" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
forgotpassword.php
<form action="" method="post">
<div class="form-group">
<label for="emailaddress">Enter your email address</label>
<input type="email" class="form-control" id="recovery_email" name="recovery_email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<button type="submit" id="resetpassword" name="resetpassword" class="btn btn-primary btn-block">Reset Password</button>
</div>
_self is standard for the target-tag. It opens the link in the same browser window, just what you are describing.
DIVs are not iFrames. (And no one wants iFrames for something like this. Really.)
You have to build your div-structure again at your forgotpassword.php.
This is what I'm currently using to trigger it
GET FREE QUOTE
then this is the html code
<div id="demo" class="collapse">
<br><br><br><br><br><br><br><br>
<div class="wrap-type-input">
<form id="get_free_quote" class="contact-form" method="post" action="contact/contact-process.php">
<div class="input-wrap name">
<input type="text" value="" tabindex="1" placeholder="Name (*)" name="name" id="name" required="">
</div>
<div class="input-wrap name">
<input type="text" min="0" value="" accept="*/phone" tabindex="1" placeholder="Phone (*)" name="phone" id="name" required="">
</div>
<div class="input-wrap email">
<input type="email" value="" tabindex="2" placeholder="Email (*)" name="email" id="email" required="">
</div>
<div class="textarea-wrap">
<textarea class="type-input" tabindex="3" placeholder="Items you Need" name="message" id="message-contact" required=""></textarea>
</div>
<div class="subscribe">
<button type="submit" id="submit" class="button" name="submit">Send Message</button>
</div>
</form>
</div>
</div>
I will really be grateful for an answer
I have the following form that I want to use the bootstrap-validator:
<form method="POST" action="http://localhost:8000/register/researcher" accept-charset="UTF-8" data-toggle="validator" novalidate="true">
<input name="_token" type="hidden" value="v5VF4sgb0zOrxzAihpEhkezccUWHPpXO5CnnmIK7">
<div class="from-group">
<input class="form-control" placeholder="Nome" required="required" name="name" type="text">
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Email" data-error="O email inserido é inválido." required="required" name="email" type="email">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Senha" data-minlength="6" id="inputPass" required="required" name="password" type="password" value="">
<span class="help-block">Senha de no mínimo 6 caracteres</span>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Confirmar senha" data-match="#inputPass" data-match-error="Senhas inseridas são diferentes" required="required" name="password_confirmation" type="password" value="">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="CPF" required="required" name="cpf" type="text">
</div>
<br>
<div class="text-center">
<input class="btn btn-primary disabled" type="submit" value="Enviar">
</div> </form>
I'm importing the validator.js and somehow it's working (it disables the submit button) but no erros are shown when I test the form. Can you help me to find where I'm doing something wrong?
(Plus: I'm using the laravel HTML Form Facades to generate this form)
Update the class from-group to form-group.
Init bootstrapValidator instance by the following code.
$(function () {
$("#your form id").bootstrapValidator();
);