I have created a survey form that generates an email containing the answers provided. The issue I am having is that one question requires a radio button for three choices but then needs to include checkboxes below that may be use to append information to the radio button choice selected. Here is an example of the code I am describing:
<fieldset data-role="controlgroup">
<label for="q_planName" id="q_formStatus_title">Choose one of the following headline options:</label>
<input type="radio" name="q_formStatus" id="q_formStatus_1" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_1"Blah 1</label>
<input type="radio" name="q_formStatus" id="q_formStatus_2" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_2">Blah 2</label>
<input type="radio" name="q_formStatus" id="q_formStatus_3" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_3">Blah 3
<br/>The following indications may be appended to any headline option:<br/><br/>
<input type="checkbox" name="q_formStatus" id="q_formStatus_4" ;" />
<label for="q_formStatus_4">Date of blah required?</label>
<input type="checkbox" name="q_formStatus" id="q_formStatus_5" ;" />
<label for="q_formStatus_5">Blah is non regulated.</label></fieldset>
This looks fine in the form but the code that is used to print these results in the email is identifying this question as a radio input so it is storing the answer as a single response rather than an array (ie. it will print Q: questionTitle, A: answerValue instead of Q:questionTitle, A1:answerValue1,A2:answerValue2 etc.)
Note that these questions had to go through an approval process so please don't just suggest separating it into two separate questions or adding a "None of the above selection".
Thanks!
You need to use different names because each field needs to be identified individually by the server.
Related
I'm using the Webform Module in Drupal 8 to send data to phpList:
<input type="radio" name="mitglied_" value="ja">
<input type="radio" name="mitglied_" value="nein">
The problem is that in order to send correct data to phpList the name attributes have to be different and the value has to be the same:
<input type="radio" name="list[1]" value="signup">
<input type="radio" name="list[2]" value="signup">
Webform doesn't allow radio buttons with different names and same value, so I'm searching for a way to change them when submitting.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Question 1</h2>
<div>
</div>
<div>
<input type="radio" name="name_radio1" value="value_radio1" onclick=$().hide(); />Audio Question
<input type="radio" name="name_radio1" value="value_radio2" onclick=$().hide(); />Image Question
<input type="radio" name="name_radio1" value="value_radio3" onclick=$().hide(); />Standard Question
</div>
<div align="center" style="padding:25px;width: 300px;">
<input name="question" size="35" class="standardQuestion" type="text" value="" />
<br>
<input name="audioFile" class="audioFile" type="file" />
<br>
<br>
<textarea name="message" rows="10" cols="20">
</textarea>
<br>
<input name="imageFile" class="imageFile" type="file" />
<br>
</div>
<div>
<h2>Question 2</h2>
<div>
</div>
<div>
<input type="radio" name="name_radio1" value="value_radio1" onclick=$().hide(); />Audio Question
<input type="radio" name="name_radio1" value="value_radio2" onclick=$().hide(); />Image Question
<input type="radio" name="name_radio1" value="value_radio3" onclick=$().hide(); />Standard Question
</div>
<div align="center" style="padding:25px;width: 300px;">
<input name="question" size="35" class="standardQuestion" type="text" value="" />
<br>
<input name="audioFile" class="audioFile" type="file" />
<br>
<br>
<textarea name="message" rows="10" cols="20">
</textarea>
<br>
<input name="imageFile" class="imageFile" type="file" />
<br>
</div>
<div>
`I am trying to add to an HTML Quiz editor started by someone else that allows me to add from 1 to n questions. Quiz questions can be based upon an audio recording, an image, or just plain text. If the question is an audio/image/text based question, I would need to only show the HTML form elements related to an audio/image/text based question. The questions on the quiz can be changed/updated/deleted by the user of the editor so an audio question could be changed to an image or text based question. If the question type is changed via a radio button, the appropriate controls for that question type need to be displayed.
For example...
Question 1
Radio ImageQuestion Radio AudioQuestion Radio TextQuestion
textbox 1 (Only show if Radio Button ImageQuestion is checked)
File (Only show if Radio Button AudioQuestion is checked)
textbox 2 (Only show if Radio Button TextQuestion is checked)
Question 2 (same elements as above)
....
Question N (same elements as above)
While each question will have the same HTML form elements, the data in each question should be independent so when I hide some control for question 1 since the user clicked on a specific radio button there, it should not impact what is diplayed for questions 2 to N.
The key constraint I would like to work with is not use id's since the code that I am working on is over halfway done and has been implemented without id's. And I could not hardcode the id's since I don't know how many of them will actually be needed. It would be a significant change to add id's but if that is the only reasonable way or clearly the best way that this can be accomplished, please let me know. Any advice on the best approach to take would be appreciated. Right now the code is using jquery/javascript and I would like to stick with that and basic html/css. I am speculating based upon my research that I may need to use code like .parent().find("a specific class") and the onclick event but I'm not sure if this is the right approach to take and is even feasible. Thanks.
Are you trying to do this without javascript?
I have the following HTML in the page body - these are the only input's of type checkbox on this HTML page:
<fieldset>
<legend>North Face</legend>
N-A1:
<input type="checkbox" name="NorthFace" value="N-A1" id="NA1">
N-B2:
<input type="checkbox" name="NorthFace" value="N-B2" id="NB2">
N-C3:
<input type="checkbox" name="NorthFace" value="N-C3" id="NC3">
N-D4:
<input type="checkbox" name="NorthFace" value="N-D4" id="ND4">
N-E5:
<input type="checkbox" name="NorthFace" value="N-E5" id="NE5">
N-F6:
<input type="checkbox" name="NorthFace" value="N-F6" id="NF6">
N-G7:
<input type="checkbox" name="NorthFace" value="N-G7" id="NG7">
N-H8:
<input type="checkbox" name="NorthFace" value="N-H8" id="NH8">
</fieldset>
<br />
<fieldset>
<legend>South Face</legend>
S-A1:
<input type="checkbox" name="SouthFace" value="S-A1" id="SA1">
S-B2:
<input type="checkbox" name="SouthFace" value="S-B2" id="SB2">
S-C3:
<input type="checkbox" name="SouthFace" value="S-C3" id="SC3">
S-D4:
<input type="checkbox" name="SouthFace" value="S-D4" id="SD4">
S-E5:
<input type="checkbox" name="SouthFace" value="S-E5" id="SE5">
S-F6:
<input type="checkbox" name="SouthFace" value="S-F6" id="SF6">
S-G7:
<input type="checkbox" name="SouthFace" value="S-G7" id="SG7">
S-H8:
<input type="checkbox" name="SouthFace" value="S-H8" id="SH8">
</fieldset>
I have a SUBMIT button on this HTML page that when clicked by the user runs some javascript that needs to evaluate these checkboxes - so I do the following:
var checkboxes = document.querySelectorAll("input[type=checkbox");
so far every time I have checked the array checkboxes indexes 0-7 of checkboxes are N-A1 through N-H8 and indexes 8-15 are S-A1 through S-H8.
Question 1: as long as these remain the only checkbox type on this HTML page and they are always in this order on the page is this order in checkboxes array always guaranteed? (that is will the first 8 always be N-xx and the second 8 always be S-xx?)
Question 2: if a checkbox get's added somewhere else on this HTML page I'm hosed so what would be the best way to get only this set of checkboxes? Put sometype of div with an id around these 2 fieldset's or put some type of id on each of these fieldsets like "north" and "south". Give quick example of how to fetch the checkboxes in this case.
Question 3: what I really want in the end is to send only the checkboxes that are checked to my PHP backend - currently I am using a for loop in javascript on checkboxes to find which boxes are checked in javascript then send those that are checked in the POST to my PHP code. Is there a better way - best way to do this maybe just sent the whole checkboxes array in the POST and process in PHP to find who's checked?
Thanks in advance for ideas/suggestions...
1
Yes, the order is guaranteed.
The specification states
The querySelectorAll() methods on the Document, DocumentFragment, and
Element interfaces must return a NodeList containing all of the
matching Element nodes within the subtrees of the context node, in
document order. If there are no matching nodes, the method must return
an empty NodeList.
meaning the elements will be returned in the order they appear in the document
2
If checkboxes are added, the best way to get those elements would be to keep track of them when inserting.
Other than that, wrapping them in another element with an ID or class would work as well, or just giving the new checkboxes a class
var new_boxes = document.querySelectorAll('.new_boxes');
3
Generally you'd just submit the form, and the checked boxes will be sent automatically.
If you're sending the data with ajax, you can get the checked boxes with an attribute selector
var boxes = document.querySelector('input[type="checkbox"][checked]');
URl - http://www.getcsr.com/index.php/264-2/
I want the user to atleast answer one option for each question
Add required attribute to at least one input of radio group. Make sure each group has it's own name (at the moment all your radio groups have same name: name="question").
<input name="question1" type="radio" required value="Positive">Positive<br>
<input name="question1" type="radio" value="Negative">Negative<br>
<input name="question1" type="radio" value="Neutral">Neutral</span>
I have a webpage where I am using Jquery to add form fields dynamically and all is well. Below is a sample of how the fields are named. Basically when the user wants more fields then they hit a button and it inserts the two fields and increments the values of the next inputs and creates a container div surrounding the fields.
<fieldset id="dynamicField">
<div id="fieldID1"><ul><li>
<label for="headertext_1">Header Text</label>
<input id="headertext_1" name="headertext_1" size="70" value="My Header Text" />
</li>
<li>
<label for="blurblink_1">Link</label>
<input id="blurblink_1" name="blurblink_1" value="http://foo.bar" size="70" />
</li></ul></div>
<div id="fieldID2"><ul><li>
<label for="headertext_2">Header Text</label>
<input id="headertext_2" name="headertext_2" size="70" value="My Next Header Text" />
</li>
<li>
<label for="blurblink_2">Link</label>
<input id="blurblink_2" name="blurblink_2" value="http://bar.foo" size="70" />
</li></ul></div></fieldset>
Okay, so now what I need to add is a way for these fieldsIDs to be reordered - not only on the page, that would be easy enough, but I also need to rename the field names so that my backend server processing still works.
So for example:
If I have 1,2,3,4,5 different group of fields on the page I want to be able to click a few buttons to move 5 to this order on the screen and named correctly as well:
1,5,2,3,4
Thoughts?