I saw two other questions here with similar problems but neither answered the question that helps make this one work and the form itself is so basic that I can't imagine why it's not working. As you can see, it is a simple self-submitting select box. One of the other questions indicated that having name= and the label having a matching for= was the answer but this has those things already so no help there.
In fact, this form is generated dynamically (this is one of the simplest versions of it) and has been online and working for years so I am mystified about why it suddenly posts nothing! It causes the form to reload when a different selection is made but does not provide the ID value or any other post values. Anyone see something I missed or did the basics of forms somehow change?
<form id="Search" method="post" name="search" action="/admin/adminform.php">
<fieldset>
<legend>Select Entry</legend>
<p><label for="ID">Select</label>
<select name="ID" id="ID" onchange="this.form.submit()">
<option value=""></option>
<option value="4">Entry 4</option>
<option value="2">Entry 2</option>
<option value="1">Entry 1</option>
<option value="8">Entry 8</option>
<option value="6">Entry 6</option>
<option value="9">Entry 9</option>
<option value="5">Entry 5</option>
<option value="3">Entry 3</option>
</select>
<noscript>
<input type="submit" value="Get Selected Entry" name="Search">
</noscript>
</fieldset>
</form>
I looked at this all day without any success but then as soon as I posted the question as a last resort, I found the problem which was nothing to do with the form. There was another function being called that tests for whether or not JavaScript is enabled which does so by submitting a post that was apparently overpowering this one. Simply putting a conditional around it so that it runs only once fixed the form in question! For reference, here is the function causing the problem and the outer-most conditional sorted it out.
function IsJavaScript() {
if (!isset($_SESSION['JSEnabled'])) :
if (isset($_POST['jstest'])) :
return TRUE;
else :
echo '<form name="jsform" id="jsform" method="post" style="display:none">';
echo '<input name="jstest" type="text" value="true" />';
echo '<script language="javascript">';
echo 'document.jsform.submit();';
echo '</script>';
echo '</form>';
return FALSE;
endif;
endif;
}
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 want to give the users an opportunity to type in their own text if not in the list. This text should not be added to the list but it should be the value sent when the form is submitted.
I have the feeling that this is not possible with the but what other solutions exist? This is common in windows applications at least.
Take a look at datalist
gsp:
<label>Choose an colour:
<input list="colours" name="aColour" /></label>
<datalist id="colours">
<option value="Red">
<option value="Blue">
<option value="White">
</datalist>
controller:
params.aColour
I asked this over at Expression Engine Answer but was directed here. I would like to show a snippet of code only if a certain option is selected in a tag. This is what I have but it does not work.
<select id="size" name="size" value="">
<option value="one">one</option>
<option value="two">two</option>
</select>
{if size.value == "two"}
//code I want to show
{/if}
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
<select name="day" id="day">
<option value="0" label="Day:">Day:</option>
<option value="1" label="1">1</option>
</select>
<select name="month" id="month">
<option value="0" label="Month:">Month:</option>
<option value="1" label="January">January</option>
</select>
<select name="year" id="year">
<option value="2010" label="2010">2010</option>
</select>
Can I build a form part like this format using Zend_Form and Decorator? I have read many posting but couldn't find any which helps to pack more than one elements together inside a "dd" tag. Does it possible or not?
http://weierophinney.net/matthew/archives/217-Creating-composite-elements.html
This post goes onto explain how to create a composite object using Zend_Form_element and settings up custom decorators.
It is also built around having all date fields grouped together so you could probably just modify this example to get what you want.