Develop Reference

Can't run script on form submit or button click

I am new to HTML, PHP and JavaScript, so expect mistakes.
I've got the form working and sending contents via email in my PHP file. That works. I'm using the Iframe to keep people on page and that seems to work as intended.
I'm trying to get a bootstrap alert to appear once the form is submitted. So it's collapsed by default and I simply want it to appear once the form is submitted or the button pressed. I cannot figure it out for the life of me. The form will submit as expected but the script does not seems to run with the alert.
The script is within the HTML doc:
<script>
function FormSubmit(){
alert("The form was submitted");
$('#AlertSuccess'.show('fade');
}
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;">
</iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
Please make me feel silly and point out the typo or logic mistake as I've been stuck on this for a while.

You have to hide the #AlertSuccess in default and on form submit, call the show() to display the message.
And you have forgot to close the bracket in $('#AlertSuccess'.show('fade');.
It should be
$('#AlertSuccess').show('fade');
function FormSubmit(){
$('#AlertSuccess').show('fade');
}
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AlertSuccess" class="alert alert-success collapse hidden">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;"></iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>

The browser console (F12) should tell you about the syntax error in you javascript. You forgot the closing ) in $('#AlertSuccess'.show('fade');.
$('#AlertSuccess').show('fade');

Error 1068: Property does not exist on type angular 2 (AOT)

I am new in angular 2, i am making a "User Register" form but it shows error in "Property does not exist on type" in Phone number Validation.
I am compiling in JIT and AOT.
In JIT compiler shows error message and run my user register form it is working properly. but when i compile with AOT shows compilation error.
I am reading the angular 2 form validation official doc here is the link Angular 2 form validation
Below is my Html Form and compiler Output
Html Form
<form class="ui large form" method="post" (ngSubmit)="onSubmit(registerForm.form.valid)" #registerForm="ngForm" novalidate>
<sm-loader [complete]="!formSubmited" class="inverted" text="Loading..."></sm-loader>
<div class="form-group">
<div class="col-md-12 img-bottom">
<div class="col-md-offset-4">
<img (click)="profileImage.click()" class="img img-responsive img-circle ui middle aligned tiny circular image profileImage"
[src]="profileImageSrc" />
<input class="form-control user-reg-img" (change)="fileChangeEvent($event)" type="file" accept="image/*" #profileImage [hidden]="true"
/>
</div>
<div class="col-md-12 image-padding">
<span class="user-reg-img-name" (click)="profileImage.click()">{{profileImageName}}</span>
</div>
</div>
</div>
<div class="form-group">
<label><strong>Signup with Email Address:</strong></label>
</div>
<div class="form-group">
<p class="success text-center">{{successMessage}}</p>
<p class="error text-center">{{errorMessage}}</p>
<div class="field">
<input type="text" name="name" placeholder="Name" [(ngModel)]="register.name" #name="ngModel" required class="form-control input-reg"
/>
<div [hidden]="name.valid || name.pristine" class="error text-left">
Name is required
</div>
</div>
</div>
<div class="form-group">
<div class="field">
<input class="form-control input-reg" type="email" name="email" placeholder="Email" [(ngModel)]="register.email" #email="ngModel"
required />
<div [hidden]="email.valid || email.pristine" class="error text-left">
Email is required
</div>
</div>
</div>
<div class="form-group">
<input type="text" id="mobile" class="form-control input-reg" required minlength="10" maxlength="10" name="mobile" [(ngModel)]="register.mobile"
placeholder="Phone Number" #mobile="ngModel" pattern="[0-9]+">
<div *ngIf="mobile.errors && (mobile.dirty || mobile.touched)">
<div class="error text-left" [hidden]="!mobile.errors.required">
Mobile Number is required
</div>
<div class="error text-left" [hidden]="!mobile.errors.minlength">
Mobile Number must be at least 10 characters long.
</div>
<div class="error text-left" [hidden]="!mobile.errors.maxlength">
Monile Number cannot be more than 10 characters long.
</div>
</div>
</div>
<div class="form-group">
<div class="field">
<input class="form-control input-reg" type="password" name="password" placeholder="Password" [(ngModel)]="register.password"
#password="ngModel" required />
<div [hidden]="password.valid || password.pristine" class="error text-left">
Password is required
</div>
</div>
</div>
<div class="form-group">
<input type="checkbox" name="isAgree" [(ngModel)]="register.isAgree" #isAgree="ngModel" required />
<label id="label-terms-cond">I Agree to Post Bucks Terms & Conditions</label>
<div [hidden]="!showTermsAgreeErrorMsg" class="error text-left">
Please agree the terms and conditions to continue
</div>
</div>
<div class="form-group">
<textarea rows="4" class="form-control font-small terms-cond-textarea" rows="7">You must follow any policies made available to you within the Services.</textarea>
</div>
<div class="form-group">
<button class="fluid yellow large ui button btn btn-block btn-warning reg-btn-submit" type="submit">Signup</button>
</div>
</form>
AOT Output
Thanks in advance
Vikram

It looks the JIT compiler will never check the type of mobile.errors, but AOT check it at compilation by looking this line :
<div *ngIf="mobile.errors && (mobile.dirty || mobile.touched)">
According that in this line mobile.errors is a boolean, you'll obtain your traces...
I can't reproduce this bug (version problem ?), but maybe the following code will fix it :
<div *ngIf="(mobile.errors != null) && (mobile.dirty || mobile.touched)">
There is an opened issue here : https://github.com/angular/angular/issues/11425

Here is my answer, there is actual problem of required which is not found under mobile.errors object. below is my single line code.
!mobile.errors['required']
If object field not found then we use as array in template.

Why do i get 2 default characters in my password input field

I have a little problem.... see here : http://prntscr.com/5anqx8 : here you can see what's wrong, there are 2 default characters in those inputs... this happends on multiple pages and there is nothing in the code what could be the problem. I use Firefox but have Chrome as well. On Chrome is doesn't show these characters which is kinda weird. How do I get rid of these Characters?? I've tried clearing all history cache and stuff, the whole list. I restarted Firefox.... nothing works. I'm not sure if this is really a programming question but you guys are really smart so... I'm asking you :p
Thanks a lot,
Mike
CODE :
<!-- Right Content -->
<div class="col-md-6">
<div class="panel-box">
<div class="titles">
<h4>Registratie Formulier</h4>
</div>
<!-- Form Contact -->
<form class="form-theme">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Uw gebruikersnaam</label>
<input type="text" required="required" value="" maxlength="100" class="form-control" name="Name" id="name">
</div>
<div class="col-md-6">
<label>Uw email</label>
<input type="email" required="required" value="" maxlength="100" class="form-control" name="Email" id="email">
</div>
<div class="col-md-6">
<label>Uw wachtwoord</label>
<input type="password" required="required" value="" maxlength="100" class="form-control" name="Password" id="password">
</div>
<div class="col-md-6">
<label>Herhaal uw wachtwoord</label>
<input type="password" required="required" maxlength="100" class="form-control" name="Password2" id="password2">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Registreer" class="btn btn-lg btn-primary">
</div>
</div>
</form>
<!-- End Form Contact -->
<div class="result"></div>
</div>
</div>
<!-- End Right Content -->

Some browsers can save form data like passwords, names and adresses.
When getting errors like this, remember to test in a private window/session to rule this out.

Fill form then slide left to reveal another with jquery

I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.

I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle

what is the UK Phone number validation expression and syntax?

function validateForm()
{
var x=document.forms["pageFeedbackSurvey"]["emailAddr"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid e-mail address");
return false;
}
var x=document.forms["pageFeedbackSurvey"]["comments"].value;
if (x==null || x=="")
{
alert("Please enter your feedback into the textbox before pressing 'Submit'");
return false;
}
var phone = document.getElementById("phone").value;
var pattern = /^([0-9]){7,15}$/;
if (pattern.test(phone))
{
alert("Your phone number : "+phone);
return true;
}
alert("It is not valid phone number!");
return false;
}
then the html
<form action="demo_form.asp" onsubmit="return validateForm()" method="post" name="pageFeedbackSurvey" id="pageFeedbackSurvey">
<div class="pod pageFeedback">
<h2>Feedback</h2>
<div class="body">
<fieldset>
<div class="surveyrow">
<p id="q1Wording">Did you find the information you were looking for on this page?</p>
<ul>
<li> <!-- input uses class, name and value for jquery -->
<input name="showdiv2" id="survey1_1" value="Yes" type="radio" class="showsubmit"/><label for="survey1_1">Yes</label>
</li>
<li>
<input name="showdiv" id="survey1_2" value="No" type="radio" class="showform"/><label for="survey1_2">Partially</label>
</li>
<li>
<input name="showdiv" id="survey1_3" value="No" type="radio" class="showform"/><label for="survey1_3">No</label>
</li>
</ul>
</div>
<div id="extraFields">
<div class="commentRow">
<div id="hiddentextarea"> <!-- hidden div -->
<label for="comments">How can we improve this page?</label>
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,300);"
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,300);" id="comments" rows="8" cols="19"></textarea>
<p>Character limit: <input readonly="readonly" type="text" name="countdown" id="countdown" size="3" value="300"></input></p>
</div>
</div> <!-- end hidden div -->
<div id="hiddenfields"> <!-- hidden div -->
<div class="emailContainer">
<div class="email" id="email">
<input type="text" name="emailAddr" id="emailAddr" size="22" value="Enter email address"/>
</div>
</div>
<div class="phoneContainer">
<div class="phone" id="phone">
<input type="text" name="phone" id="phone" type="phone" size="22" value="" />
</div>
</div>
<div id="pageFeedbackSubmit" class="button primary right">
<input class="arrow" onclick="validate();" value="Submit" type="submit" id="surveySubmit"/>
</div><!-- button -->
</div> <!-- end hidden div -->
<div class="clearBoth"></div>
</div>
</fieldset>
<div id="errormsg" class="errorMessage" style="display: none"></div>
<div id="thankYou" style="display:none">
<h3>Thank you</h3>
<p>We appreciate you taking the time to help us.</p>
</div>
I have been struggling to find the solution to validating the phone input either on type or on submit. I have the form hidden until a radio button is selected, the email and phone and text area are shown after radio is pressed and then I have it validate the text area for input and the email for syntax, now I need to validate the phone as a uk number, I managed to get the phone field to at least show a pop up alert for not being correct, but I cannot get it to accept any number in the current setup.
Can someone advise me of the correct way to have the phone validated along with the email and text area at same time as validateForm function is actioned on submit?
all below added/edited 23/08/2012
hey guys thanks for all the replys but I still cant get it to work, I have changed the id so there is not 2 phone id anymore, i changed showdiv2 to showdiv and i changed input type to tel before i inserted javascript telnumber check
I added the script from braemoor.co.uk/software/telnumbers.shtml to a javascript file in my header i then tried to tie in that javascript to the html, there was no html on that example so i have been guessing...
the validation function already in place for the email and the text area are initiated by
<form action="demo_form.asp" onsubmit="return validateForm()"
this works fine, what i want is for the telephone function also to be run on submit or before? I have tried adding it to the submit button as
<input class="arrow" onclick="checkUKTelephone();" value="Submit" type="submit" id="surveySubmit"/>
but it does not validate the phone it just forwards to the demo page after its validated email and text area ignoring the telephone number, obviously im not doing something right i dont have a great deal of experience with javascript as your may have noticed :)
anyone kind enough to tell me where im going wrong?

You have a problem in your HTML:
<div class="phoneContainer">
<div class="phone" id="phone">
<input type="text" name="phone" id="phone" type="phone" size="22" value="" />
</div>
</div>
As you can see, the id "phone" is there twice for the DIV and the INPUT.
So when you try to get the phone number you want to validate it returns "undefined", and that's what you validate instade of the actual phone number.
<div class="phoneContainer">
<div class="phone" id="phoneDiv"> <!-- change the name here -->
<input type="text" name="phone" id="phone" type="phone" size="22" value="" />
</div>
</div>
In an HTML document, two Elements can have the same name, but the id should be uniq.
For a complete example based on your code, check : https://docs.google.com/open?id=0B31oh4Omo6z0YjFmNHc2bjJCMk0