Develop Reference

Returning Javascript Response from Conditional Logic as an Answer to HTML Quiz Input on the Same Page without Refresh or Navigating Away

Beginner here! I'm coding a quiz website that takes in 10+ questions and returns a response to the user after receiving a combination of their answers. I included a much abbreviated version of the code below with placeholder text to help illustrate the issue.
The HTML form has a radio input which is related to javascript variables in a separate linked JS file in a onsubmit function called answers(). There are no correct/incorrect responses, only 50+ unique responses depending on the user input combo. The function declares the answer to each question using let, then 50+ conditional logic statements pass the answer variables to get a result.
Thankfully the quiz works! It successfully returns the correct unique response after a user inputs and submits. The only problem is I want to answer to display in a container at the bottom of the page onsubmit, and instead it sends it to a new page where the text is isolated without styling or context and navigates away from the quiz page. I am returning the result to the user with a document.write() method, but I've also tried document.getElementById('id').innerHTML = result and the .textContent method as well. The innerHTML and textContent methods have returned nothing, and the document.write will only return the result on a separate page.
Does anyone know how I can return the unique result as a response to the user at the bottom of the webpage after the quiz? I want it to be in a container that is hidden until the quiz is submitted and it appears and is populated with the result after they press submit. I am new to coding, so I greatly appreciate any and all help! Thank you! :)
let commentLine2 = "Hello world!";
function answers()
{
let Answer_Q2 = document.querySelector('input[name="Answer_Q2"]:checked').value;
let Answer_Q3 = document.querySelector('input[name="Answer_Q3"]:checked').value;
let Answer_Q4 = document.querySelector('input[name="Answer_Q4"]:checked').value;
if (Answer_Q3 == "No" && Answer_Q4 == "No"){
document.write(commentLine2);};
}
<form onsubmit="answers();">
<div>
<fieldset>
<!--Question 1 textbox not considered in quiz results-->
<legend>Question 1: What's is your name?</legend>
<input type="text">
<legend>Grouping 1</legend>
<h3>Question 2: _______?</h3>
<div class="input-group mb-3">
<input type="radio" id="Option 1" name="Answer_Q2" value="Option 1" >
<label for="Option 1">Option 1</label><br>
<input type="radio" id="Option 2" name="Answer_Q2" value="Option 2" >
<label for="Option 2">Option 2</label><br>
<input type="radio" id="Option 3" name="Answer_Q2" value="Option 3" >
<label for="Option 3">Option 3</label><br>
<input type="radio" id="Option 4" name="Answer_Q2" value="Option 4" >
<label for="Option 4">Option 4</label><br>
<label class="input-group-text" for="Answer_Q2"></label>
</div>
<div>
<h3>Question 3: _______?</h3>
<div class="input-group mb-3">
<input type="radio" id="No" name="Answer_Q3" value="No">
<label for="No">No</label><br>
<input type="radio" id="Yes" name="Answer_Q3" value="Yes">
<label for="Yes">Yes</label><br>
<label class="input-group-text" for="Answer_Q3"></label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Grouping 2</legend>
<h3>Question 4: ________?</h3>
<div class="input-group mb-3">
<input type="radio" id="Yes" name="Answer_Q4" value="Yes">
<label for="Yes">Yes</label><br>
<input type="radio" id="No" name="Answer_Q4" value="No">
<label for="No">No</label><br>
<label class="input-group-text" for="Answer_Q4"></label>
</div>
</fieldset>
<input type="Submit" id="btn-form" value="What's my result?">
</fieldset>
</form>
<fieldset class="answer-container">
<div>
<p id ="answer-Block"></p>
</div>
</fieldset>

