Not all attributes binding to ng-model - javascript

I have a form in an app I'm building that allows a user to submit their name and email. This form is duplicated on two tabs (on the same page). Here's the basic form:
<form class="user-submit-form" ng-submit="userSubmit(user)" ng-hide="userSubmitted">
<h4><strong>FOR THE CHANCE TO HAVE YOUR STORY DRAWN, TELL US YOUR NAME AND CONTACT METHOD.</strong></h4>
<span>Entries limited to one caption per cartoon per person.</span>
<br>
<input type="text" title="Name required" ng-model="user.name" size="32" placeholder="Name" required>
<input type="email" title="Email required" ng-model="user.email" size="32" placeholder="E-mail Address" required>
<br>
<input type="checkbox" title="Must agree to Terms & Conditions" class="terms"
required><span>I have read and accept the Terms & Conditions</span>
<br>
<input class="user-submit-stories user-submit" type="image" src="images/submit_name.png">
</form>
When I make changes to the user.name attribute the both of the forms update the value. However, when I update the user.email attribute the other form's value is not updated. I've also noticed that when I try to explicitly define the model's attributes in the related controller, the change is not made in the form for user.email
What could be causing a situation where one attribute is properly binded but the other is not?

Related

How to calculate price when optional checkbox is clicked(using paypal payment form) [duplicate]

This question already has an answer here:
How to change the textbox value from checkbox
(1 answer)
Closed 6 years ago.
I have built an order form in which the user would enter in a company name, last name, email and an address and an optional checkbox for shipping priced at $19.99. I downloaded the paypal payment form module for my dreamweaver cs5 program which converts the form into a paypal form.
The nice thing about this program is that it automatically creates a mysql database with all the input fields when a person clicks the "pay now" button It also generates the files automatically in a folder called "PPPaymentForm" which i then upload in the root of my site and gives me a backend as well so i can monitor all the payment transactions.
So back to my original issue, i need some way so that if a person decides to click the checkbox which is set at $19.99, that it will automatically add to the price which is set in an hidden input named "hdwppamount" where the value is set to $175.00. So therefor if the shipping option is clicked, the person would click the "Pay Now" button and would be redirected to the paypal payment page, with the new calculated price at $194.99.
I am not proficient with javascript or php, and tried many functions myself but nothing worked. Could someone help me with this please?
Thank You
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="firstname" required>
<input placeholder="Last Name" type="text" name="lastname" required>
<input placeholder="Email" type="email" name="email" required>
<input placeholder="Address" type="text" name="address" required>
<input type="checkbox" id="shipping" name='shipping' />$optional Shipping($19.99)
<button name="submit" type="submit">Pay Now</button>
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic 175 Plan">
<input type="hidden" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="">
<input type="hidden" name="hdwemail" id="hdwemail" value="email+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
</form>
First, we detect when the shipping checkbox is changed, then we check to see if it is in a checked state. If it is in a checked state, we add the shipping cost to the hidden text box. We also need to reset the value if the user changes their mind about shipping so you need a basic IF ELSE condition on it.
Try this:
$('#shipping').change(function(){
var hdwppamount = Number($("#hdwppamount").val())
var shippingcost = 19.99;
if (this.checked) {
$("#hdwppamount").val(hdwppamount+shippingcost)
} else {
$("#hdwppamount").val(hdwppamount-shippingcost)
}
})
JSFiddle: https://jsfiddle.net/rdawkins/8qrm3mf1/14/

HTML validations from javascript

<input type="text" id="newFname" pattern="^[a-zA-z0-9 _-]{2,}$" required placeholder="First Name" />
<input type="text" id="newLname" pattern="^[a-zA-z0-9 _-]{2,}$" required placeholder="Last Name"/>
Is it possible to disable html validation on second input without modifying pattern or required attributes?
What you could do, put the inputs in separate forms and add the novalidate attribute to the second form.
Check this page for more information.

Angular JS get error to show after user highlights input field and doesnt enter anything

I have some Angular JS validation working on my wizard steps app and errors appear when the user enters a character in the input field and removes it. I am wondering how do I get the error to show after the user is on the input field and does not enter anything? (They tab onto the field and tab off without entering anything) I hope this makes sense....
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && !user.validate.step1.name.$pristine">Required Field
</span>
Use ng-blur:
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" ng-blur="blur=true" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && blur">Required Field
</span>
The easiest/best way would probably by marking the control as dirty by using ng-blur:
<input class="form-control" type="text" name="name" ng-model="user.name" required ng-blur="user.validate.step1.name.$dirty = true"/>
The next 1.3 beta version(beta 12) will have a $touched you can use to check for it, but none of the current versions have that yet.

Mixpanel track event when check box is checked

I am using mixpanel JS for metrics, and I have to capture an event for the form when user tries to submit a form and there is check box which allows user to signup for newsletter . I want to track users who signup and check the box, and no idea as how to approach this problem. Thats how my form looks like
<form id="form_send_email" novalidate="novalidate">
<input type="text" name="first_name" id="first_name" placeholder="First Name"/>
<input type="text" name="last_name" id="last_name" placeholder="Last Name"/>
<input type="text" name="email" id="email" placeholder="Email"/>
<br/>
<input type="checkbox" name="learn_more" id="learn_more" class="css-checkbox" checked="checked"/>
<label for="learn_more" id="learn_more_label" class="css-label">Learn more about our products and sign up</label>
</form>
Usually one want to do some client side validation of forms before actually sending them to the server. There are loads of JS libs that can help you out, jQuery for example.
Then if all data looks ok, send the track request to mixpanel and submit the form.
Mixpanel have client libs for quite some languages, you might want to send the the track request from your server?

How to write a generic error handler for AngularJS Forms

This is a follow on question for this question:
Server-side validation form Angular.js
So using that answer you could write some HTML in a template that would display a specific error for each error you give $setValidity. For example here is one:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.required">Required</span>
However, if I wanted to add one for last names must be 4 or more characters long I'd have:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.minRequired">Last name must be at least 4 characters long</span>
My question is how could I write a generic handler for all errors on a field. Something like:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.required">{{myProfile.lastName.$error.required}}</span>
Is that possible?
Do you mean that you just want to indicate the validity of the form element?
Then, you can do:
<span ng-show="myProfile.lastName.$invalid">Input field is invalid.</span>
If you need to be more specific, you can use ng-repeat to iterate through
myProfile.lastName.$error object and display all the errors.
In this case, you'll have to have some error-name to error-message translation for
readability.

Categories