newbie here, so thanks in advance for help! I have a Wordpress site with multiple taxonomies. I'd like to create a very simple form with two select boxes, one for each taxonomy. Then I'd like to use an HTML form with the get method to display posts matching the criteria they requested from the select boxes.
I'm able to do this easy enough if each of the two select boxes are filled out, I get a permalink something like:
testsite.com/?tax1=value1&tax2=value2
(ugly, I know, but it works).
What I can't figure out is what to do if they don't fill out both select boxes. Ideally it would only give the permalink for the one they fill in, so either:
testsite.com/?tax1=value1 or testsite.com/?tax2=value2
But instead I'm getting
testsite.com/?tax1=value1&tax2=Select+tax
here is my HTML
<form action="http://www.testsite.com/" method="get">
Season: <select name="season">
<option>Select season</option>
<option value="">Select season</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select><br/>
Vacation type: <select name="vacations">
<option value="">Select vacation type</option>
<option value="beach">Beach</option>
<option value="ski">Ski</option>
</select><br/>
<input type="submit" />
</form>
I realize the answer is probably simple but I'm banging my head against a wall so any help is very very much appreciated. Thank you!
You can still pass an empty parameter like
testsite.com/?tax1=&tax2=whatever_was_selected
or
testsite.com/?tax1=whatever_was_selected&tax2=
but, you would have to preselect one of the options for them like
<option selected="selected" value="">Select vacation type</option>
This way if the form is submitted and the user didn't change their selection it should still pass the parameter of but without a value.
You can put some Javascript or Php validation to make sure both the dropdown are selected before submitting the form.
Related
I am trying to show content depending on the option selected from the user. I tried this way
<select class="form-control" id="Intervencion" >
<option selected disabled></option>
<option (click)="show">Yes</option>
<option>No</option></select>
<div *ngIf="show"><p>Text to show</p></div>
I do not understand the problem. There is a special directive for this?
... You don't seem to know how basic HTML works. Sorry to say that, but you have to be aware of what you're doing is completely barbaric.
Here is the solution for you :
<select [(ngModel)]="intervencion">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div *ngIf="intervencion === 'yes'">Text to show</div>
That being given, you should really follow Angular's tutorials, because that's one of the first examples they give to explain how ngModel works.
What's happening is that I'm using a payment processor not under my control, and I need to pass it the values of shipping, and the values of shipping per additional item.
Since they're packaged separate, we're going to charge the same amount per additional item, so instead of coming up with two identical fields that the user has to fill out, I'm trying to create one field that assigns the value of shippingf and shipping2f
Below is an example of one of my many attempts. Another attempt has been just putting name="" twice, and that didn't seem to work either.
<select name="shippingf, shipping2f" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
any help on this matter would be fantastic.
Thanks!
Not possible with just HTML.
You could either
use JS to change the value of a type="hidden" element in the form, or
server-side (assuming PHP), before you include your payment processor, add $_POST['shipping2f'] = $_POST['shippingf'];. Just keep shippingf in the HTML.
Since the OP said option 2 won't work, here's an example for option 1:
HTML:
<select name="shippingf" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
<input name="shipping2f" type="hidden"></input>
jQuery:
$("select[name=shippingf]").change(function(){
$("input[name=shipping2f]").val($(this).children(':selected:first').val());
}).change();
Demo: http://jsfiddle.net/nb8j06qb/
or <====
HTML:
<select id='sf' name="shippingf" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
<input id='s2f' name="shipping2f" type="hidden" value="12"></input>
Vanilla JS:
document.getElementById('sf').onmouseup = function(){
document.getElementById('s2f').value = this.options[this.selectedIndex].value;
};
Demo: http://jsfiddle.net/nb8j06qb/1/
i'm developing an asp.net/vb.net webapp.
I've an html table with some columns.
I get the values of the cells from a database, so i've a dinamically number of rows.
In columns i need to put a tag, because i want to allow the user to change the value of that cell.
Of course the initial value of the select should have to come from the query, but i dont know how to do this.
Something like
...
<td> <select selected="<%= queryresult("id").value %>">
<option value="1"> option1 </value>
<option value="2"> option2 </value>
</select></td>
...
but obv not working.
I just hope you understand what i want.
Thanks.
You can find the solution for your problem posted here but implemented with PHP. Anyway you can do it with ASP.NET as well. Basically you have to check if the current option value has the value from the query and add selected="selected" to the specific option tag. Also the correct markup for a select is like this:
<select>
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
</select>
I have a simple HTML form that I'm using to drive site search for a website I'm creating.
Two of the fields should not be used together, such as "make" and "model" of a car. You wouldn't want someone searching for a "Ford Ram Truck," for instance.
How can I modify my form so that if a certain value in one of the fields is selected, the other field disappears?
Thank you for your help!
<select name="make">
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
</select>
<select name="model">
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
</select>
<input name="" type="submit" />
You would need to use javascript and hook up to the change event of the radio buttons.
In your javascript you can set the visibility of any form element to hidden or visible (depending on which you want).
You would still need to validate/check on the server side in order to avoid such a search (since javascript may be off or a malicious user might override your client side validation).
I think Chained Select Menu can solve your problem.
I'm building a mobile website. I use regular html for the dropdown like below. If I select the dropdown on Android and click on "Category", it tries to submit the form. But iPhone doesn't do anything which is the desired behavior I want. I found a similar post here, but I'm not building an app. Some websites use links instead of dropdown, but it's not an option for me. Any suggestion or way around it? Thanks!
<select onchange="document.form.submit();">
<option>Category</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
I would recommend revising your logic to not submit on change if that isn't your desired behavior. You may want to make a function that inspects the selected option on change before submit to decide whether or not to submit.
Something like below..
<select onchange="dropDownChange(this);">
<option>Category</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
function dropDownChange(element){
if(element.selectedIndex != 0){
document.form.submit();
}
}