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

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.

Related

Adding and deleting input fields on click of a button in a form in HTML

Please run the below code.
i am a beginner in coding.
I am making a form which contains various fields.
As you can see that in the Education field on click of add education button I am successfully able to add another education field but I am not able to delete the exact field. Please help!
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment</title>
</head>
<body>
<h1>Candidate Information</h1>
<h2>Submit Your Info</h2>
<form>
<!-- name -->
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter your name" name="name" required><br />
<!-- gender -->
<br/><label for="gender"><b>Gender</b></label><br/>
<br/><label for="male"> Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female"> Female</label>
<input type="radio" id="female" name="gender" value="female" /><br />
<!-- address -->
<br /><label for="address"><b>Address</b></label>
<br /><textarea rows="6" name="address" cols="70" placeholder="Enter your address" maxlength="200" required></textarea><br />
<!-- email -->
<br/><label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter your email" name="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter the correct email" required><br />
<!-- phone -->
<br/><label for="phone"><b>Phone</b></label>
<input type="tel" placeholder="Enter your phone number" name="phone" pattern="[0-9]{10}" title="Phone number can only be 10 digits" required><br /><br />
<!-- education -->
<p><b>Education</b></p>
<div id="education">
<label for="level"><b>Level:</b></label>
<select name="level" id="level">
<option>-Please select a level-</option>
<option value="SSC">SSC</option>
<option value="HSSC">HSSC</option>
<option value="Diploma">Diploma</option>
<option value="BE">BE</option>
<option value="BTech">BTech</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
</select>
<label for="year"><b>Year</b></label>
<input type="number" name="year1" max="2020" min="2000" />
<label for="grade"><b>Grade/%</b></label>
<input type="text" name="grade1" />
</div>
<input name="addeducation" type="button" value="Add Education" onClick="addEducation('education');"><br/><br/>
<script>
var counter = 1;
var limit = 4;
function addEducation(divname) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className='addeduclass'+counter;
newdiv.innerHTML = "<label><b>Level: </b><label/>" + "<select><option>-Please select a level-</option><option value='SSC'>SSC</option><option value='HSSC'>HSSC</option><option value='Diploma'>Diploma</option><option value='BE'>BE</option><option value='BTech'>BTech</option><option value='BCA'>BCA</option><option value='MCA'>MCA</option></select>" +
"<label><b> Year</b><label/> " + "<input type='number' name='year' max='2020' min='2000'/>" +
"<label><b>Grade/%</b><label/> " + "<input type='text' name='grade'/>"+
"<button type='button' onClick='removeEducation('education',newdiv.className)'>Remove</button>";
document.getElementById(divname).appendChild(newdiv);
counter++;
console.log(counter);
console.log(newdiv.className);
}
}
function removeEducation(edudiv,divname) {
console.log("deleted");
document.getElementsByClassName(edudiv).removeChild(divname);
counter--;
}
</script>
<!-- skills -->
<p><b>Skills</b></p>
<div id="skills">
<label for="skillname"><b>Name</b></label>
<input type="text" name="skillname">
<label for="rating"><b>Rating:</b></label>
<select name="rating" id="rating">
<option>-Please select a rating-</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<input name="addskill" type="button" value="Add Skill" onClick="addSkill('skills');"><br/>
<script>
var skillcounter = 1;
var skilllimit = 3;
function addSkill(divname1) {
if (skillcounter == skilllimit) {
alert("You have reached the limit of adding " + skillcounter + " inputs");
}
else {
var snewdiv = document.createElement('div');
snewdiv.className="addskillclass"
snewdiv.innerHTML = "<label><b>Name</b></label>" + "<input type='text' name='skillname1'/>"+
"<label><b>Rating:</b></label>" + "<select><option>-Please select a rating-</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><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option></select>";
document.getElementById(divname1).append(snewdiv);
skillcounter++;
console.log(counter);
}
}
// function removeSkill(divname1) {
// }
</script>
<!-- hobby -->
<br/>
<label for="hobby"><b>Hobby</b></label>
<input type="text" placeholder="Enter your hobby" name="hobby"><br /><br />
<!-- photourl -->
<label for="photourl"><b>Photo</b></label>
<input type="url" name="photourl" placeholder="photo url" /><br />
<!-- submit -->
<input type="submit" value="Submit" />
</form>
</body>
</html>

