set a radio button value based on option select using Javascript only - javascript

I am trying to set a radio button based on selecting an option in a select box.
For example, There are 5 select options available, If I select the first option, first radio button should be checked. Likewise for the rest of the things. I am working only with Javascript.
I have tried the below code.
<html>
<head>
<title>JS Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div></div>
<div>
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value" onchange="myFunction()">Select Number</label>
<select name="select_value">
<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>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" value="First">First</input>
<input type="radio" name="radio_value" value="Second">Second</input>
<input type="radio" name="radio_value" value="Third">Third</input>
<input type="radio" name="radio_value" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
<script type="text/javascript">
function myFunction() {
var x = document.getElementsByName("select_value").value;
document.getElementsByName('radio_value')[x].checked=true;
}
</script>
</body>
</html>
JSFIDDLE

You can add this code to your javascript
var select = document.getElementsByTagName('select')[0];
select.onchange = function(event) {
var btns = document.querySelectorAll('[name^="radio_value"]');
btns[event.target.value].checked = true
}
working example
Documentation
Events
Selectors

Following changes makes your example work :
1.
<select name="select_value" onchange="myFunction()">
2.
document.getElementsByName("select_value")[0].value;
3.
document.getElementsByName('radio_value')[x].checked=true;
4.
function should be in head section
Working Fiddle

Try this. It is working for me. Use parseInt when getting the value of the select box. I have given an id to the select box and have used x-1 while selecting the radio buttons as their index starts from 0.
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value" >Select Number</label>
<select name="select_value" onchange="myFunction()">
<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>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" value="First">First</input>
<input type="radio" name="radio_value" value="Second">Second</input>
<input type="radio" name="radio_value" value="Third">Third</input>
<input type="radio" name="radio_value" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
<script type="text/javascript">
function myFunction() {
var x = parseInt(document.getElementsByName("select_value")[0].value);
alert((x));
document.getElementsByName('radio_value')[x-1].checked=true;
}

Try this out its working fine
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<title>JS Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div></div>
<div>
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value">Select Number</label>
<select name="select_value" id = "select_value">
<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>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" id = "First" value="First">First</input>
<input type="radio" name="radio_value" id="Second" value="Second">Second</input>
<input type="radio" name="radio_value" id="Third" value="Third">Third</input>
<input type="radio" name="radio_value" id="Fourth" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" id="Fifth" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
</body>
<script type="text/javascript">
$( "#select_value" ).change(function() {
var conceptName = $('#select_value').find(":selected").text();
if(conceptName=="1"){
$('#First').prop('checked',true);
}
else if(conceptName=="2"){
$('#Second').prop('checked',true);
}
else if(conceptName=="3"){
$('#Third').prop('checked',true);
}
else if(conceptName=="4"){
$('#Fourth').prop('checked',true);
}
else{
$('#Fifth').prop('checked',true);
}
});
</script>
</html>

Related

Conditional Statement Won't Execute Slide Up in Javascript - Solved

I'm new to utilizing radio buttons and conditional statements is JavaScript/HTML, I would love to slide up fro two different div based on which radio button is selected.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<!--This is jQuery via Google CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--Script to JavaScript-->
<script src="select.js"></script>
</head>
<body>
<!--This divide is for the creating/modifying a guestlist-->
<div id="inviteType">
<p>What Type of Invitations Will You be Sending?</p>
<input type="radio" value="paperInvite" name="InviteType" id="paperInvite">
<label for="paperInvite">Paper + Electronic Invitations</label>
<br>
<input type="radio" value="elecInvite" name="InviteType" id="elecInvite">
<label for="elecInvite">Electronic Invitations</label>
<br>
<button id="submitInvite">Submit</button>
</div>
<div id="paper">
<form id="paperGuest">
<input type="text" placeholder="First Name" required>
<input type="text" placeholder="Last Name" required>
<label for="guestPhone">Guest Phonenumber</label>
<input type="tel" placeholder="+0(123)345-6789" id="guestPhone">
<!--This section of code is for the address lines-->
<label for="guestAddress">Please Enter Guest Address</label>
<textarea id="guestAddress" required></textarea>
<div id="#guestAddPopUp">
You can either copy and paste from your contacts, or you may enter the address within this format. <br>
1234 S. Buttermore Ave. Apt. 16 <br>
Plainsville, AL 70832 &#10 <br>
(Country, if if applicable)
</div>
<label for="additionalGuest">Additional Guests</label>
<select class="additionalGuest" name="additionalGuests">
<option value="none">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="paperSubmit">Submit</button>
</form>
</div>
<div id="electronic">
<form id="elecGuest">
<input type="text" placeholder="First Name" required>
<input type="text" placeholder="Last Name" required>
<label for="guestPhone">Guest Phonenumber</label>
<input type="tel" placeholder="+0(123)345-6789" id="guestPhone">
<label for="guestEmail">Guest Email</label>
<input type="email" placeholder="person123#mail.com">
<label for="additionalGuest">Additional Guests</label>
<select class="additionalGuest" name="additionalGuests">
<option value="none">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="elecSubmit">Submit</button>
</form>
</div>
</body>
</html>
This is my JavaScript
window.addEventListener("load", (event) => {
$("#paper").hide();
$("#electronic").hide();
var inviteType = document.getElementById("submitInvite");
inviteType.addEventListener("click", function() {
let InviteType = $('input[name="InviteType"]:checked').val();
document.body.style.color = "#214010";
document.body.style.backgroundColor = "#CAE6AC";
if (InviteType = "paperInvite") {
$("#ModCreGuest").slideUp(2700);
$("#paper").slideDown(3300);
/*this section of code helps to add the different guests with paper invitations to the index*/
var paperSubmit = document.getElementById("paperSubmit");
paperSubmit.addEventListener("click", function(){
});
}
else {
$("#ModCreGuest").slideUp(2700);
$("#electronic").slideDown(3300);
}
});
});
Is there a problem with my conditional statement or is there a problem with selecting my radio button? Thank you.

