Right now the search_type which JS uses later is always "people" as can be seen in the hidden input field.
How can I make it so that the selected option's value is the value tied to the name "search_type"?
<input type="hidden" name="search_type" value="people"> <!-- This obviously needs to change-->
<div class="medium-4 columns">
<select>
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
I have tried changing the name of all the options' names to search_type but this did not work. I have also tried other things, but can't figure it out. Any help would be much appreciated.
Here is the Javascript line that calls it:
search_type: $('input[name="search_type"]').val(),
Note: I am working in Zurb Foundation
Simply put, there is no need to add another input field when you already have a perfectly usable one! change your code so that the <select> includes the name attribute, like so, and get rid of the hidden input:
<div class="medium-4 columns">
<select name="search_type">
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
Related
When I add display:none to an <option> tag with JavaScript after the page is ready, it wouldn't hide the default or the selected element, it stays on the hidden option unless I change that manually. The option 08:30 is hidden but it's still there as selected, but not an option.
Here is the HTML and there's also a screenshot:
<div class="form-floating mb-3">
<select class="form-select" id="time">
<option value="08:30" style="display: none;">08:30</option>
<option value="08:45">08:45</option>
</select>
</div>
I've tried disabling the <option> tag as well but it does the same and keeps it selected. I need it to jump into an active select option or any other option but not the one I hide or disable.
Update:
I have to use a workaround to get this working. First I've added all <option> tags to the <select> tag, then remove the ones that I don't want:
$('#time').html('
<option value="08:30">08:30</option>
<option value="08:45">08:45</option>
<option value="09:00">09:00</option>
<option value="09:15">09:15</option>
<option value="09:30">09:30</option>
<option value="09:45">09:45</option>
')
$('#time option[value="'09:00'"]').remove()
This works, although doesn't actually solve the issue (I guess that's a bug and hasn't been addressed yet). I would still appreciated an answer to improve the code.
Hello & Welcome Mohsen Salehi,
<option hidden>Hidden option</option>
It is not supported by IE < 11.
Please read more about it here How to hide a in a menu with CSS?
Edit:
You can also add disabled to prevent getting selected.
<div class="form-floating mb-3">
<select class="form-select" id="time">
<option value="08:30" style="display: none;" disabled>08:30</option>
<option value="08:45">08:45</option>
</select>
</div>
Currently trying to style a responsive form using bootstrap. This form actually didn't have any responsive design applied within a separate css file before applying bootstrap, everything was purely type and effects.
But I'm having a lot of issues with a select element within this form.
For whatever reason, a select element, which comes before a series of paired radio buttons (themselves grouped within fieldsets), is cutting off both the legend element and the label element for the first radio input. It looks like this:
select element viewed w/ element picker
It looks like content-box is taking up a ton of space. Or that space is "saved" for an active select dropdown? I'm not sure why there's so much blue there ^_^ I'm probably missing something very simple.
I've sectioned the select element off (using semantic section), I've wrapped it within its own row, I've tried applying some small-but-noticeable amount of extra margin-bottom (mb-4 for example).
None of this has worked. Here's my code for this particular section:
<section class="col-8 col-md-4" id="recommend">
<label class="col-form-label" for="select">Would you recommend your stay at the Aperture
Science computer-aided Enrichment Center?</label>
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</section>
Any ideas? :D
You should probably end your <select> element, as this could have unknown effects on the rest of the DOM.
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</select> <!-- <- this was missing -->
My vue.js-bound input box loses its focus after any keypress. I found this similar question, but it doesn't really help me, as I don't use any keys. Here's my template code:
<DxColumn data-field="width"
caption="Spaltenbreite"
:allowEditing="false"
cell-template="width-settings" />
<!-- ... -->
<template #width-settings="cell">
<div>
<CSwitch :checked.sync="cell.data.data.width.set" size="sm" color="success" />
<div class="input-group input-group-sm" v-if="cell.data.data.width.set">
<input type="text" v-model="cell.data.data.width.width" class="form-control text-right" placeholder="auto" />
<select v-model="cell.data.data.width.unit" class="input-group-append custom-select custom-select-sm">
<option value="">Bitte wählen</option>
<option value="DEL">Nicht festlegen</option>
<optgroup label="Absolute Einheiten">
<option value="cm">Zentimeter</option>
<option value="mm">Millimeter</option>
<option value="in">Zoll</option>
<option value="px">Pixel</option>
</optgroup>
<optgroup label="Relative Einheiten">
<option value="em">-fache der Schriftgröße</option>
<option value="%">% des Bildschirms</option>
</optgroup>
</select>
</div>
</div>
</template>
This is part of a DevExtreme dxDataGrid cell definition. How can I prevent the field from losing it's focus every time?
It's a bit hard to tell what is going on with this code only, so I'm going to take a guess.
I see the input has v-model="cell.data.data.width.width" and a parent has v-if="cell.data.data.width.set" while that shouldn't cause issues, and it may be possible that there may be other similar conditionals, I believe the change in v-model is triggering a re-render. If that is the case, I think you may be able to resolve it by adding a key to the input. Something that doesn't change, ideally something like cell.data.data.width.id
TL;DR;
Give the input a key
For people like me finding this; Using Vue.js with Semantic UI:
If the form is changing based on the data you input, you need to assign the <sui-form-field> a static (and unique) key.
The input(s) within don't strictly need teir own key(s), unless they are also subject to change (in order and/or number)
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.
I am working on an assignment for an online web development course I am taking. The assignment is to create an HTML form.
One of the requirements is for there to be 3 dropdown menus - one for month, day, and year. A label of "Birthday:" is to precede these three menus.
The course's assignment solution showed three select elements nested inside of one label element. I tried this and, although it looked normal in the browser, when I uploaded the file to W3C I received the following error:
"Error: The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant."
Is there a proper way to use one label element to be applied to multiple select elements? Or is this a poor practice and instead each day, month, and year should each get its own label?
Here is my code:
<div>
<label>Birthday:
<select name="month" required>
<option value="">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
</select>
<select name="day" required>
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="year" required>
<option value="">Year</option>
<option value="1918">1918</option>
<option value="1988">1988</option>
<option value="1998">1998</option>
<option value="2008">2008</option>
</select>
</label>
</div>
-
In HTML, <input /> fields are »primitive«, which means, each one represents a single value primitive value like a number, string, boolean, etc. A Birth date, consisting of three values, one for the year, the month and the day is »complex« in that context. So you cannot make HTML »understand« that you are trying to create a »complex« field in that way.
That's why (imho) you should not attach the label (complex) to any of the fields (primitive) and use the label as »decoration« without any connection to any field, than you wont get any validation errors.
<label>'s as wrapping elements can be helpful (especially for radio buttons) to expand the »clicking area/hitbox« and to apply some css, depending on the fields value, without any javascript. Otherwise linking labels to fields is cool for search engines and stuff, but since HTML does not have a standardized definition about: »how to label complex inputs«, it is difficult to say if the proposed approach is helpful, or will be in the future (afik).
So in your case, I would just:
<form>
<div class="complex field-group">
<label>…</label>
<div class="fields">
<!-- eventually to help bots
<label for="x" style="display:none;">…</label>
-->
<input id="x"/>
…
</div>
</div>
</form>