You could simplify this a little like so:
Pass the delete button into the function removeEducation using the keyword this, so change to the following on your delete education buttons:
onClick='removeEducation(this);'
Then in your removeEduction function, you pass in the delete button which is clicked, traverse it to the parent node of the parent div of the button and then use removeChild to remove the parent div of the delete button:
function removeEducation(deleteButton) {
deleteButton.parentNode.parentNode.removeChild(deleteButton.parentNode);
counter--;
}
Just a small piece of advice, it is recommended to add event handling to elements via javascript using .addEventListener instead of inline in the html You can read more about that here (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment</title>
</head>
<body>
<h1>Candidate Information</h1>
<h2>Submit Your Info</h2>
<form>
<!-- name -->
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter your name" name="name" required><br />
<!-- gender -->
<br/><label for="gender"><b>Gender</b></label><br/>
<br/><label for="male"> Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female"> Female</label>
<input type="radio" id="female" name="gender" value="female" /><br />
<!-- address -->
<br /><label for="address"><b>Address</b></label>
<br /><textarea rows="6" name="address" cols="70" placeholder="Enter your address" maxlength="200" required></textarea><br />
<!-- email -->
<br/><label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter your email" name="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter the correct email" required><br />
<!-- phone -->
<br/><label for="phone"><b>Phone</b></label>
<input type="tel" placeholder="Enter your phone number" name="phone" pattern="[0-9]{10}" title="Phone number can only be 10 digits" required><br /><br />
<!-- education -->
<p><b>Education</b></p>
<div id="education">
<label for="level"><b>Level:</b></label>
<select name="level" id="level">
<option>-Please select a level-</option>
<option value="SSC">SSC</option>
<option value="HSSC">HSSC</option>
<option value="Diploma">Diploma</option>
<option value="BE">BE</option>
<option value="BTech">BTech</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
</select>
<label for="year"><b>Year</b></label>
<input type="number" name="year1" max="2020" min="2000" />
<label for="grade"><b>Grade/%</b></label>
<input type="text" name="grade1" />
</div>
<input name="addeducation" type="button" value="Add Education" onClick="addEducation('education');"><br/><br/>
<script>
var counter = 1;
var limit = 4;
function addEducation(divname) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className='addeduclass'+counter;
newdiv.innerHTML = `<label><b>Level: </b><label/>
<select>
<option>-Please select a level-</option>
<option value='SSC'>SSC</option>
<option value='HSSC'>HSSC</option>
<option value='Diploma'>Diploma</option>
<option value='BE'>BE</option>
<option value='BTech'>BTech</option>
<option value='BCA'>BCA</option>
<option value='MCA'>MCA</option>
</select>
<label><b> Year</b><label/> <input type='number' name='year' max='2020' min='2000'/>
<label><b>Grade/%</b><label/> <input type='text' name='grade'/>
<button type='button' onClick="removeEducation('education','${newdiv.className}')">Remove</button>`;
document.getElementById(divname).appendChild(newdiv);
counter++;
console.log(counter);
console.log(newdiv.className);
}
}
function removeEducation(edudiv,divname) {
console.log("deleted");
document.getElementById(edudiv).removeChild(document.getElementsByClassName(divname)[0]);
counter--;
}
</script>
<!-- skills -->
<p><b>Skills</b></p>
<div id="skills">
<label for="skillname"><b>Name</b></label>
<input type="text" name="skillname">
<label for="rating"><b>Rating:</b></label>
<select name="rating" id="rating">
<option>-Please select a rating-</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<input name="addskill" type="button" value="Add Skill" onClick="addSkill('skills');"><br/>
<script>
var skillcounter = 1;
var skilllimit = 3;
function addSkill(divname1) {
if (skillcounter == skilllimit) {
alert("You have reached the limit of adding " + skillcounter + " inputs");
}
else {
var snewdiv = document.createElement('div');
snewdiv.className="addskillclass"
snewdiv.innerHTML = "<label><b>Name</b></label>" + "<input type='text' name='skillname1'/>"+
"<label><b>Rating:</b></label>" + "<select><option>-Please select a rating-</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><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option></select>";
document.getElementById(divname1).append(snewdiv);
skillcounter++;
console.log(counter);
}
}
// function removeSkill(divname1) {
// }
</script>
<!-- hobby -->
<br/>
<label for="hobby"><b>Hobby</b></label>
<input type="text" placeholder="Enter your hobby" name="hobby"><br /><br />
<!-- photourl -->
<label for="photourl"><b>Photo</b></label>
<input type="url" name="photourl" placeholder="photo url" /><br />
<!-- submit -->
<input type="submit" value="Submit" />
</form>
</body>
</html>
Try this out. It worked. Made few changes to the remove function