Firing a function in a form without using a submit button

I need to fire a function I wrote after a form has been filled in.
I tried using a keypress function but that wasn't good because it could bypass the form having to be filled in. I'm not allowed to add a button.
I tried using onsubmit but that isn't good either.
The idea is to show an image after the form has been filled in, then enabling the next form and taking the opacity of the next form from 0.5 to 1.0. This is the function I wrote in JavaScript but I can't get to fire it:
function validate1(){
$("#check").show();
$("#fieldset2").css("opacity", "1.0");
$("#fieldset2").attr("disabled", false);
}
This is my html:
<form name="form1" onsubmit="return validate1()" method="post">
<fieldset id="fieldset1">
<legend>Step 1</legend>
How many people will be attending?
<select name = step1 id="step1" onchange="showField()">
<option value="0">Please Choose</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>
<br>
<div id="divName"></div>
<img id="check" src="Images/check.png">
</fieldset>
</form>
<form name="form2" onsubmit="return validateForm()" method="post">
<fieldset id="fieldset2" disabled>
<legend>Step 2</legend>
Would you like your company name on your badges?<br>
<input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
<input type="text" id="companyText">
<br>
<div id="company"></div>
Will anyone in your group require special accommodations?<br>
(if yes) Please explain below:<br>
<input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
<input type="text" id="specialText"><br>
<img id="check2" src="Images/check.png">
</fieldset>
</form>
PS: I can only use JS, JQuery and HTML, no Ajax(have zero experience with it).
Add another button that call your function and enable the next step :
<button onclick='nextStep()'>Next Step</button>
Hope this helps.
function nextStep(){
$("#check").show();
$("#fieldset2").css("opacity", "1");
$("#fieldset2").attr("disabled", false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post">
<fieldset id="fieldset1">
<legend>Step 1</legend>
How many people will be attending?
<select name = step1 id="step1" onchange="">
<option value="0">Please Choose</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>
<br>
<div id="divName"></div>
<img id="check" src="http://fotokaste.lv/images/05651826220882852674.png" style='display:none'>
</fieldset>
</form>
<button onclick='nextStep()'>Next Step</button>
<form name="form2" onsubmit="return validateForm()" method="post">
<fieldset id="fieldset2" disabled>
<legend>Step 2</legend>
Would you like your company name on your badges?<br>
<input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
<input type="text" id="companyText">
<br>
<div id="company"></div>
Will anyone in your group require special accommodations?<br>
(if yes) Please explain below:<br>
<input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
<input type="text" id="specialText"><br>
<img id="check2" src="Images/check.png">
</fieldset>
</form>
"use the jQuery .change method to fire when a user chooses an option from the select named "step1".
$("#step1").change(function() {
if ($("#step1").val() > 0) {
validate1();
}
});
You can probably try placing an onchange function on every element inside the first form.
Use this for every element.
<input id = 'nameInputFormElem' type='text' placeholder="Full Name" onchange="testFunction(event);">
<select name = step1 id="step1" onchange="testFunction(event);">
<option value="0">Please Choose</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>
This can be a generic implementation of the function to catch the change
function testFunction(event){
var temp = $(event.target).parents("form").find("select, input");
var isFormFilled = true;
$(temp).each(function (key,value){
if($(value).val() == '')
isFormFilled= false;
});
if(isFormFilled == true)
console.log("success");
}
Replace success console with a call to your function.

How to clear form data jquery?

I want to clear all form input data after a submitting all input data to php file how can I clear this data by using jquery function?
You can listen to the submit event and then clear the values of each input like below:
$('#form').submit(function() {
$(this)[0].reset();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="text" />
<input type="submit" />
</form>
This should work...
$('form').on('submit', function() {
var children = $(this).children()
children.each(function(i, el) {
if ($(el).attr('type') === 'checkbox') return $(el).removeAttr('checked')
$(el).val(null)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" />
<br>
<input type="text" />
<br>
<input type="checkbox" />iphone
<input type="checkbox" />Android
<br>
<input type="radio" name="gender" value="male" checked>Male
<br>
<input type="radio" name="gender" value="female">Female
<br>
<input type="radio" name="gender" value="other">Other
<br>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<button type="submit"> submit </button>
</form>
try this
$(document).ready(function(){
$('#submit').click(function(){
$('#my_form').find("input[type=text]").val("");
});
});
document.querySelector(".name").value = "";
<form class="form">
<input type="text" class="name"/>
<input type="submit" value="Send" class="submit"/>
</form>
Then the input value will be always empty

Display html5 input value in a window alert and save the value in a .txt [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I want two function first to display all the input value together in a window alert by clicking Display button and the second is to save this value in a .txt format by Clicking Submit with JavaScript Or PHP.
This is my Html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="action_page.php">
ID:<br>
<input type="number" name="ID" id="ID">
<br>
Password:<br>
<input type="password" name="password" id="password">
<br>
First name:<br>
<input type="text" name="first name" id="first name">
<br>
last name:<br>
<input type="text" name="last name" id="last name">
<br>
Prmotion:<br>
<select name="promo" id="promo">
<option value="1">1 anne</option>
<option value="2">2 anne</option>
<option value="3">3 anne</option>
<option value="4">4 anne</option>
<option value="5">5 anne</option>
</select><br>
Date de Naissance:<br>
<input type="date" name="birthday" id="birthday">
<br>
Email:<br>
<input type="email" name="mail" id="mail">
<br>
Telephone:<br>
<input type="tel" name="telephone" id="telephone">
<br>
Sport Prefere:<br>
<input type="checkbox" name="sport" value="Natation"> Natation<br>
<input type="checkbox" name="sport" value="Soccer" checked> Soccer<br>
<input type="checkbox" name="sport" value="Tennis" checked> Tennis<br>
Sex:<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
Option:<br>
<select name="Option">
<option value="Telecom">Telecom</option>
<option value="Multi">multimedia</option>
<option value="Logi">Logiciel</option>
</select><br>
Comment:<br>
<textarea name="comment" id="comment"></textarea><br>
<input type="submit" value="Display">
<input type="submit" value="Submit">
</form>
</body>
</html>
You can use serializeArray method to create array of objects in form then display it in the alert.
To submit the form data you can use ajax.
Then in your php file action_page.php put the below code which will save the post values in a text file.
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$myfile = fopen("hello.txt", "a") or die("Unable to open file!");
$txt = json_encode($_POST);
fwrite($myfile, $txt);
fclose($myfile);
}
$("#display").on("click", function() {
//alert($('form').serializeArray());
var fields = $('form').serializeArray();
var data = [];
jQuery.each(fields, function(i, field) {
data.push(field.value);
});
alert(data);
return false;
});
$("#submit").on("click", function() {
var fields = $('form').serialize();
var data = [];
$.ajax({
type: 'POST',
data: fields,
url: "action_page.php",
success: function(result) {
alert(result);
}
});
return false;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="results"></div>
<form action="">
ID:
<br>
<input type="number" name="ID" id="ID">
<br>Password:
<br>
<input type="password" name="password" id="password">
<br>First name:
<br>
<input type="text" name="first name" id="first name">
<br>last name:
<br>
<input type="text" name="last name" id="last name">
<br>Prmotion:
<br>
<select name="promo" id="promo">
<option value="1">1 anne</option>
<option value="2">2 anne</option>
<option value="3">3 anne</option>
<option value="4">4 anne</option>
<option value="5">5 anne</option>
</select>
<br>Date de Naissance:
<br>
<input type="date" name="birthday" id="birthday">
<br>Email:
<br>
<input type="email" name="mail" id="mail">
<br>Telephone:
<br>
<input type="tel" name="telephone" id="telephone">
<br>Sport Prefere:
<br>
<input type="checkbox" name="sport" value="Natation">Natation
<br>
<input type="checkbox" name="sport" value="Soccer" checked>Soccer
<br>
<input type="checkbox" name="sport" value="Tennis" checked>Tennis
<br>Sex:
<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>Option:
<br>
<select name="Option">
<option value="Telecom">Telecom</option>
<option value="Multi">multimedia</option>
<option value="Logi">Logiciel</option>
</select>
<br>Comment:
<br>
<textarea name="comment" id="comment"></textarea>
<br>
<input type="submit" id="display" value="Display">
<input type="submit" id="submit" value="Submit">
</form>
</body>
</html>

Show/hide div based on option value

I just read all the other topics I could find with same problem I had but it didn't help me that's why I'm posting here.
I'm trying to have other form questions appear based on option value of 3rd question.
According to other topics with same function this should work just fine, but for me nothing happens when I change values and I couldn't find any errors. I'm still new at JS.
Thanks in advance. Cheers!
This is my entire code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>‌​
<script>
$("#aktivnost").change(function() {
if ($(this).val() == "huddle") {
$(".huddle_q").show();
}
if ($(this).val() == "1on1") {
$(".jnj_q").show();
}
else {
$(".huddle_q", ".jnj_q").hide();
}
});
</script>
</head>
<body>
<form>
<span>Team Leader:</span>
<select name="team_leader">
<option value="dinko_roso"> Dinko Roso </option>
<option value="lucija_starcevic"> Lucija Starčević </option>
<option value="natalija_fluka"> Natalija Fluka </option>
<option value="tamara_zdjelar"> Tamara Zdjelar </option>
<option value="bojan_brnjac"> Bojan Brnjac </option>
<option value="andro_vuljanic"> Andro Vuljanić </option>
</select>
<br />
<span>Ocjenjivač:</span>
<select name="ocjenjivac">
<option value="dinko_roso"> Branimir Spajić </option>
<option value="lucija_starcevic"> Ozren Kovačević </option>
<option value="natalija_fluka"> Dunja Vidak </option>
<option value="tamara_zdjelar"> Anamaria Katić </option>
<option value="bojan_brnjac"> Marko Nimac </option>
</select>
<br />
<span>Aktivnost:</span>
<select id="aktivnost">
<option value="team_meeting"> Team Meeting </option>
<option value="1on1"> 1on1 </option>
<option value="huddle"> Huddle </option>
</select>
<br />
<div class="huddle_q">
<span>Dužina stiskavca:</span>
<input type="radio" name="h_q1" value="0">0</input>
<input type="radio" name="h_q1" value="3">3</input>
<br />
<span>Fokusi:</span>
<input type="radio" name="h_q2" value="0">0</input>
<input type="radio" name="h_q2" value="1">1</input>
<input type="radio" name="h_q2" value="2">2</input>
<input type="radio" name="h_q2" value="3">3</input>
<br />
<span>Parkiranje:</span>
<input type="radio" name="h_q3" value="0">0</input>
<input type="radio" name="h_q3" value="3">3</input>
<br />
<span>Poticanje:</span>
<input type="radio" name="h_q4" value="0">0</input>
<input type="radio" name="h_q4" value="1">1</input>
<input type="radio" name="h_q4" value="2">2</input>
<input type="radio" name="h_q4" value="3">3</input>
<br />
<span>Predstavljanje:</span>
<input type="radio" name="h_q5" value="0">0</input>
<input type="radio" name="h_q5" value="3">3</input>
<br />
<span>Održava atmosferu:</span>
<input type="radio" name="h_q6" value="0">0</input>
<input type="radio" name="h_q6" value="1">1</input>
<input type="radio" name="h_q6" value="2">2</input>
<input type="radio" name="h_q6" value="3">3</input>
</div>
<div class="jnj_q">
<span>Dužina 1on1:</span>
<input type="radio" name="1on1_q1" value="0">0</input>
<input type="radio" name="1on1_q1" value="3">3</input>
<br />
<span>TL prepoznaje i hvali:</span>
<input type="radio" name="1on1_q2" value="0">0</input>
<input type="radio" name="1on1_q2" value="1">1</input>
<input type="radio" name="1on1_q2" value="2">2</input>
<input type="radio" name="1on1_q2" value="3">3</input>
<br />
<span>2QM:</span>
<input type="radio" name="1on1_q4" value="0">0</input>
<input type="radio" name="1on1_q4" value="1">1</input>
<input type="radio" name="1on1_q4" value="2">2</input>
<input type="radio" name="1on1_q4" value="3">3</input>
<br />
<span>Razvoj komp:</span>
<input type="radio" name="1on1_q6" value="0">0</input>
<input type="radio" name="1on1_q6" value="1">1</input>
<input type="radio" name="1on1_q6" value="2">2</input>
<input type="radio" name="1on1_q6" value="3">3</input>
</div>
</form>
</body>
</html>
Your code, for the most part, works fine. The main mistake you made was that you are trying to execute code on elements that don't yet exist. You need to either a) run the code at the end of the document, or more commonly b) put the code in a document.ready handler.
jsFiddle example
$( document ).ready(function() {
//your code here
});
Note that in the example fiddle that I added $('.huddle_q, .jnj_q').hide(); to hide the elements first when you change the drop down.

Categories