I have a (Zend) form like this.
<form>
<select id=”select1”>
<option value=”1”>choice 1</option>
<option value=”2”>choice 2</option>
</select>
<div id=”adjust”>
<input type=”text” value=”choise3”></input>
<input type=”text” value=”choise4”></input>
</div>
</form>
When a user makes a choice in #select1 I want to replace te form fields in div #adjust with fields I construct from a query from a database (or a few partial forms). So the fields can be replaced by totally other fields and also more or less fields.
Replacing is no problem with eg. Jquery. But when they are filled, how does Zend form process them in a correct way (because I didn’t define the fields in the form). And when there are fields not passing the validators, how do they get back then with fault announcements
Related
I have a select field that starts with an option that says "Select Location" and want to force the user to choose something before submitting. I saw this article about disabling the Submit button with amp-bind until an option is available, but I would like to use the validation built into amp-form if at all possible.
I have tried using the pattern attribute on the <select> and <option> fields. I have used something similar to pattern="^((?!default).)*$" and multiple variations without any success.
<form
id="contactForm"
method="post"
action-xhr="https://valid.json/endpoint"
custom-validation-reporting="show-all-on-submit"
target="_top">
[...]
<select
id="formLocation"
name="location_id"
pattern="^((?!default).)*$"
required>
<option value="default" disabled selected>Select Location</option>
<option value="newyork">New York</option>
<option value="losangeles">Los Angeles</option>
</select>
<span
visible-when-invalid="patternMismatch"
required
validation-for="formLocation">
Please Choose a Location
</span>
[...]
<input
id="formSubmit"
type="submit"
value="Submit">
</form>
When I click Submit without changing the value, I expect the validation error to appear, but it doesn't. Is it possible to use this validation method with Select fields? Or will I have to just use the aforementioned amp-bind method?
I am assuming that you have added all required script js files form the form. I have provided an example of the rating.
AMP is providing two types of validation one which is for the blank value and another when the pattern does not match. You are missing the blank value validation.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<form action-xhr="here will be your url" custom-validation-reporting="show-all-on-submit" target="_top" method="post" class="wpcf7-form i-amphtml-form amp-form-dirty" novalidate="">
<label for="rating">Select rating</label>
<select name="rating" required="" class="user-invalid valueMissing" id="show-all-on-submit-select" aria-invalid="false">
<option value="">Rate…</option>
<option value="5">Perfect</option>
<option value="4">Good</option>
<option value="3">Average</option>
<option value="2">Not that bad</option>
<option value="1">Very poor</option>
</select>
// You are missing this one
<span visible-when-invalid="valueMissing" validation-for="show-all-on-submit-select">
Please select rating..!!
</span>
// This is for the pattern validation message. If the field is having the value but not does not match with patter this span will provide the validation
<span visible-when-invalid="patternMismatch" validation-for="show-all-on-submit-select">
Please select rating..!!
</span>
<input type="submit" name="submit" value="Submit" class="wpcf7-form-control wpcf7-submit button yellow-button">
</form>
Now, If you need the same solution in your code just put below span I think it must work for you:
<span
visible-when-invalid="valueMissing"
required
validation-for="formLocation"
validation-for="show-all-on-submit-select">
Please Choose a Location
</span>
Thanks
I have to provide a dropdown in my form with a large number of options in it but the selected options are to be shown at various places so i have to store the selected option or its id at database too.
<FormGroup>
<Label htmlFor="category">Category</Label>
<select innerRef={input => (this.category = input)} id="select" class="form-control" >
<option value="0">Please select</option>
<option value="1">Mobiles</option>
<option value="2">Television</option>
<option value="3">Washing Machines</option>
</select>
</FormGroup>
This is the gist of the form type i want, there will be other categories in somewhere around 25. I cant have 25 options opening in dropdown. I want to have something like select and input type in dropdown. Also i want to store the option selected by the user and then display it somewhere else.
I would like to use a <select> in a form to let the user being able to update values among different <option>. I have used the technique from the guide here: https://angular.io/docs/ts/latest/guide/forms.html. Here is the sample I am talking about:
<div class="form-group">
<label for="type">Type :</label>
<select class="form-control" [(ngModel)]="order.type" ngControl="type">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
</div>
In my order-details.component I have got an updateOrder() which calls the updateOrder() from myApp.services.
My problem is when I am trying to send the data from the form to the back-end: all the parts with an <input> are OK, but not those with <select> (it returns the original values, and not the one selected).
Does anyone have encountered this or a similar problem?
Thanks for your help!
There is a way to get the value from different options.
check this plunker
component.html
<select class="form-control" #t (change)="callType(t.value)">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
component.ts
this.types = [ 'type1', 'type2', 'type3' ];
this.order = {
type: 'type1'
};
callType(value){
console.log(value);
this.order.type=value;
}
Been tackling this problem for a few hours.
Checked in the (incomplete) documentation to find an item in the NgSelectOption page called "ngValue"
Not sure if this is the intended use but it seemed to work fine.
So instead of using
[value]="item"
Use:
[ngValue]="item"
Just use ngModel on the select and ngModelChange event if you want to do something when it changes.
In fact I can't reproduce your problem. I created a plunkr with a very simple form with an input and a select. When I submit the form, I have actual values in the bound object. See this plunkr: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview.
Feel free to tell me if I didn't correctly understand your problem.
Thierry
If you have static, hard-coded values for the select tag like below:
<select #quantity>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
You can do the following:
#ViewChild('quantity') quantity: ElementRef;
console.log(this.quantity.nativeElement.value); // will print value of the currently selected option
There is a cq page and in the page there are many component. In one component we have HTML form code. After submitting form data ,i need to set all value in PageContext and use these value in other component on same page.
To achieve this I have created component named "MySamplecomponent". and in put all html code as below.Also i have created a POST.jsp under same component.
Mysamplecompnent.jsp code
<%#include file="/libs/foundation/global.jsp"%>
<%
//String collapsed = properties.get("selection","");
String collapsed= request.getParameter("testKey");
out.println("value++"+collapsed);
String category= request.getParameter("skill");
out.println("Category++"+category);
pageContext.setAttribute("collapsed1",collapsed,PageContext.REQUEST_SCOPE);
%>
<form name="form1" id="form1" action="${currentPage.path}.html" method="post">
<input type ="text" name="testKey" id="testKey" value="collapsed" />
<input type ="hidden" name="pathValue" id="pathValue" value="myValue" />
<select name="skill" style="display:block">
<option value="1">Cricket</option>
<option value="2">Volley ball</option>
<option value="3">Tennis</option>
</select>
<input type="radio" name="ravi" id="radiobutton" value="success" > radiobutton<br>
<input id="SubmitButton" name="SubmitButton" type="submit" value="SubmitButton" onclick="javascript:location.href='#'" />
</form>
After clicking on submit button getting below error
Error while processing /content/myPage/
Status
500
Message
javax.jcr.nodetype.ConstraintViolationException: No matching property definition: testKey = collapsed
Location /content/myPage/
Parent Location /content
Path
/content/myPage/
Referer http://localhost:4502/content/myPage.html
ChangeLog
Go Back
Modified Resource
Parent of Modified Resource
First of all, I believe you mean PageContent under PageContext. If you want to use Sling Post Servlet, you need to change the action.
${currentPage.path} refers to Page node and not PageContent node. Page node has pretty strict restrictions for properties and you can not put there any custom props, like testKey. So to make your code work just replace your action attribute with ${currentPage.path}/jcr:content and it will work.
Use JQuery and AJAX. See this article:
http://scottsdigitalcommunity.blogspot.ca/2013/06/posting-form-data-to-adobe-cq-using.html
So I'm trying to submit a page to itself while retaining the current query string of the page.
So the page is sb.local/sb/cat.php?brandcode=JM&t=cat_items I pull off the query string and stick it back into the html form to preserve the parameters. This is the resulting form:
<form id="brand-select" method="get" action="?brandcode=JM&t=cat_items" name="brand-select">
Brand:
<select id="brandcode" style="width:207px" tabindex="3" name="brandcode" required="">
<option value=""></option>
<option class="brand-option" value="AX" data-brandid="110"> Aetrex </option>
<option class="brand-option" value="AL" data-brandid="12"> Alden </option>
<option class="brand-option" value="ETC" data-brandid="11"> Etc </option>
</select>
<input type="submit" value="go">
</form>
When I submit the form by choosing the dropdown for Aetrex (value AX), however, it goes to a url of:
sb.local/sb/cat.php?brandcode=AX
in other words, it cuts out the "t=cat_items" that is in the action. It also cuts out the "brandcode=JM" but I would almost expect that since they're duplicates.
That's not what I expected, I expected that if there is a query string in the action attribute, it would append form values to that query string (e.g. sb.local/sb/cat.php?brandcode=JM&t=cat_items&brandcode=AX. Instead it seems to be replacing the query string entirely with only those elements that are in the form.
Is the form action attribute not usable for storing query parameters, only more basic url info?
Edit: Note that I can work around this by parsing every parameter and then putting each parameter into its own hidden field manually, except for any parameters that I want to allow to change, I was just hoping that there was some kind of simpler way.
I tested with a non-conflicting query string and that was replaced in whole even when there wasn't a conflict (in Firefox), so based on that it seems that query strings are useless in the action attribute of get forms? Or am I missing something.
I know this is an old question, but the solution is actually pretty simple (and neat!).
All you have to do is sending the querystring with hidden input fields in the format name="key" and value="value".
?brandcode=JM&t=cat_items would "translate" into:
<input type="hidden" name="brandcode" value="JM" />
<input type="hidden" name="t" value="cat_items" />
Completely remove the querystring from your action.
Change your code to:
<div>
<form action="?brandcode=&t=" method="get">
....
</form>
You can use "POST" method instead of "GET" method for form submission, if the method doesn't matter.