I'm building a complex form, and the form happen to edit "Group", and i have a bunch of subgroup for each group, i would also like to provide a simple way for people to edit the subgroups within this edit page. How would i group the fields together in subgroup edit box so that when submitting the form, it will be grouped together somehow to distinguish the fact that a certain "set" of fields belong into one unit?
Note that there is no limit to how many subgroup it can have. I would like it so that each unit of inputs will be grouped together for easy consumption in the back.
A problem with my current approach is that even though i can just loop through each of group_name, group_descrp array and match it up that way (by index), the checkbox ruins it by not showing up if it is unchecked, and the value of checked checkbox is just on, and i have no way of passing in the information group_id.
Example:
<form>
<!-- group 1 -->
<input name="group_name[]">
<input name="group_descrp[]">
<input type="hidden" name="group_id[]">
<input type="checkbox" name="group_del[]">
<!-- group2 -->
<input name="group_name[]">
<input name="group_descrp[]">
<input type="hidden" name="group_id[]">
<input type="checkbox" name="group_del[]">
...
</form>
thanks a lot!
How about a common class name? jQuery and many of its plugins are all about class-based selectors, so why not?
Related
Hello I have a form that allows the user to check as many options as they like and then hit submit. Is there any way to have the input type 'checkbox' submit more than one value?
For example right now I have:
<input type="checkbox" value="testuser">
But I want something like:
<input type="checkbox" value="testuser" valuetwo="1">
Is there any way to achieve this second option?
Thanks!
Since there is no way to submit to values, is there a way to submit them both in value one?
For example:
<input type="checkbox" value="testuser,1">
And if so how would I separate the value into two?
From your comments, it sounds like you have some JavaScript that handles the data before it's submitted. If that's the case, you can add a data attribute to the checkbox. To use your example, you could call it data-valuetwo.
<input type="checkbox" value="testuser" data-valuetwo="1">
Then, your JavaScript can use getAttribute to retrieve the value in your data-valuetwo attribute and handle it appropriately. It could look something like this:
var valuetwo = checkbox.getAttribute("data-valuetwo");
I found a way to do this without JavaScript or Libraries using a hidden form-field instead:
<input name="selectedValue" type="hidden" value="defaultValue">
<input name="selectedValue" type="checkbox" value="secondValue">
Now, if the checkbox is not selected, the hidden value is sent, if it is selected, the hidden value is overridden.
You might try alternative using select2, see: https://select2.github.io/examples.html (Tagging support, use two options limit). Again, there is no enough information supplied to fully satisfy Your question.
Another approach with select box and JSON is Can an Option in a Select tag carry multiple values? (can be rewritten for checkbox)
I'm looking for a solution to generate multiple forms on one page, that contain the same checkboxes and fields. For now, when I create those forms, even if I use different form names, all checkboxes with the same name get checked at the same time.
What I am trying to do is the following. I do have an events-list. Every event should have a form attached. Every form has some text and some checkboxes. But when I'm trying to check some boxes in my second form, it jumps to the first one (because of the same name of the checkbox).
<form method="post" name="form1">
<input type="checkbox" name="checkbox1" />
<input type="checkbox" name="checkbox2" />
</form>
<form method="post" name="form2">
<input type="checkbox" name="checkbox1" />
<input type="checkbox" name="checkbox2" />
</form>
Is there a way to get this working? Or do I have to use unique checkbox names, even if the formnames are unique? Which would make it more complex when I have a variable count of forms / events.
You can dynamically bind form elements i.e checkboxes. Don't include it in HTML code. This can be done with Jquery $.html() function to bind checkboxes to forms at runtime.
I guess this happens because form1 overrides form2 elements due to same names and id of checkboxes.
Or Try to use 4 different id of all checkboxes, and different id's of form names.
Hope it may work.
Happy Coding!
Atul Jindal
I was under the impression that the server code (or at least PHP) that parses the POST of an HTML form cannot distinguish between a POST from a form with a checkbox whose value is not "checked" versus a POST from a form that doesn't include a checkbox by that name at all.
For example, take the following 3 forms. If they were all submitted as is, with no manual entry, just using the inital values, then forms f2 and f3 would send the same results:
<form name="f1">
<input type="text" name="txt_1" value="Hello">
<input type="checkbox" name="chk_1" checked="checked">
</form>
<form name="f2">
<input type="text" name="txt_1" value="Hello">
<input type="checkbox" name="chk_1">
</form>
<form name="f3">
<input type="text" name="txt_1" value="Hello">
</form>
In my real application, I'm submitting forms of the type f3, with a checkbox deliberately omitted (different checkboxes in different situations). For any checkbox I left missing, I wanted the back-end to just ignore it -- don't treat it as On or Off, just do nothing related to that field.
After I built it, I was almost going to throw out my work before testing, when I remembered that the back-end would treat a missing chk_1 exactly like it would an existing chk_1 that was unchecked -- and would turn Off the related value in the back-end.
But I went and tried it out, and IT WORKED! And I tried different variations, and they all work. They correctly disregard the fields related to missing checkboxes (while processing the fields related to existing checkboxes).
So, that's great, but I don't know how it's done (or whether it might stop working -- say on another browser, etc.). In PHP, I know that the code isset($_POST['chk_1']) will get the value of the checkbox, and it returns false in both cases: unchecked checkbox or missing checkbox. Is there a way in other server languages to distinguish? Why is this working?
The short answer is that PHP only gets what the Browser sends it. It doesn’t know or care about the form itself, just the data from the browser. The data comes as a collection of name=data values.
Among other factors, the browser will only send a button if
it has a name, and
it has been selected
If the button has no name, or if it was not selected, then PHP will never hear of it. This applies to
normal buttons (<button> or <input type="submit">)
radio buttons (where only one in a group can be selected: if none is selected, then this, too, will be absent)
checkboxes (only selected checkboxes are sent)
So, the short answer is that PHP will never know whether a checkbox is missing or simply unchecked, because neither will be sent to the server.
This question is similar to my previous question but not the same ... please check out....I am using totaly 3 webpages; form elements are distributed among two pages, "eg1.html" and "eg2.html", but all the form elements should be submitted to "eg.php".
Here is the code for eg.php which accepts the form elements from both eg1.html and eg2.html:
$size=$_POST["fontsize"];
$label=$_POST["label"];
$age=$_POST["age"];
$sex =$_POST["sex"];
code for eg1.html
<html> <body>
<form action="eg.php" method="post">
<input type="radio" name="fontsize" value="3"/>
click here to select other options which includes age and sex
<input type="radio" name="label" value="stacks"/>
<input type="submit" name = "down" value = "down">
</form> </body>
Now what would be the code for eg2.html? Just check out sample partial html code, but needs to be completed
<input type="radio" name="age" value="3"/>
<input type="radio" name="sex" value="female"/>`
The code should work exactly like this:
First user will open eg1.php he selects only one option that is "fontsize". Next he clicks on the "link to eg2.html" to select two more options "age" and "sex" after selecting. He will be redirected back to eg1.php where he has to select one more option that is "label". Then he will submit the form to eg.php. Which will hold all form elements those are 'fontsize' 'age' 'sex' and 'label'.
I have seen many website using this technique please check out cooltext.com where user will get an option to click on the font image which will redirect him to fonts page after selecting one of the fonts images he will be redirected back to homepage,where he can select some other form elements or form elements and finally submits the form. I have also seen many websites using this technique, I think this can be done using JQUERY/JavaScript but not sure.
Basically the fonts choice page here http://cooltext.com/Fonts?LogoID=5&Field=Font is passing page-load variable to the generator page via a query string - the part of the url after ?. This query string has two parameters LogoID and Field.
e.g url onload from homepage http://cooltext.com/Logo-Design-Carved url of same page when loaded from the fonts page http://cooltext.com/Logo-Design?LogoID=5&Font=994 this url can be loaded from anywhere and the correct font will be set.
More info on the query string here:-
PHP Query String
PHP Server Side Scripting Forum
How to pass parameters as a query string to your PHP functions
I went through many online documents for the checkbox input in XHTML. Can anyone clear my doubt? What does this name field actually stand for?
Milk: <input type="checkbox" name="checkbox" value="Milk">
Chocolate: <input type="checkbox" name="checkbox" value="chocolate">
Cold Drink: <input type="checkbox" name="checkbox" value="Cold Drink">
I thought it was an identifier for that particular checkbox, which can later be used in other file by just referring their name, but given that all the checkbox had same name, why even specify it? A little confused of this.
Dont be confused because of name="checkbox". It could more logically be name="drink" and type=checkbox.
In the above case, you have multiple checkboxes with the same name. When several checkboxes have the same name, the form will send a group of values to the server in the request. Note: only the values of the checked checkboxes will be sent to the server.
Ideally these are used to allow multiple choice questions where more than one answer is allowed.
As opposed to radio buttons, where only one answer is allowed among the options.
Update:
On the receiving side, if you're using JSP for example - the values of the selected checkboxes will be available as request.getParameterValues("drink") or request.getParameterValues("checkbox") in your actual case. This is where the name attribute is used.
The name attribute is used to
reference form data after it’s
submitted, and to reference the data
using JavaScript on the client side.
Source: http://reference.sitepoint.com/html/input/name
Basically, what you've described. When the form is submitted, you can access the values of the form elements through the name you ascribe to them.
The only place where you would want to have multiple inputs with the same name is when they are radio buttons, in which case it is used to indicate which one of them belongs to the same group and thus only one of which can be selected at a time.
The name attribute is used to identify a checkbox. Which you could parse into a object like so {checkboxName1: 'checkboxValue2', checkboxName2: 'checkboxValue2'}
You missed the array setting for the name. By using the array setting (using square brackets), the result will be three different indexes for the checkboxes.
Milk: <input type="checkbox" name="checkbox[]" value="Milk">
Chocolate: <input type="checkbox" name="checkbox[]" value="chocolate">
Cold Drink: <input type="checkbox" name="checkbox[]" value="Cold Drink">
the "name" is same with the databse record, every field should have a name, so when you click the submit, the data will recorded to the database~~~~~