I'm using angular js. When I have a snippet that I put in ng-include instead of outright writing the html to the same file, the former doesn't seem to pick up my bindings for my input fields.
In other words, if the following snippet:
<form name="pickupForm" ng-submit="completeCheckoutPickup()" novalidate>
<div class="row checkout-input">
<div class="col-sm-12">
<div class="title">
PICK UP DATE & TIME
</div>
<span class="glyphicon glyphicon-calendar date-icon-color"></span>
<input type="date" ng-model="userDate" required>
<span class="glyphicon glyphicon-time date-icon-color"></span>
<input type="time" ng-model="userTime" required>
</div>
</div>
</form>
is included as
<div ng-include src="'/templates/account/checkout/checkout.pickup.desktop.html'"></div>
The angularjs bindings for the ng-model stop working.
Any ideas?
enter code here
Related
I'm using struts2 in my project and I'm trying to add bootstrap responsive features.
I have a form with validation (via xml and class validation())
Now the form look like this:
<s:form action="Welcome" method="post" validate="true">
<div class="form-group row">
<div >
<small id="passwordHelp" class="text-danger">Must be 8-20 characters long.</small>
</div>
<label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
<div >
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
</div>
</div>
</s:form>
the problem is that the error message is shown in any case (even at the first call of the jsp with the form (befor the submit itself)
What am I doing wrong?
I'm using VMware's clarity-seed repo and I'm attempting to build an input form that prompts for additional related information. For example, the form has a pull down list selection for authentication type. Depending on the type I may need more information and that information is specific to the type. "None" auth needs no more information. "Basic" requires user and password combo while "OAuth" wants an API token.
I tried using ng-switch with no luck - the text is showing for both options despite the selection (I'm just using text for now and will add the sub-form details later).
I take it that my use of the form fields is wrong somehow, but I can't figure out why and how.
<form>
<section class="form-block">
<span>New Endpoint</span>
<div class="form-group">
<label for="endpoint.name" class="required">Name</label>
<input type="text" id="endpoint.name" size="45">
</div>
<div class="form-group">
<label for="endpoint.id">Description</label>
<input type="text" id="endpoint.id" size="45">
</div>
<div class="form-group">
<label for="endpoint.url" class="required">URL</label>
<input type="url" id="endpoint.url" placeholder="http://endpoint.co/api" size="35">
</div>
<div class="form-group">
<label for="endpoint.authType">Authentication</label>
<div class="select" class="required">
<select id="endpoint.authType">
<option>None</option>
<option>Basic</option>
<option>OAuth</option>
</select>
</div>
</div>
<div ng-switch="endpoint.authType">
<div ng-switch-when="Basic">
<h1>Another form for Basic credential set</h1>
</div>
<div ng-switch-when="OAuth">
<h1>Another form for OAuth token</h1>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</section>
You can use the new syntax for *ngIf - then ;else:
<div *ngIf="endpoint.authType === 'Basic'"; then basic; else auth>
<ng-template #basic>
<h1>Another form for Basic credential set</h1>
</ng-template>
<ng-template #auth>
<h1>Another form for OAuth token</h1>
</ng-template>
</div>
Docs
If you have more than two values, you can still use ngSwitch:
<div [ngSwitch]="conditionExpression">
<ng-template [ngSwitchCase]="case1Exp">...</ng-template>
<ng-template ngSwitchCase="case2LiteralString">...</ng-template>
<ng-template ngSwitchDefault>...</ng-template>
</div>
Docs
I am trying to fill out a form on a website using WWW::Mechanize but the form is embedded in a script, not the usual <form> tag
<script>
component_lang["ib4"] = {};
</script>
<script type="text/x-handlebars-template" id="ib4-tpl">
<form class="component component-form" id="input" enctype="multipart/form-data" method="post" action="/" >
<div class="input-group type-firstlast">
<div class="input-label">
<label>Your Name</label>
</div>
<div class="inputs columns">
<div class="column-2 column-first"><input type="text" name="first" placeholder="First Name" value=""></div>
<div class="column-2"><input type="text" name="last" placeholder="Last Name" value=""></div>
</div>
</div>
</form> </script>
<li id="ib4" class="form page-component-has-overflow"></li>
How would I use WWW::Mechanize to fill this form out? The mech-dump utility did not find any forms on the page.
WWW::Mechanize only works on the HTML, it has no Javascript support. For a Mechanize-like module with Javascript support, you have several options.
WWW::Mechanize::Firefox which lets you drive Firefox.
WWW::Scripter with WWW::Scripter::Plugin::JavaScript.
WWW::Selenium to interface to Selenium RC or Selenium::Remote::Driver to interface to Selenium Webdriver.
I'm a beginner trying to set up my first form with Zurb Foundation, and I'm not able to find in the documentation the info on how to actually pass the data. It's just a basic contact form with name/email/message that I'd like sent to my email once people click the Submit button... and I don't know how to do that.
I apologize for the simple question, your help is greatly appreciated.
Zurb foundation is front end frame work for website design and development , if you want to submit the form or do server communications, please read some basics,
HTML form and input : http://www.w3schools.com/html/html_forms.asp
Submitting HTML form using Jquery AJAX :
Submitting HTML form using Jquery AJAX
AJAX - Send a Request To a Server : http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
The HTML part:
<form action="form_contact_process.php" method="POST" name="contact" id="contact">
<fieldset>
<legend>Contact form</legend>
<div class="row collapse">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="row collapse">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="row collapse">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone">
</div>
<div class="row collapse">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
<div class="row collapse">
<input class="button small large-12" type="submit" value="Submit">
</div>
</fieldset>
</form>
Then over at form_contact_process.php:
<?php
$name = $_POST['name'];
...
echo $name;
I'm coding an email subscription form (api's proving a nightmare on their own) and I was wondering if it is possible to write a form across divs, as per below...
<div id="topsubscribe_label">STAY UP TO DATE, JOIN OUR MAILING LIST: </div>
<form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
<div id="subforminputs">
<input type="email" name="email" id="email" class="toptextinput" value="" placeholder="you#example.com"/><br />
</div>
<div id="topsubscribe_submit">
<input type="submit" id="topregisterButton" name="submit" class="textinput" value="Subscribe" />
</form>
</div>
Will this break the form? Is there another (simple) way to do this?
You can do this
<div>
<div>
<form>
</form>
</div>
</div>
You can also do this
<form>
<div>
</div>
<div>
</div>
</form>
But you cannot do this
<form>
<div>
</form>
</div>
Browser won't show any errors, you might have different output. Each browser handles these error diffrently.
This is acceptable:
<div>
<form>
<div><input /><input /></div>
<div><input /><input /></div>
</form>
</div>
This is not:
<div>
<form>
<input /><input />
</div>
<div>
<input /><input />
</form>
</div>
It may be worth noting that overlapping tags as in the 2nd example is invalid for all tags; not just form tags.
If you just want to group some fields, you can use fieldset element.