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));
});
Related
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
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
Can we make select option html input required without touching html tags by using css/javascript code?
<form action="?" method="post">
<select class='css-class'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit"/>
</select>
</form>
css
.css-class select option{
/* anything here to make it required */
}
I don't mind using javascript
jsfiddle
You can use JS by using the required property. It's just like the required attribute that's on tags, but it's a JS property instead of a HTML attribute.
I added another <select> to demonstrate. Try submitting only the second <select> and you'll see it'll require <select class="css-class"> to be submitted.
document.querySelector('.css-class').required = true;
<form action="?" method="post">
<select class='css-class'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit" />
</select>
<select class='css-id'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit" />
</select>
</form>
I don't think that it is possible with just css as this is just for styling content.
Could this answer provide a solution for you: Can I apply the required attribute to <select> fields in HTML5?
The markup they suggest:
<select required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
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();.
Is there a way to know which select tag submitted form?
<form method="POST" action="submit.php">
<select id="id1" name="sel1" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Non-jQuery solution is preferable, but not mandatory...
P.S. Problem is that selected="select" attribute is generated dynamically (i don't know which option would be selected as default - so i can't compare default with submitted)
The first thing that comes to mind is a hidden field with a value you set. Something like this should do.
<form method="POST" action="submit.php">
<input type="hidden" name="submitselect" value="" id="submitselect">
<select id="id1" name="sel1" onchange="document.getElementById('submitselect').value='sel1';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="document.getElementById('submitselect').value='sel2';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Alternatively, you could have a default option chosen, e.g.
<option value="" selected>-</option>
That would never otherwise be chosen. That way, this option would remain unset in the selects that didn't cause the submit.