Duplicate form generated in a for loop not getting required value

I have a form that duplicates via a for loop based on the number of people entered for registration. There is a field on the form with a select dropdown. There is also a text field that displays the value of the selected dropdown item. This is done via javascript.
<?Php for ($i=0; $i<$totalpersons; $i++) { ?>
<div>
<span><label>SURNAME *</label></span>
<span><input name="surname[]" type="text" class="textbox" id="surname" required></span>
</div>
<div class="clear_3"></div>
<div>
<span><label>FIRST NAME *</label></span>
<span><input name="firstname[]" type="text" class="textbox" id="firstname" required></span>
</div>
<div class="clear_3"></div>
<div>
<span><label>OTHER NAME</label></span>
<span><input name="othername[]" type="text" class="textbox" id="othername"></span>
</div>
<div class="clear_3"></div>
<div>
<span><label>DOB *</label></span>
<span><input name="dob[]" type="text" class="textbox" id="dob" required></span>
</div>
<div class="clear_3"></div>
<div>
<span><label>GENDER *</label></span>
<span>
<select name="gender[]" id="gender" tabindex="1" aria-hidden="true" required style="width: 100%; display: block;height:50px;padding:10px;">
<option value="" selected="selected"></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</span>
</div>
<div class="clear_3"></div>
<div>
<span><label>AGE RANGE *</label></span>
<span>
<select name="screeningamount[]" id="screeningamount" tabindex="1" aria-hidden="true" required style="width: 100%; display: block;height:50px;padding:10px;" onClick="GetSelectedValue()">
<option value="" selected="selected"></option>
<option value="25000" id="0yrsto4yrs">0 YEAR TO 4 YEARS</option>
<option value="27000" id="5yrsto10yrs">5 YEARS TO 10 YEARS</option>
<option value="31000" id="11yrsto14yrs">11 YEARS TO 14 YEARS</option>
<option value="35000" id="15yrsabove">15 YEARS AND ABOVE</option>
</select>
</span>
</div>
<div class="clear_3"></div>
<div>
<span><label>AMOUNT DUE(₦):</label></span>
<span><input name="amount" type="text" class="textbox" id="amount" readonly></span>
</div>
<div class="clear_3"></div>
<div>
<span><label>E-MAIL *</label></span>
<span><input name="email[]" type="text" class="textbox" id="email" required></span>
</div>
<div class="clear_3"></div>
<div>
<span><label>PHONE *</label></span>
<span><input name="phone[]" type="text" class="textbox" id="phone" required></span>
</div>
<?Php } ?>
The challenge I have is this, if the number of forms generated is above one, when I select a value from the Age Range select dropdown, the text box for the first form is populated correctly as it should be. but when I select a value from the select dropdown on the second form, the textbox is not populated.
the javascript code used is below:
function GetSelectedValue(){
var select = document.getElementById('screeningamount');
var input = document.getElementById('amount');
select.onchange = function() {
input.value = select.value;
}
}
How do I solve the problem? I need each form irrespective of the number of forms generated, to be able to display the value of the select dropdown on each form

Field only required if certain dropdown is selected in a HTML form

