I'm using bootstrap 3 to build a contact form and I have the following problem: If submitted empty, the form submits to the same page. If i enter values in the boxes, it will redirect to the homepage. This problem only occurs if I'm using a name="something" attribute for the input boxes. Does anyone have any idea why? HTML is this:
<form class="form" method="post" action="http://localhost/contact">
<div class="form-group">
<label for="name">Nume</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Numele tau...">
</div>
<div class="form-group">
<label for="email">Adresa email</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Adresa email...">
</div>
<div class="form-group">
<label for="subject">Subiect</label>
<input type="text" name="subject" class="form-control" id="subject" placeholder="Subiectul mesajului...">
</div>
<div class="form-group">
<label for="message">Mesaj</label>
<textarea class="form-control" name="message" id="message" rows="5" placeholder="Mesajul tau aici..."></textarea>
</div>
<button type="submit" class="btn btn-default">Trimite mesajul!</button>
</form>
You need an action to actually submit the form. The form won't do anything until you add an action to process the form and email it.
<form class="form-horizontal" method="post" action="contactform.php">
I use a variation of this form, http://www.html-form-guide.com/email-form/php-form-to-email.html
Related
I have one html page in which I am providing one registration form for user like this:
when user clicks on the submit button I want the user to redirect to https://domainname.com with the form variables as query parameters and then reset the form in html file.
But I can only redirect the user to some other site but can not reset the form.
Here is my code:
<section class="green-bg">
<div class="container wide">
<div class="row joinnow-div" id="joinnow">
<!-- Form styles-->
<h3>Join us today</h3>
<form action="https://domainname.com/" target="_blank" id="joinnow-form">
<label for="businessname">Your business's name</label>
<input type="text" id="businessname" name="businessname" placeholder="Business Name" required>
<label for="phonenumber">Contact number</label>
<input type="tel" id="phonenumber" name="phonenumber" placeholder="eg. 07700100100" required>
<label for="address">Your business's street address</label>
<textarea type="text" id="address" name="address" placeholder="eg. 123 Business street" required></textarea>
<label for="emailaddress">Email address</label>
<input type="email" id="emailaddress" name="emailaddress" placeholder="Eg. yourmail#email.com" required>
<a href="https://domainname.com/" target="_blank" >Already registered?</h3><br/><br/>
<input type="submit" value="Submit">
</form>
<!-- -->
</div>
</div>
</section>
when I click the submit button it redirect the user to https://domainname.com?businessname=&phonenumber=&email=&address= which is ok but I want to reset the form after redirecting.
Any Idea how can I attempt this?
Ok this works:
<form action="" target="_blank" onsubmit=" setTimeout(() => this.reset())">
<input name="hello">
<input type="submit">
</form>
I have the following form:
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" required>
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" required>
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
I built a little popup that says thanks for signing up that should come up after the user has entered his data. However at the moment I have the problem that it also comes up when the user clicks the register button without entering any data (meaning the request does not fire due to the required tags in the fields). How do I make the popup only come up when the form is actually submitted?
Jquery for the popup:
$(window).load(function() {
$(".form-button").click(function() {
$('.popup').show();
});
});
I think you might be looking for the .submit event.
Using your example
$('.register-form').submit(function(e){
e.preventDefault(); // Stop the form submitting
$('.popup').show(); // Show the popup
e.currentTarget.submit(); // Now submit it!
});
Simply define ids on your each input to validate if both fields have value in it or not. Do like this
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" id="text1">
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" id="text2">
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
$(window).load(function() {
$(".form-button").click(function() {
let input1 = $('#text1').val();
let input2 = $('#input2').val();
if(input1 && input2){
//make your http req and then after getting your response open your popup
$('.popup').show();
}
});
});
I want to submit form but form submit button does not work,
Please Guide me. I want to submit my form using javascript. Form validation is working fine but I am unable to submit my form. I am new user. If any one help me to submit this form.
I have a code:
});
<link href="https://jqueryvalidation.org/files/demo/site-demos.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="page-content">
<div class="form-v4-content">
<form class="form-detail" action="abc.html" method="post" id="myform">
<h2>REGISTER FORM</h2>
<div class="form-group">
<div class="form-row form-row-1">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" class="input-text">
</div>
<div class="form-row form-row-1">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name" class="input-text">
</div>
</div>
<div class="form-row">
<label for="your_email">Your Email</label>
<input type="text" name="your_email" id="your_email" class="input-text" required pattern="[^#]+#[^#]+.[a-zA-Z]{2,6}">
</div>
<div class="form-group">
<div class="form-row form-row-1 ">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="input-text" required>
</div>
<div class="form-row form-row-1">
<label for="comfirm-password">Comfirm Password</label>
<input type="password" name="comfirm_password" id="comfirm_password" class="input-text" required>
</div>
</div>
<div class="form-checkbox">
<label class="container"><p>I agree to the Terms and Conditions</p>
<input type="checkbox" name="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="form-row-last">
<input type="submit" name="register" class="register" value="Register">
</div>
</form>
</div>
</div>
I just want to submit my form. I don't know what is the problem
The form doesn't submit because you told it not to.
jQuery.validator.setDefaults({
debug: true,
From the docs:
debug (default: false)
Type: Boolean
Enables debug mode. If true, the form is not submitted...
I am using django registration-redux for user registration.
When i enter a same userid it shows error and the clears all the input fields of the form. how to prevent that error should occurs but input fields shouldn't get cleared.
<form method="POST" role="form" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label class="col-sm-2 lab" for="id_username">Username *</label>
<div class="col-sm-10">
<input name="username" id='id_username' class='form-control' placeholder='Username' minlength="5" maxlength="15" type='text' required></div>
</div>
<div class="form-group">
<label class="col-sm-2 lab" for="id_email">E-Mail *</label>
<div class="col-sm-10" >
<input class='form-control' name="email" id='id_email' placeholder='user#mydomain.com' pattern="(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.com$)|(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.org$)|(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.co\.in$)" maxlength="200" type='email' required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 lab">Password *</label>
<div class="col-sm-10">
<input class="form-control" name="password1" id="id_password1" placeholder="Password" minlength="8" maxlength="15" type="password" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 lab2">Password Confirmation *</label>
<div class="col-sm-10">
<input class="form-control" name="password2" id="id_password2" placeholder="Confirm Password" minlength="8" maxlength="15" type="password" required>
</div>
</div>
<button type="submit" value= "register">Register</button>
</form>
should i use java script or what should help me?
Ideally your form should retain the entries. From what I can infer, it seems that you might not in your template you are not making use of form passed by the view.
Here is an example on how you can update the template:
<form action="/action/" method="POST">
{% csrf_token %}
<div class="form">
<br />
{{ form.username}}
<br />
<input type="submit" name="submit">
</div>
</form>
Now in your action view you can easily pass the variables in your form. Something like :
def action(request):
if request.method == "POST":
form = CustomForm(request.POST)
if form.is_valid():
form.save()
else:
print("form.errors:", form.errors)
else:
form = CustomForm()
ResponseDict = {"username": username}
return render_to_response("UserName.html", ResponseDict,
context_instance = RequestContext(request))
For more reference - Displaying form using template
The main essence is in you going to your view and then making the necessary calls. Please do note that wherever you are rendering the html you are also passing the form values.
Hope this helps.
I have a HTML form with some form fields.
My Markup is something similar to this -
<form>
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
My question is, I want to keep second form field inactively (in this form it is `email field) till first form field is correctly fill out. Inactive mean user cannot type or paste any thing there.
Can anybody tell is this possible in jquery, if so tell me how?
Hope someone will guide me to correct path.
Thank you.
Add disabled attribute to email and enable/disable on name keyup
HTML
<form>
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
jQuery
$(function () {
$('input.name').keyup(function () {
if ($(this).val()) {
$('input.email').removeAttr('disabled');
} else {
$('input.email').attr('disabled', true);
}
});
});
Fiddle
http://jsfiddle.net/m2h5fc9b/