Form is submitting and redirecting without information - forms

I'm really terrible with forms, so any help you can provide would be great.
This form initially had a modal that came up on submission, but I had to change it to a redirect. Now it's redirect without any data being entered.
<form id="contact-form" method="post" onsubmit="return redirect()">
<div class="contact-form-loader"></div>
<fieldset>
<div class="contact-form_top-section">
<label class="name">
<input type="text" name="name" placeholder="Parent's Name:" value="" data-constraints="#Required #JustLetters">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid name.</span>
</label>
<label class="email">
<input type="text" name="email" placeholder="Parent's E-mail:" value="" data-constraints="#Required #Email">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid email.</span>
</label>
<label class="phone">
<input type="text" name="phone" placeholder="Parent's Cellphone:" value="" data-constraints="#JustNumbers">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid phone.</span>
</label>
<label class="message">
<input type="text" name="message" placeholder="Tell us about your children:" value="" data-constraints="#Required">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*The message is too short.</span>
</label>
</div>
<div class="contact-form_bottom-section">
Clear
<input type="submit" class="btn btn__hover bg-color-6" value="Send">
</div>
</fieldset>
The .js page has a ton of data, and I'm not exactly sure which part you need. Here's the first part.
;(function($){
$.fn.TMForm=function(opt){
return this.each(TMForm)
function TMForm(){
var form=$(this)
opt=$.extend({
okClass:'ok'
,emptyClass:'empty'
,invalidClass:'invalid'
,successClass:'success'
,responseErrorClass:'response-error'
,responseMessageClass:'response-message'
,processingClass:'processing'
,onceVerifiedClass:'once-verified'
,mailHandlerURL:'bat/MailHandler.php'
,successShowDelay:'4000'
,stripHTML:true
,recaptchaPublicKey:''
,capchaTheme:'clean'
},opt)
init()
function init(){
form
.on('submit',formSubmit)
.on('reset',formReset)
.on('focus','[data-constraints]',function(){
$(this).parents('label').removeClass(opt.emptyClass)
})
.on('blur','[data-constraints]:not(.once-verified)',function(){
$(this)
.addClass(opt.onceVerifiedClass)
.trigger('validate.form')
})
.on('keyup','[data-constraints].once-verified',function(){
$(this).trigger('validate.form')
})
.on('keydown','input',function(e){
var $this=$(this)
,next=$this.parents('label').next('label').find('input,textarea')
if(e.keyCode===13)
if(next.length)
next.focus()
else
form.submit()
})
.on('keydown','textarea',function(e){
if(e.keyCode===13&&e.ctrlKey)
$(this).parents('label').next('label').find('input,textarea').focus()
})
.on('change','input[type="file"]',function(){
$(this).parents('label').next('label').find('input,textarea').focus()
})
.attr({
method:'POST'
,action:opt.mailHandlerURL
})

Your best bet is to put the redirect function at the end of the formSubmit function which should be somewhere in your JS file. By doing what you did your form never gets to hit the 'formSubmit' function which I assume handles the data.

Related

Bootstrap submit button won't work

I have the below code where I'm trying to submit data from a form into my back-end. Whenever I press the button it doesn't do anything and it's supposed to route to the specified place. I have looked at several examples and still hasn't worked. Below is my form. Any suggestions?
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h1>Sign Up</h1>
<form action ="/adduser" method="POST" id="adduser">
<fieldset class="form-group">
<label for="InputUsername"> Username </label>
<input type="text" class="form-control" name="username" id="InputUsername" placeholder="Enter username">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email"id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password"id="exampleInputPassword1" placeholder="Password">
</fieldset>
<button class="btn btn-default" form="signup" type="submit">Sign up</button>
</form>
</div>
</dv>
</div>
Here is my route
#app.route('/adduser', methods=["POST"])
def adduser():
print(request.form, file=sys.stderr)
username = request.form['username']
password = request.form['password']
email = request.form['email']
models.User.create_user(email, password, username)
login_user(user)
return redirect_url('index.html')
Your button has a form attribute of signup but your form has an id of adduser, so the button does not belong to the form. Try changing these values to match.

jQuery mobile form submit without triggering page Naviagion

How can I navigate to a new page without triggering the jQuery mobile form handling, which creates a ajax request and then loads the page with it's speczial funcationallity (I don't know the name for it)
Add this attribute to the form:
data-ajax="false"
Example:
<form action="demo.php" method="post" id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
</form>

Whats wrong with my contact form?

Could someone please take a look at my website's code and tell me why my contact form isnt working?
Here are the relevant portions of code:
From the contact.html file:
<h3 class="indent-bot2">Contact Form</h3>
<form action="#" id="contact-form">
<div class="success"> Contact form submitted!<br>
<strong>We will be in touch soon.</strong> </div>
<fieldset>
<label class="name">
<input type="text" value="Enter Your Name:">
<span class="error">*This is not a valid name.</span>
<span class="empty">*This field is required.</span> </label>
<label class="email">
<input type="text" value="Enter Your E-mail:">
<span class="error">*This is not a valid email address.</span>
<span class="empty">*This field is required.</span> </label>
<label class="phone">
<input type="tel" value="Enter Your Phone:">
<span class="error">*This is not a valid phone number.</span>
<span class="empty">*This field is required.</span> </label>
<label class="message">
<textarea>Enter Your Message:</textarea>
<span class="error">*The message is too short.</span>
<span class="empty">*This field is required.</span> </label>
<div class="buttons-wrapper">
<a class="button" data-type="reset">Clear</a>
<a class="button" data-type="submit">Send</a>
</div>
</fieldset>
</form>
Also from the contact.html file:
<script type="text/javascript">
$(window).load(function(){
$('.slider')._TMS({
duration:800,
easing:'easeInCirc',
preset:'zabor',
pagination:false,
slideshow:7000,
banners:'fromTop',
nextBu:'.next',
prevBu:'.prev',
waitBannerAnimation:false,
pauseOnHover:true,
beforeAnimation:function(){
$('.slider .prev')
.stop()
.animate({top:'425px'},300,'easeOutCirc')
$('.slider .next')
.stop()
.animate({top:'425px'},300,'easeOutCirc')
},
afterAnimation:function(){
$('.slider .prev')
.css({top:'425px'})
.stop()
.animate({top:'327px'},300,'easeOutCirc')
$('.slider .next')
.css({top:'425px'})
.stop()
.animate({top:'327px'},300,'easeOutCirc')
}
})
$('#contact-form').forms({
ownerEmail:'info#dohatutor.com'
})
});
</script>
I think this is the piece of code that links to a javascript file which in turn calls "mailhandler.php".
<form action="some script" METHOD="POST" ENCTYPE="multipart/form-data"></form>
action="php or asp or pl script for processing form"
You didn't specify where the form should post to - what is the name of the script that you want to post this form to?
Now it says:
form action="#"
And it should say something like:
form action="contact.php"

I cant get my mailto contact form to work

I have tried to make a contact form in a modal window. I thought I had done everything correctly but when I click send, I don't receive the email. Can anybody please show me where I'm going wrong?
Thanks very much in advance. Merry Xmas!
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Contact McGregor Beauty</h3>
</div>
<div class="modal-body">
<form id="contact" method="post" action="mailto:aka_pipsqueak#msn.com">
Your Name <input class="input-xlarge" type="text" placeholder="Please write your name here" required>
<br />
Your Email <input class="input-xlarge" type="email" placeholder="Please enter your email address here" required><br />
Phone(Optional) <input class="input-large" type="number" placeholder="Add a telephone number"><hr />
<label><strong>Treatments of Interest</strong></label>
<label class="checkbox">
<input type="checkbox" value="Waxing & Tinting">Waxing & Tinting
</label>
<label class="checkbox">
<input type="checkbox" value="Massage">Massage
</label>
<label class="checkbox">
<input type="checkbox" value="Reflexology">Reflexology
</label>
<label class="checkbox">
<input type="checkbox" value="Manicure/Pedicure">Manicure & Pedicure
</label>
<label class="checkbox">
<input type="checkbox" value="MLD">MLD
</label>
<br />
<label><strong>Your Questions/Comments</strong></label>
<textarea rows="2" style="width:500px" type="text" required></textarea>
<div class="modal-footer">
<button class="btn btn-primary" type="submit" data-dismiss="modal" aria-hidden="true">Send</button>
</div>
</form>
what mail server are you using?
where is the server side code used to handle the http request of the form?
Just having a form in html isn't going to do anything, and an action of mailto: is not correct, nor would you want to do this because this email address can be seen in the markup and will be spammed until you close it.
what programming language are you planning to use?
Here's a basic example you can follow using php:
http://www.w3schools.com/php/php_mail.asp

Zend_Form_Element_Checkbox issue

I want to achieve the example html markup using Zend_Form_Element_Checkbox. Encounter problems, however, for example page_actions[]. I want to have this in a attribute and receive array in request. I know I must do it in the init of the form, but I lack knowledge of Zend Framework. I tried several options. For example, this:
// In for loop in init method
$element = new Zend_Form_Element_Checkbox('test['.$i.']');
$element->setIsArray(true)->setBelongsTo('checkbox_name');
$this->addElement($element);
This is the markup I would like to achieve:-
<div>
<div>
Some bold message for this group
</div>
<div>
<span>
<input type="checkbox" id="qf_18" value="12" name="page_actions[]"/><label for="qf_18">Test 18</label><br/>
<input type="checkbox" id="qf_20" value="13" name="page_actions[]"/><label for="qf_20">Test 20</label><br/>
<input type="checkbox" id="qf_22" value="14" name="page_actions[]"/><label for="qf_22">Test 22</label><br/>
<input type="checkbox" id="qf_24" value="15" name="page_actions[]"/><label for="qf_24">Test 24</label><br/>
<input type="checkbox" id="qf_26" value="16" name="page_actions[]"/><label for="qf_26">Test 26</label>
</span>
</div>
</div>
<div>
<div style="font-weight: bold;">
Some bold message for this other group
</div>
<div>
<span>
<input type="checkbox" id="qf_28" value="17" name="page_actions[]"/><label for="qf_28">Test 28</label><br/>
<input type="checkbox" id="qf_30" value="18" name="page_actions[]"/><label for="qf_30">Test 30</label><br/>
<input type="checkbox" id="qf_32" value="19" name="page_actions[]"/><label for="qf_32">Test 32</label><br/>
<input type="checkbox" id="qf_34" value="20" name="page_actions[]"/><label for="qf_34">Test 34</label><br/>
<input type="checkbox" id="qf_36" value="21" name="page_actions[]"/><label for="qf_36">Test 35</label>
</span>
</div>
</div>
You can use view script to do that. I think zend form decorator is not support to this kind of form.