JQuery function not responsive for radio buttons
Question
This has been a very tricky one for me (or I'm just downright dumb). Trying to use a JQuery function to make it that when the user selects a certain radio button, the form below changes accordingly (eg an individual sees name, company, title, phone, email and address. company only sees company, phone, email and address. But currently clicking the radio buttons have no effect.
I would also like to ask if: 1) is my function $('#contactType>input'). in the right place (within the ) or should it be somewhere else? 2) Could I use a index.js file instead to make it easier? And if so, how to do link the index.js? Is it just
Cheers.
$(document).ready(function() { listenForInputChanges(); }) function listenForInputChanges() { $('#contactType >input').change(function() { console.log('val is ' + $(this).val()) switch ($(this).val()) { case 'individual': $('#nameDiv').show(); $('#companyDiv').show(); $('#titleDiv').show(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; case 'team': $('#nameDiv').show(); $('#companyDiv').show(); $('#titleDiv').hide(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; case 'company': $('#nameDiv').hide(); $('#companyDiv').show(); $('#titleDiv').hide(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; } }) }
<!DOCTYPE html> <html> <head> <title>Create new contact</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="row"> <form method="post" class="form-horizontal col-md-6 col-md-offset-3"> <h2>Motoko Insurance Contacts</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <label for="input" class="col-sm-6 control-label">What type of contact are you adding?</label> <div id="contactType" class="col-sm-10"> <input type="radio" name="Contact_type" value="individual"> Individual <input type="radio" name="Contact_type" value="team"> Team <input type="radio" name="Contact_type" value="company"> Company</div> </div> <div id="nameDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" name="name" class="form-control" id="input1" placeholder="Name" /> </div> </div> <div id="companyDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Company</label> <div class="col-sm-10"> <input type="text" name="comp" class="form-control" id="input1" placeholder="Company" /> </div> </div> <div id="titleDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Title</label> <div class="col-sm-10"> <input type="text" name="title" class="form-control" id="input1" placeholder="Title" /> </div> </div> <div id="phoneDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Phone</label> <div class="col-sm-10"> <input type="int" name="urstel" class="form-control" id="input1" placeholder="Phone" /> </div> </div> <div id="emailDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">E-Mail</label> <div class="col-sm-10"> <input type="email" name="email" class="form-control" id="input1" placeholder="E-mail" /> </div> </div> <div id="addressDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Address</label> <div class="col-sm-10"> <input type="text" name="location" class="form-control" id="input1" placeholder="Address" /> </div> </div> <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" /> </form> </div> </div> </body> </html>
2 answers
solution1
5 ACCPTED 2018-02-14 23:33:30
You were missing the jQuery lib. Remember to add it in the <head> section of your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() { listenForInputChanges(); }) function listenForInputChanges() { $('#contactType >input').change(function() { console.log('val is ' + $(this).val()) switch ($(this).val()) { case 'individual': $('#nameDiv').show(); $('#companyDiv').show(); $('#titleDiv').show(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; case 'team': $('#nameDiv').show(); $('#companyDiv').show(); $('#titleDiv').hide(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; case 'company': $('#nameDiv').hide(); $('#companyDiv').show(); $('#titleDiv').hide(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; } }) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Create new contact</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="row"> <form method="post" class="form-horizontal col-md-6 col-md-offset-3"> <h2>Motoko Insurance Contacts</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <label for="input" class="col-sm-6 control-label">What type of contact are you adding?</label> <div id="contactType" class="col-sm-10"> <input type="radio" name="Contact_type" value="individual"> Individual <input type="radio" name="Contact_type" value="team"> Team <input type="radio" name="Contact_type" value="company"> Company</div> </div> <div id="nameDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" name="name" class="form-control" id="input1" placeholder="Name" /> </div> </div> <div id="companyDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Company</label> <div class="col-sm-10"> <input type="text" name="comp" class="form-control" id="input1" placeholder="Company" /> </div> </div> <div id="titleDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Title</label> <div class="col-sm-10"> <input type="text" name="title" class="form-control" id="input1" placeholder="Title" /> </div> </div> <div id="phoneDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Phone</label> <div class="col-sm-10"> <input type="int" name="urstel" class="form-control" id="input1" placeholder="Phone" /> </div> </div> <div id="emailDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">E-Mail</label> <div class="col-sm-10"> <input type="email" name="email" class="form-control" id="input1" placeholder="E-mail" /> </div> </div> <div id="addressDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Address</label> <div class="col-sm-10"> <input type="text" name="location" class="form-control" id="input1" placeholder="Address" /> </div> </div> <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" /> </form> </div> </div> </body> </html>
solution2
1 2018-02-14 23:40:15
To put your JavaScript in a separate file, just create a javascript file in the same directory as you .html file(For example: 'index.js'). After that put your Javascript that you have made in that file. Now you can include it using script tags:
<script type="text/javascript" src="index.js"></script>
src points the path of the index.js file relative to your .html file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery post function with radio buttons
Jquery .val() function to check the value of radio buttons
jQuery datatables responsive buttons
jQuery Custom Radio Buttons not working as radio buttons
Jquery UI - radio buttons
Using Jquery with Radio buttons
jQuery mobile radio buttons
jquery radio buttons not switching?
jquery calculations with radio buttons
JQuery with radio buttons not working
Related Tags