I hope y'all are good!
Can you help me to make this quantity picker from Dropdown to be like this one with - and + buttons:
I want to do this feature on this code:
<div style="" class="fields">
<div class="options">
<span class="text">Quantity</span><p>:</P>
<select id="quantityF" name="entry" placeholder="Quantity" required>
<option style="font-size:12px" value="1" selected disabled hidden>1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
Thank you so much guys in advance for your help!
I think you're looking for an <input type="number">, not a <select>. There's a w3schools example here.
It's possible to style the increment/decrement buttons. I suggest referring to this Stack Overflow question
Related
I have a HTML file with a simple drop down list.
Upon selecting one of the choices, I want the choice to be stored in a hidden input.
<div id ="mainContent">
<span style="font-size: 15px;"> Category : </span> <select id="selectid" name="filecategory">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br /><br />
<input type="hidden" name="filecategory" value="XXX" />
</div>
I did some research online and came up with this handler code upon detecting a change event in the drop down list.
$("#selectid").change(function(){
alert('change called');
});
Can someone tell me how I can set the hidden input via this handler ?
Solved here:
$("#selectid").change(function(){
$("input[name='filecategory']").val($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectid" name="filecategory">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<input type="hidden" name="filecategory" value="XXX" />
I have a form that is a simple dropdown menu that users can select an name and the affiliate code matched to it be used in the url but php changes the periods to underscores, so I was wondering if there was a roundabout way of doing it with javascript?
<form>
<div>
<label for="organisation">Please select:
</label>
<select name="quote/results.php?product=product_here&ac=group&username" method="get">
<option value="111111111">Number One</option>
<option value="222222222">Number Two</option>
<option value="333333333">Number Three</option>
<option value="444444444">Number Four</option>
</select>
<button>Quote </button>
</form>
After the username in the URL, that's where I want the number code to go which I had working in php but the results.php turned into results_php which obviously came back as an error.
Are there any possible ways to go around this?
I think you want something like this:
<form action="quote/results.php" method="GET">
<div>
<input type="hidden" name="product" value="product_here"/>
<input type="hidden" name="ac" value="group"/>
<label for="organisation">Please select:</label>
<select name="username">
<option value="111111111">Number One</option>
<option value="222222222">Number Two</option>
<option value="333333333">Number Three</option>
<option value="444444444">Number Four</option>
</select>
<button type="submit">Quote</button>
</div>
</form>
Put the url in the action attribute of the form instead, then use hidden inputs for the product and ac, so that they are included in the url after submitting. And add type="submit" in the buton
Bootstrap 3 validation is not work properly in select. html code is
<div class="control-group">
<label class="control-label">Select std.<span class="f_req">*</span></label>
<div class="controls">
<select name="std" class="span5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
And javascript is rules: { std: { required : true } }
Please help me.. thanks in advance
How can I have 2 drop down combo boxes on the same page?
here is what I have now:
<div class="ui-widget" >
<p> <label>test: </label></p>
<select id="combobox">
<option value="">Select one...</option>
<option value="first">first</option>
<option value=">second">second</option>
</select>
<button style = "margin-left:35px;"type="button" onclick="f1()">Go!</button>
</div>
...
<div class="ui-widget">
<select id="combobox">
<option value="">Select one...</option>
<option value="test">test</option>
<option value="test2">test2</option>
</select>
</div>
I am pretty sure I am not able to have 2 of the same id's like I do. Right now the first one works but the second doesnt. How can I fix this?
Im using this dropdown http://jqueryui.com/autocomplete/#combobox
Using the same ID for 2 different elements is not valid.
If you're calling .combobox() on the two, simply use classes instead:
<select id="combobox1" class="combo"></select>
<select id="combobox2" class="combo"></select>
And then do $('.combo').combobox();.
I have a form with elements like:
<div class="row1">
<select name="someSelectField" multiple="multiple" class="selectList">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="checkboxField" class="checkboxField" value="1" /> checkbox</td>
</div>
<div class="row2">
<select name="someSelectField" multiple="multiple" class="selectList">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="checkboxField" class="checkboxField" value="1" /> checkbox</td>
</div>
These will continue down the page. With lots of different rows of these same fields. There is no set rows as javascript is used to create more rows.
My question is, what should the value of each name attribute be, so that it stays grouped as arrays and can be referenced together? For example, if I use someSelectField[1], when the method is GET, the form sends it like someSelectField[1]=1&someSelectfield[1]=2 (if both are selected). I am looking for it to be someSelectField=1&someSelectfield=2, etc.
Any help would be appreciated. Thanks.
Why don't you just give the controls unique names? If your javascript is capable of giving the divs indexed class names, you could just restructure the html as so:
<div class="row1">
<select name="someSelectField1" multiple="multiple" class="selectList">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="checkboxField1" class="checkboxField" value="1" /> checkbox</td>
</div>
<div class="row2">
<select name="someSelectField2" multiple="multiple" class="selectList">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="checkboxField2" class="checkboxField" value="1" /> checkbox</td>
</div>
This has the benefit of being server independent too since some frameworks parse html arrays really well and give you a proper array, and some just overwrite keys.
Your parsing might get a little messy on the back-end if you're allowed to remove elements from the middle instead of just from the end but it shouldn't be too bad. And if that is a concern you could write a simple jQuery script that would line all your names up again. Warning, untested code follows:
$("div[class^='row']").each(function(idx, value) {
var $value = $(value);
$value.find(".selectList").attr("name", "someSelectField"+(idx+1));
$value.find(".checkboxField").attr("name", "checkboxField"+(idx+1));
});