I have a form that works on its own using required attributes in each input to make sure the user inputs a value. IE:
<form id="myForm">
<div class="formcontainer">
<div class="formText">
First Name <span class="required">*</span>
</div>
<div class="formBox" id="test">
<input name="firstname" id="firstname" type="text" required />
</div>
<div class="formText">
Last Name <span class="required">*</span>
</div>
<div class="formBox"><input name="lastName" type="text" required /></div>
</div>
<div class="buttons">
<div class="formButton" id="submit">
<asp:Button onclick="btnRequestSampleSubmit" Text="Submit" runat="server" />
</div>
<div class="formButton" id="reset">
<input type="reset" value="Reset" tabindex="8"/>
</div>
</div>
</form>
To save space, I have about 6 other fields in the form, but wanted to give you an idea. When I submit the form, the page refreshes. All fine and dandy except I wanted to add in a .dialog box on the submit button so that it lets the user know that the form went through. So I added this:
$('.buttons #submit').on('click', function (e) {
$('#dialog').dialog({
position: { my: "center", at: "center", of: window },
});
$('#fade').show();
return false;
});
(#fade) is just an opacity box that fills the screen so when the user clicks on it, the box closes and the page will refresh. When I add in the bottom script, the validations work, but if the user hits enter or clicks on the submit button before everything is filled out, the form is submitted without having the rest of the input fields filled in. If I take out the submit JS here with the dialog, everything works fine, including validations, but I want to add the .dialog so the user knows the form is submitted properly. I can't figure out how to combine all this and make it work. Any suggestions?
Also this is done in c# so the btnRequestSampleSubmit is tying how the form is submitted to an email using the input fields.
Related
I have a angular js form and a button that, if pressed, shows the login fields (2 inputs for username and password, and 1 submit button) and another button that hides it.
I've written this simple code below that uses the ng-if directive. it is working fine only problem that after the use press on show login, the div is being shown but the form is being submitted automaticly (without the user press on the submit button).
someone knows why this is happening and how to fix it?
thanks
<form name="loginForm" width="70%">
<br>
<button ng-click="NewConversation=true" >show login</button>
<button ng-click="NewConversation=false" >hide login</button>
<br><br>
<div ng-if="NewConversation">
<input autocomplete="off" name="name" ng-model="name" required placeholder="Name">
<br>
<input autocomplete="off" name="room" ng-model="room" required placeholder="Room">
<br><br>
<button ng-click="updateMsg({name: name,room: room})">Start Talking!</button>
</div>
</form>
Every button inside form tag has default behavior - submit, to prevent it add type="button" to every button inside the form tag.
<button type="button" ng-click="NewConversation=true" >show login</button>
This should help
show login
this will prevent it from submitting automatically
I want to have password validation with Angular. However when I click my show password icon, if the password entered is wrong, it wont show the password the first time, the valdiation runs and the field goes red. Next time I click it shows password. How can I get around this? I tried an ng-click setting a variable to true when I click show, and then checking it in an ng-show before showing that red class, but it didnt work
<div id="registerFormFields">
<div class="loginField">
<input type="text" id="dn-login-modal-register-login" placeholder="Email" onblur="EZEMAIN.loginRegisterModal.loginCheck(this)" />
<span class="dn-login-modal-login-check fa"></span>
</div>
<p class="dn-login-modal-login-error" style="color:red;display:none;" data-ng-show="">#T("Invalid_Email", "Validation")</p>
<div class="passwordField">
<input type="password" id="dn-login-modal-register-password" placeholder="Password" onblur="EZEMAIN.loginRegisterModal.passwordCheck(this)" />
<span class="dn-login-modal-password-check fa"></span>
</div>
<p>#T("Register_PasswordPlaceholder", "Fields")</p>
</div>
I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.
I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.
The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.
Code: (Please say if I need to add more for the problem to be clearer).
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Thanks for looking.
Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I want it so it does not redirect anywhere but does do my JS function notification.
You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove
evt.preventDefault();
And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).
If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.
The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.
Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.
Actually I am having one registration form & one settings page. After entering some values in registration form when i change my page to settings page & if I come back to registration page I want all those values entered previously needs to be empty, but they are displayed as per the values entered by me.
The following code shows the full description of my code:
index.html
<section id="main" data-role="page">
<div data-role="content" class="mainScreen">
Register
Settings
</div>
<section id="Registration" data-role="page">
<div class = "registrationScreen">
Name <input type="text" id="name" name="name"> </input>
Age <input type="number" id="age" name="age"></input>
Mobile Number <input type="number" id="mobile" name="mobile"> </input>
Email Id <input type="email" id="email" name="email"> </input>
<input type="submit" id="register" name="register" value="Register"> </input>
</div>
</section>
<section id="settings" data-role="page">
<div data-role="content">
<p>.....</p>
</div>
</section>
As per the following code after entering some values in registration form when I change my page to settings page & if I come back to registration form all the values need to be empty. Can anyone please help me with this...
Waiting for your reply...
$(document).ready(function() {
$("input[type='text']").val(''); //sets blank to all textboxes of type input
});
Or if you want inputs of specific divs to be cleared then:
$(".registrationScreen :input:not(input[type='submit'])") { //except for submit
$(this).val('');
});
The following jQuery will clear all form elements that are children of the class registrationScreen:
$(".registrationScreen").children().each(function() {
$(this).val("");
});