I was wondering how a certain field is required only if a certain dropdown is selected. In my form, the person would select "Canada" and two fields underneath will appear(province and postal code), which are required before person submits the form. And if the person selected "United States", the state and zip code will appear instead.
The trouble i am having is that if i choose either country, the fields that are not associated with that country are still required even though they are hidden. I need it so that if i choose United States, then province nor postal code would be required, and the same the other way around.
Any help is greatly appreciated:) Here is the form
<script type='text/javascript'>//<![CDATA[
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#province').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
$('#province').prop('required',false);
}
});
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#postalselect').show();
$('#postal').prop('required',true);
} else {
$('#postalselect').prop('required',false);
$('#postalselect').hide();
$('#postal').prop('required',false);
}
});
</script>
<!--HTML Form-->
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname">
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<!--Country select-->
<select class="countrycss" id="country" name="country" required>
<option value="" selected="selected">Please Select Country</option>
<option value="Canada" id="Canada">Canada</option>
<option value="United States" id="United States">United States</option>
</select>
<!--Province select-->
<div id="provinceselect" style="display:none;">
<select class="provincecss" id="province" name="province" required>
<option value="" selected="selected">Please Select Province</option>
<option value="Alberta" id="Alberta">Alberta</option>
<option value="British Coloumbia" id="British Coloumbia">British Coloumbia</option>
</select>
</div>
<!--State select-->
<div id="stateselect" style="display:none;">
<select class="statecss" id="state" name="state">
<option value="" selected="selected">Please Select State</option>
<option value="Arkansas" id="Arkansas">Alaska</option>
<option value="Hawalli" id="Hawalli">Hawalli</option>
</select>
</div>
<!--Postal select-->
<div id="postalselect" style="display:none;">
<input placeholder="Postal Code" type="text" name="postal" required>
</div>
<!--Zip select-->
<div id="zipselect" style="display:none;">
<input placeholder="ZipCode" type="text" name="zip" required>
</div>
<input placeholder="City" type="text" name="city" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping" />
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>

You could use the .prop() method, so for each of your .change you will have something like
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#provinceselect').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
}
});
I'm curious as to why you have four different instances of .change() I would have put them all under the same instance of change() since they are all reacting to the same thing.

Yeah, remove the required field from the optional fields and add them by using prop() method.

My form won't Submit - is this because I have a Div in the form?

I am trying to create a form which has a select input at the top, and when 2 of 3 options are selected the rest of the form appears to be filled in. This works, however the back and submit buttons don't work now. I can't figure out why this is, I am thinking that it might have something to do with not being allowed to have DIVs within a form, but I always thought you could?
My Code is below, any advice on how to get the submit and back button to work??
<div class="form">
Does the Claimant have a PAB/CAB? <br><br>
<select id="PABandCAB" required onchange="showDiv(this)">
<option value="select" disabled selected>Please Select</option>
<option value="Confirmed">Confirmed</option>
<option value="Confirmed">Potential</option>
<option value="NotRequired">Not Required</option>
</select> <br><br><br>
<form action="InternalRef4.html">
<div id="hidden_div">
<hr> <br>
Title:
<select name="title"required>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Mr</option>
<option value="Dr">Dr</option>
</select> <br><br>
First Name:
<input type="text" name="fname"required><br> <br>
Surname:
<input type="text" name="sname"required><br> <br>
Address:
<select name="Address"required>
<option value="Same">Same As Claimant</option>
<option value="other">Other</option>
</select><br> <br>
Representative Address Line 1:
<input type="text" name="HALine1"><br> <br>
Representative Address Line 2:
<input type="text" name="HALine2"><br> <br>
Representative Address Town/City:
<input type="text" name="HATownorCity"><br> <br>
Representative Address County:
<input type="text" name="HACounty"><br> <br>
Representative Address Post Code:
<input type="text" name="HAPostCode"><br> <br>
National Insurance Number:
<input type="text" name="NINO"><br><br>
Date of Birth:
<input type="date" name="DOB"><br><br>
Contact Number - Home:
<input type="text" name="ContactNumHome"><br> <br>
Contact Number - Mobile:
<input type="text" name="ContactNumMobile"><br> <br>
Contact Number - Other:
<input type="text" name="ContactNumOther"><br> <br>
Unacceptable Customer Behaviour (UCB): <br>
No <input type="radio" name="UCBNO" value="No" checked><br>
Yes <input type="radio" name="UCBYes" value="Yes"><br> <br>
</div>
<input type="button" value="Back"/>
<input type="submit">
</form>
</div>
<script>
var select = document.getElementById('PABandCAB'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == "Confirmed";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
</script>

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

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>

Categories