Hiding HTML form elements not using id's - javascript

<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?

Related

How to remove user input from a text box and allow javascript text to populate it

I have a quick question on how to look up making "text field box (the way Qty looks)" that's in a form but without a user to be able to insert it. I have a javascript file that's supposed to calculate this automatically and populate the text box with the appropriate information but I can't have the user changing the tax/subtotal/total. I have tried to just use innerHTML but that just gets rid of the text box look that I'm aiming for.
<fieldset>
<legend><span>Price: $59.99</span></legend>
<fieldset>
<legend><span>Qty:</span></legend>
<input type="number" id="bookQty" min="0" />
<label for="bookQty">
</label>
</fieldset>
<fieldset>
<legend><span id="subTotal">Subtotal: </span></legend>
<input type="number" id="subTotal" min="0" />
<label for="subTotal"></label>
</fieldset>
<fieldset>
<legend><span id="tax">Tax(5%):</span></legend>
</fieldset>
<fieldset>
<legend><span id="total">Total: </span></legend>
</fieldset>
</form>
You could give your input the readonly attribute, which makes the element not mutable, meaning the user can not edit it.
Example:
<input type="number" value="Some value" readonly="readonly" id="subtotal"/>
You can read more about it here

Unexpected space under <form> using Mechanical Turk's crowd html elements

I got a weird question on Amazon MTurk's html layout. There is unexpected space under <form> when using the crowd elements by AWS.
Here is a piece of demo code:
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form answer-format="flatten-objects">
<div>
<form>
<p> Some random question</p>
<input type="radio" name="q-1" value="1"> <label>Choice1</label>
<br>
<input type="radio" name="q-1" value="2"> <label>Choice2</label>
<br>
<input type="radio" name="q-1" value="3"> <label>Choice3</label>
</form>
</div>
<p> Some random text to test the space after `form` </p>
</crowd-form>
which produces a multi-choice question with a ton of spaces (the second pic is directly after the first one -- but I have to screenshot two separate ones as the space is too long).
However, when commenting out the crowd html line, everything seems just fine:
<!--<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>-->
<crowd-form answer-format="flatten-objects">
<div>
<form>
<p> Some random question</p>
<input type="radio" name="q-1" value="1"> <label>Choice1</label>
<br>
<input type="radio" name="q-1" value="2"> <label>Choice2</label>
<br>
<input type="radio" name="q-1" value="3"> <label>Choice3</label>
</form>
</div>
<p> Some random text to test the space after `form` </p>
</crowd-form>
which produces the following:
Does anyone know why this happens, and how I could fix it if I still want to use the crowd form? Thanks!
You should omit the <form> elements.
<crowd-form> takes care of all the form submission for you.
You need to include (not comment out) the Crowd HTML Elements script import:
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
Hope this helps.
Please let me know if you have additional questions.
Thank you,
Amazon Mechanical Turk

How to use both radio buttons and checkboxes in same fieldset?

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.

div disappears when page refreshed

Can't figure out why the below piece of code makes the textfield disappear upon page refresh (when 'No' radio button selected).
Also, after the page is refreshed the default radio button doesn't get selected.
Forcing refresh, fixes the problem, though.
Any ideas?
<html>
<body>
<div class="editfield">
<div id="field_1">
<label>
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">Yes
</label>
<label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<body onLoad="document.getElementById('radio-2_id').checked=false; document.getElementById('radio-1_id').checked=true;">
<div class="editfield">
<div id="field_1">
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">
<label for='radio-1_id'>
Yes
</label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">
<label for='radio-2_id'>
No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
just a short recap:
1. on page refresh the div should disappear (all css and js and html that was dynamically set / added is removed) and the selected radio button should be the first (Yes)
2. tested this on all major browser and it works
3. still can't figure out why it wasn't working on Mozilla and IE without the JS refresh
I moved the radio buttons out of the labels to see if that impacted the refresh in any way and it didn't. Also, I removed an extra </div> that was in the original code.
The page refresh will initiate the page in its' original state. So the
style="display:none"
will be reactivated on the div and will be hidden and the "Yes" button will also be reenabled
what i did have a textarea insert number first ,0 make it readonly
then it will not disappear on refresh,to insert document.getElementById("demo").readOnly=false,and true to enable readonly

how to get checkbox value in javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My HTML script is
<html>
<body>
<b><font color="green">Please select a check box to change the color of text </font> </b><br>
<input type="checkbox" name="red" id="chkbx" > Red<br>
<input type="checkbox" name="green" id="chkbx" value="1"> Green <br>
<input type="checkbox" name="blue" id="chkbx" value="2"> Blue <br>
<input type="checkbox" name="orange" id="chkbx" value="3"> Orange <br>
<input type="checkbox" name="yellow" id="chkbx" value="4"> Yellow <br>
<p id="demo"></p>
<button onclick="myfunction()">My Choice</button>
<br><br>
<h style="color: red; font-weight: bold;"> </h>
<p id="demo"></p>
i need to get the checkbox value in javascript and if any one checkbox is selected that colour will apply to a text to display on the output. how to do?
First off - don't use the tag as it has been deprecated since 1999 use
<p style='font-weight:bold; color:green'>....</p>
Instead of checkboxs use radio buttons
<input type="radio" name="red" value="red" onClick="myFunction(this.value);"> Red<br>
Repeat the above for all possible selections.
Change your function myFunction() to myFunction( value ) and work from there. The information is passed directly to the function so there is no need to go looking for it.

Categories

Resources