if (Answer_Q3 == "No" && Answer_Q4 == "No"){
document.write(commentLine2);};
}
document.write(commentLine2) would overwrite everything in the page and replace it with the contents of commentLine2. instead you should select the output container #answer-Block and put the response there:
if (Answer_Q3 == "No" && Answer_Q4 == "No"){
let answerBlock = document.getElementById('answer-Block');
answerBlock.textContent = commentLine2;
}
it would also help if you triggered the function on click of the submit button instead of on submission of the form itself (if you're not sending it to a server backend anyway), so modify your html like so:
<form onsubmit="event.preventDefault()">
and then on the button like so:
<input type="Submit" onclick="answers()" id="btn-form" value="What's my result?">

Enable/Disable input by radio selection with jquery

A form with radio buttons. If "Existing" is checked, the "existingnumber" input will be enabled. It works fine during the selection process but does not work onload. On load the input "existingnumber" remains disabled even though it's "checked". This is problematic when the form is submitted, and fails error validation. I've tried appending .change() at the end, and creating a function which I called on document ready but that didn't work. I think I'm missing something. Perhaps I need to get the value first? I'm a bit of a jquery noob.
<input type="radio" name="officephone" value="New" id="officephonenew" >
<label for="officephonenew">New</label><br>
<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked>
<label for="officephoneexisting">Existing</label><br>
<input type="text" name="existingnumber" placeholder="555-555-1234" /><br>
<input type="radio" name="officephone" value="No" id="officephoneno">
<label for="officephoneno">Not required</label>
$('input:radio[name="officephone"]').change(function(){
$('input[name="existingnumber"]').prop("disabled",true);
if($(this).attr('value') == 'Existing') {
$('input[name="existingnumber"]').prop("disabled", false);
}
});
https://jsfiddle.net/Cormang/sd8xaj9h/10/

To make this work on load simply use filter() to retrieve the checked radio button and trigger() the change event on it.
Also note that you can simplify the logic by providing the boolean output of the condition to the disabled property and by using val().
$('input:radio[name="officephone"]').change(function() {
$('input[name="existingnumber"]').prop("disabled", $(this).val() != 'Existing');
}).filter(':checked').trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="officephone" value="New" id="officephonenew" />
<label for="officephonenew">New</label><br />
<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked />
<label for="officephoneexisting">Existing</label><br />
<input type="text" name="existingnumber" placeholder="555-555-1234" disabled /><br />
<input type="radio" name="officephone" value="No" id="officephoneno" />
<label for="officephoneno">Not required</label>

How to get the boolean value based on radio button selected in html using angular

I have created two radio buttons like Order, and Cart as like below, and I just want to get the TRUE (if the radio button is checked and by default Order button is checked) and FALSE if its not checked in app.component.ts file in angular JS.
app.component.html
<div class="container">
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked id="place_Oreder">Order
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="add_cart">Cart
</label>
</form>
</div>
I just written the following code which say if there is onclick on both button the boolean value will change:
isSelectedMSM:boolean=false;
isSelectedLive:boolean=false;
$(document).ready(function(){
$("#place_Oreder").click(function(){
this.isSelectedOrder=true;
});
});
$(document).ready(function(){
$("#add_cart").click(function(){
this.isSelectedcart=true;
});
});
I'm not sure that How can I print TRUE or FALSE in app.components file based on the radio button selected by user based on that I need to put if condition and call an appropriate service to invoke.
Can someone help me to achieve this? I just googled but I didn't find the right resource to implement the same. It would be much helpful if someone share your experience to solve this.
Update:
I'm not sure the above code will work. But can someone lead me that how can I achieve this in better way.

A simple click event will do the trick
<label class="radio-inline">
<input type="radio" name="optradio" checked id="place_Oreder" (click)="onClick('order')">Order
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="add_cart" (click)="onClick('cart')">Cart
</label>
comp.ts
onClick(item) {
if(item == 'order')
this.isSelectedOrder = true;
else if(item == 'cart')
this.isSelectedCart = true;
}

You can use ngForm for this, pass ref to function and from component, get the values as required.
Demo (Check console.)
HTML
<div class="container">
<form #myForm="ngForm" (submit)="submitForm(myForm)">
<label class="radio-inline">
<input ngModel type="radio" name="optradio" checked value="true" id="place_Oreder">Order
</label>
<label class="radio-inline">
<input ngModel type="radio" name="optradio" value="false">Cart
</label>
<button type="submit">Submit</button>
</form>
</div>
Component
submitForm(form: NgForm) {
console.log(form.value);
}

How to do toggle two mutually exclusive radio buttons in HTML

I have two radio buttons. When I click on one, the other should become unchecked, and vice versa.
The code I've produced so far is not working:
<input type="radio" id="rbdemail" onclick="chekrbdclick()" checked="checked" />
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick()" />
function chekrbdclick()
{
// How to manage here?
}

Simple, just use a 'name' property with the same value for both elements:
<html>
<body>
<form>
<input type="radio" name="size" value="small" checked> Small
<br>
<input type="radio" name="size" value="large"> Large
</form>
</body>
</html>
hope it helps

<form>
<label>
<input type="radio" name="size" value="small" checked> Small
</label>
<br>
<label>
<input type="radio" name="size" value="large"> Large
</label>
</form>
Give them a name attribute with common value like size, and it will work. For best practice, you can place your input tag inside a label tag, so that, even if your user clicks on the text beside the button (ie on "Small" or "Large"), the respective radio button gets selected.

The perfect answer is above answered ,but I wanna share you how it can work by javascript ,this is javascript work (not standard answer) ....
<input type="radio" id="rbdemail" onclick="chekrbdclick(0)" checked="checked" value="Small" />Small<br>
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick(1)" value="Large" />Large
<script>
function chekrbdclick(n)
{
var small = document.getElementById('rbdemail');
var large = document.getElementById('rbdsitelnk');
if(n === 0){
small.checked = true;
large.checked = false;
}
else {
small.checked = false;
large.checked = true;
}
}
</script>

Passing input id as jquery function paramenter

I'm new to jQuery.
I am trying to create a reusable function that will replace the text of a input field.
I pass in the field I want to change as one parameter and the new text as another parameter.
I figured I would try it out with some radio buttons.
HTML
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'Geo')" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, '')" value="2">Specific User</label>
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />
JS
function replaceText(field, newtext) {
document.getElementById(field).text(newtext);
};
I originally toyed with the idea of
function replaceText(field, newtext) {
$(field).text(newtext);
};
but that didn't seem to work either. Help?

field is the actual element so just set the input value property.
function replaceText(field, newtext) {
field.value = newtext;
}
DEMO: http://jsfiddle.net/039v0wst/1/
with jQuery
function replaceText(field, newtext) {
$(field).val(newtext);
}
DEMO: http://jsfiddle.net/rgen7vLv/1/

First of all give unique names:
<input type="radio" name="optradio1" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
Geographical Area
then js
$('input[name$="optradio1"]').val("newtext")

Can you pass the field id with ' '
E.g;
'txt_recipient' instead of 'txt_recipient

It is no longer recommended to declare event handlers inline in the HTML attributes.
Using a more modern syntax, I'd include a data attribute that specifies the text in the destination, the update your target using the string from the data attribute.
$('input[type="radio"]').change(function() {
$("#txt_recipient").val($(this).data("text"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
<input type="radio" name="optradio" data-text="All" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" data-text="Geo" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" data-text="" value="2">Specific User</label>
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />