I have a view contain this form, I need to display this new user after clicking the save button on another page/view in the HTML table. Any help, please!
<form ng-submit="adduser()">
<label class="lbl" >First name:</label>
<input type="text" ng-model="newuser.fName"><br>
<label class="lbl" >Last name:</label>
<input type="text" ng-model="newuser.lName"><br>
<label class="lbl" >Age:</label>
<input type="number" ng-model="newuser.age"><br>
<label class="lbl" >Gender:</label><br>
<input type="radio" name="gender" value="Male" ng-model="newuser.selectVal"><label >Male</label> <input type="radio" name="gender" id="fml" value="Female" ng-model="newuser.selectVal"><label>Female</label><br>
<label class="lbl" >About user:</label><br>
<textarea ng-model="newuser.about" id="txtarea" ng-model="newuser.about"></textarea><br>
<button type="submit">Save</button>
<button id="clear">Clear all</button>
</form>
If you want to show the user data in next router page, You can take help of AngularJS service and AngularJS Factory By using them you can pass the data one page to another page
But
If you want to show the data that is completly next browser Tab then you can use $sessionStorage and $localStorage in angular
Also check this link
Related
Is it possible to check if an html element(form) has been rendered?
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Using React and Nextjs.
I think you can check it using window object.
Just check it like a vanilla javascript using window.document.getElementBy....
The Netlify site name is: https://southsidepaint-prototype.netlify.app
I am using React with Gatsby and Sass, all up to date with the latest versions.
I have a simple contact form on the contact page (’/contact’) that looks like this:
<form name="contact-form" method="POST" data-netlify="true" >
<input type="hidden" name="form-name" value="contact-form" />
<div className={ctSty.formGroup}>
<input name="name" type="text" placeholder="Name" required/>
</div>
<div className={ctSty.formGroup}>
<input name="email" type="email" placeholder="Email" required />
</div>
<div className={ctSty.formGroup}>
<input name="phone" type="tel" placeholder="Phone Number" required/>
</div>
<div className={ctSty.formGroup}>
<textarea name="message" placeholder="Write your message"></textarea>
</div>
<button type='submit' value="Submit">Send message</button>
</form>
Now this form above is submitting correctly, didn’t work with a honeypot or recaptcha but that’s ok. The problem is when I click to submit my other form which exists on a separate page (’/careers’), I receive no 404 errors, no warnings, nothing happens. I check the deploy log for warnings too, only had one warning: “warning undefined”; I’m not sure where this particular warning comes from but it existed before the forms were added, so I think that’s ok too. Netlify is able to see that I have a second form, I have the folders on my forms page but nothing is being submitted in spam or verified. I have scoured through the docs, videos and articles but cannot pin down a fix.
Things I have tried:
I have even reduced my second form down to three simple inputs, name, email and phone number and still the same result.
I have changed the name attribute in my form multiple times, cleared the cache on deploy.
changed the name from “form-name” in my
<input type="hidden" name="form-name" value="applicationsV2" />
Added an “onSubmit” to the form
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
The second form’s code is below:
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="applicationsV2" />
{/* FULL NAME */}
<div className={crSty.formGroup}>
<label for="name" required>
<span><CgAsterisk /></span> Full Name <br/>
<input name="Full_name" type="text" placeholder="e.g. Phillip Anthropy" required/>
</label>
</div>
{/* EMAIL ADRRESS */}
<div className={crSty.formGroup}>
<label for="email" required>
<span><CgAsterisk /></span> Email Address <br/>
<input name="Contact_email" type="email" placeholder="e.g. user#email.com" required />
</label>
</div>
{/* PHONE NUMBER */}
<div className={crSty.formGroup}>
<label for="phone" required>
<span><CgAsterisk /></span> Phone Number <br/>
<input name="Contact_phone" type="tel" placeholder="e.g. 555-0000" required/>
</label>
</div>
</form>
<div style={{textAlign:'center'}}>
<button type='submit' value="submit">SubmitApplication</button>
</div>
You have a typo in your second form (applicationV2). While in the form name appears applicationV2, in the value of the form-name field is applicationsV2. It should be:
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="applicationV2" />
Keep in mind that with your previous snippet your form was in a kind of limbo because there wasn't a match between forms names so, the data was sent but never caught by any Netlify form. Fixing the typo should fix your issue too.
For further logs, check the Network tab in the inspector tools to see whats Netlify returning in the form response.
I'm working on a angularjs project.
I'm in the process of integrating payment gateways. I'm stuck with the gateway submission.
Basically without angularjs, when a user clicks "Pay Now", the form submits the data to the gateway along with some hidden fields and takes the user directly to the payment gateway.
Whereas in angularjs, when the user clicks "Pay now", nothing happens.
I have the form in angularjs html file as follows.
<form action="payumbtn.action" method="post" name="payuForm" id="payuForm" style="display: block">
<input type="hidden" name="key" ng-model="payumbtn.merchant_key" />
<input type="hidden" name="hash" ng-model="payumbtn.hash"/>
<input type="hidden" name="txnid" ng-model="payumbtn.txnid" />
<input name="amount" type="hidden" ng-model="payumbtn.totalCost" />
<input type="hidden" name="firstname" id="firstname" ng-model="payumbtn.firstName" />
<input type="hidden" name="email" id="email" ng-model="payumbtn.email" />
<input type="hidden" name="phone" ng-model="payumbtn.mobile" />
<textarea name="productinfo" ng-hide="true">{{payumbtn.productinfo}}</textarea>
<input type="hidden" name="surl" ng-model="payumbtn.success_url" />
<input type="hidden" name="furl" ng-model="payumbtn.failure_url"/>
<input type="hidden" name="service_provider" value="payu_paisa"/>
<input type="hidden" name="lastname" id="lastname" ng-model="payumbtn.lastName" />
<input type="hidden" name="udf1" id="udf1" ng-model="payumbtn.udf1" />
<input type="hidden" name="udf2" id="udf2" ng-model="payumbtn.udf2" />
<input type="submit" value="Pay now"/>
</form>
Now the {{payumbtn.xxxx}} data is fetched from a previous post so don't bother it.
What I need
I need the form to submit the payment data to the gateway and redirect the user to the gateway.
can we have two forms with the same form name on the same page ?
will angular validation work properly for each form ?
For example
<form name="ajax">
<input type="text" name="fname" />
</form>
<form name="ajax">
<input type="text" name="fname" />
</form>
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
I used an AngularJS 1.2 application with a classic log-in/log-out function, ant it worked well.
When I log out, I make some basic operations then a redirection to log-in page ($state.go('app.login');)
However, the login page is loaded with the username and password already filled, which is pretty annoying :) It didn't occur with AngularJS 1.2.
Here is the login form:
<form name="LoginForm"
autocomplete="off"
ng-submit="validate_login(email, password)">
<div class="list">
<label class="item item-input my-item">
<input name="email"
ng-model="email"
type="email"
required
placeholder="E-mail">
</label>
<label class="item item-input my-item">
<input name="password"
ng-model="password"
type="password"
required
placeholder="Mot de passe">
</label>
</div>
<button class="button" type="submit">
Connexion
</button>
</form>
Here is the content of the log out controller:
$scope.logout_user = function() {
Auth.clearCredentials();
$state.go('app.login');
}
Thanks.