How to get null values in textboxes in JQuery? - javascript

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("");
});

Related

Display dialog on client-side before form is submitted

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.

How to replace information in a form using jQuery on submit

Here is my form,
<div id="myForm">
<form method="post" id="contact-form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<div class="row uniform">
<div class="6u 12u$(medium)">
<input type="text" name="fullname" id="fullname" value="" placeholder="Enter your full name" required />
</div>
<div class="6u 12u$(medium)">
<input type="email" name="email" id="email" value="" placeholder="enter your email address" required />
</div>
<div class="6u 12u$(medium)">
<textarea name="comment" id="comment" value="" placeholder="Enter your message" ></textarea>
</div>
<div class="6u 12u$">
<ul class="actions">
<li><input type="submit" value="Submit" class="special" /></li>
</ul>
</div>
</div>
</form>
</div>
I want to replace form with, thank you for submitting on selecting the submit button, at the moment It just refreshes the page and does not replace the form, I don't want it to refresh the page I want it to just submit and fade in a message saying thank you for submitting your details.
here is my jquery
<script>
$("#contact-form").submit(function(){
$("#myForm").html("thank you for submitting your details.");
});
</script>
Please can you help?
We have to create a ajax call in order to submit without refreshing the page:
$("#contact-form").submit(function(e) {
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize());
$("#myForm").html("thank you for submitting your details.");
});
https://jsfiddle.net/u2gyocj7/1/
Take a look in the network tab to display the POST data
In that case you will want to look at using ajax form. If you submit as it is then it will post back and refresh the page. Ajax will post the data without changing anything on the page.
http://api.jquery.com/jquery.post/
jQuery AJAX submit form
Then, once the data has been sent you can manipulate the DOM as you wish. This will also allow you to show different messages based on whether the data was saved correctly or not, if done correctly.

Stop New Tab From Opening

I'm using mailchimp to create a signup sheet and every time the submit button is pressed, a new tab will open that confirms your subscription to the mailchimp email list. I want it to run as a sort of background process where no new tab is opened at all but the form is still submitted. Here is the code I currently have with MailChimp:
div id="mc_embed_signup">
<form action="//standrtech.us11.list-manage.com/subscribe/post?u=c330585c1144a0dd4bfd6d0df&id=b7e663bdf4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2></h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!--real people should not fill this in and expect good things - do not remove this or risk form bot signup-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_c330585c1144a0dd4bfd6d0df_b7e663bdf4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Get Early Access" name="subscribe" id="mc-embedded-subscribe" class="button" onclick="submission();"></div>
</div>
</form>
I know I am a little too late for this, but I have found the solution for future references.
For 'classic' form only
Looks like the HTML code is not copied properly. In the mailchimp embed form dashboard, look for the scripts after the outer div, the one containing the form, these scripts will validate your form. My embed form has two scripts after the outer div :
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
and
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
second script may vary depending upon your form fields, but I think you definitely need to add the mc-validate.js to resolve this issue.
Hope this helps.
Remove target="_blank" from your form tag.
in my case, it is because of the form validation script. i removed the script and do a simple email input text validation on my own.

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.

HTML single-page Landing page with input fields that transition

My landing page has two steps (one for selecting an option from a dropdown menu and pressing 'send', and one for entering your email and pressing 'send'). These steps appear to be controlled either by javascript or html5, something I am not used to. I need to add a third "step" to the system.
Here is the site link: you will see that after selecting an answer and entering something in the email field you are back to the first selection.
the section of code in index.html appears like this:
'<!-- Step 1 -->
<div class="steps step-1">
<p>STEP 1: Answer this question</p>
<form action="#" method="post">
<div class="select-holder">
<label>Who is giving this away the awesome thing that you're about to download?</label>
<div class="select-wrap">
<select name="" >
<option selected="selected" value="Select Your Answer">Select Your Answer</option>
<option value="LeadBrite, Duh!">LeadBrite, Duh!</option>
<option value="Lady Gaga">Lady Gaga</option>
<option value="Santa Claus">Santa Claus</option>
</select>
</div>
</div>
<input type="submit" value="Submit Answer" class="submit-button" />
</form>
<div class="contest-ends">
<p><span>Contest Ends</span></p>
<p>Month 00, 00:00 AAA</p>
</div>
</div>
<!-- END Step 1 -->
<!-- Step 2 -->
<div class="steps step-2">
<p>STEP 2: Your details</p>
<form action="#" method="post">
<input type="text" class="field" value="Enter your email address" title="Enter your email address" />
<input type="submit" value="Send" class="send" />
</form>
<div class="contest-ends">
<p><span>Contest Ends</span></p>
<p>Month 00, 00:00 AAA</p>
</div>
</div>
<!-- END Step 2 -->'
As I said, I want to add a step three but I do not know how to move forward. The source files include an HTML5 file and others that I believe I'd have to connect step-3 to in order for it to function properly.
I appreciate any help. Thanks.
Hoping to simplify this by creating a sample to work with. If you check out http://jsfiddle.net/fgAUQ/, you can see the form listening for the submit during the email question.
$(document).on('submit', 'form', function (e) {
// Check email address
// if email address ok
$('.step-2').hide();
$('.step-3').fadeIn(800);
e.preventDefault();
// else
// alert
// e.preventDefault();
// end if
});
You'll still need to follow this through with storing / processing the email and handling the form upload.

Categories

Resources