Radio input values not populating
-3
I am trying to populate the radio input values on the page but the code I used below does not work. It does not populate, fetch or show on the database and the front page.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
</div>javascript jquery html forms input
edited Nov 14 '18 at 22:38
Yas Ikeda
32528
asked Nov 14 '18 at 20:03
LejendaryLejendary
31
add a comment |
-3
I am trying to populate the radio input values on the page but the code I used below does not work. It does not populate, fetch or show on the database and the front page.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
</div>javascript jquery html forms input
edited Nov 14 '18 at 22:38
Yas Ikeda
32528
asked Nov 14 '18 at 20:03
LejendaryLejendary
31
the code is incomplete. Nowhere in the above provided code it does any population or fetching of data. All your code is doing is showing an element of given class name. You didn't put the whole code. Can't help, sorry.
– Nawed Khan
Nov 14 '18 at 20:16
Are you seeing any errors in the JavaScript console?
– Barmar
Nov 14 '18 at 20:20
add a comment |
-3
-3
-3
I am trying to populate the radio input values on the page but the code I used below does not work. It does not populate, fetch or show on the database and the front page.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
</div>javascript jquery html forms input
edited Nov 14 '18 at 22:38
Yas Ikeda
32528
asked Nov 14 '18 at 20:03
LejendaryLejendary
31
I am trying to populate the radio input values on the page but the code I used below does not work. It does not populate, fetch or show on the database and the front page.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
</div>$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
</div>$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
</div>javascript jquery html forms input
javascript jquery html forms input
edited Nov 14 '18 at 22:38
Yas Ikeda
32528
asked Nov 14 '18 at 20:03
LejendaryLejendary
31
edited Nov 14 '18 at 22:38
Yas Ikeda
32528
asked Nov 14 '18 at 20:03
LejendaryLejendary
31
edited Nov 14 '18 at 22:38
Yas Ikeda
32528
edited Nov 14 '18 at 22:38
Yas Ikeda
32528
edited Nov 14 '18 at 22:38
Yas Ikeda
32528
32528
asked Nov 14 '18 at 20:03
LejendaryLejendary
31
asked Nov 14 '18 at 20:03
LejendaryLejendary
31
asked Nov 14 '18 at 20:03
LejendaryLejendary
31
31
the code is incomplete. Nowhere in the above provided code it does any population or fetching of data. All your code is doing is showing an element of given class name. You didn't put the whole code. Can't help, sorry.
– Nawed Khan
Nov 14 '18 at 20:16
Are you seeing any errors in the JavaScript console?
– Barmar
Nov 14 '18 at 20:20
add a comment |
the code is incomplete. Nowhere in the above provided code it does any population or fetching of data. All your code is doing is showing an element of given class name. You didn't put the whole code. Can't help, sorry.
– Nawed Khan
Nov 14 '18 at 20:16
Are you seeing any errors in the JavaScript console?
– Barmar
Nov 14 '18 at 20:20
the code is incomplete. Nowhere in the above provided code it does any population or fetching of data. All your code is doing is showing an element of given class name. You didn't put the whole code. Can't help, sorry.
– Nawed Khan
Nov 14 '18 at 20:16
the code is incomplete. Nowhere in the above provided code it does any population or fetching of data. All your code is doing is showing an element of given class name. You didn't put the whole code. Can't help, sorry.
– Nawed Khan
Nov 14 '18 at 20:16
Are you seeing any errors in the JavaScript console?
– Barmar
Nov 14 '18 at 20:20
Are you seeing any errors in the JavaScript console?
– Barmar
Nov 14 '18 at 20:20
add a comment |
2 Answers
2
active
oldest
votes
0
Besides the fact that your HTML and JavaScript is not correct I will try to show you how to show and hide elements based on the selected value.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>To dynamically set the checked value of the radio group you first select the radio group and specify it with the radio input based on the data-rel aatribute.
var value = 'yes';
$("input[name=option][data-rel=" + value + "]").prop('checked', 'checked');
answered Nov 14 '18 at 20:20
TarabassTarabass
2,88021230
add a comment |
0
I believe the problem you're having is syntactical in nature. If your code is exactly as you have it above, you're missing your closing }); on your $(document).ready(function(){});.
I've recreated your code in this Fiddle. It seems to be working as I understand your problem.
answered Nov 14 '18 at 20:18
RyanRyan
3169
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307963%2fradio-input-values-not-populating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Besides the fact that your HTML and JavaScript is not correct I will try to show you how to show and hide elements based on the selected value.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>To dynamically set the checked value of the radio group you first select the radio group and specify it with the radio input based on the data-rel aatribute.
var value = 'yes';
$("input[name=option][data-rel=" + value + "]").prop('checked', 'checked');
answered Nov 14 '18 at 20:20
TarabassTarabass
2,88021230
add a comment |
0
Besides the fact that your HTML and JavaScript is not correct I will try to show you how to show and hide elements based on the selected value.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>To dynamically set the checked value of the radio group you first select the radio group and specify it with the radio input based on the data-rel aatribute.
var value = 'yes';
$("input[name=option][data-rel=" + value + "]").prop('checked', 'checked');
answered Nov 14 '18 at 20:20
TarabassTarabass
2,88021230
add a comment |
0
0
0
Besides the fact that your HTML and JavaScript is not correct I will try to show you how to show and hide elements based on the selected value.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>To dynamically set the checked value of the radio group you first select the radio group and specify it with the radio input based on the data-rel aatribute.
var value = 'yes';
$("input[name=option][data-rel=" + value + "]").prop('checked', 'checked');
answered Nov 14 '18 at 20:20
TarabassTarabass
2,88021230
Besides the fact that your HTML and JavaScript is not correct I will try to show you how to show and hide elements based on the selected value.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>To dynamically set the checked value of the radio group you first select the radio group and specify it with the radio input based on the data-rel aatribute.
var value = 'yes';
$("input[name=option][data-rel=" + value + "]").prop('checked', 'checked');
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});.show_field {display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>answered Nov 14 '18 at 20:20
TarabassTarabass
2,88021230
edited Nov 14 '18 at 20:35
answered Nov 14 '18 at 20:20
TarabassTarabass
2,88021230
answered Nov 14 '18 at 20:20
TarabassTarabass
2,88021230
answered Nov 14 '18 at 20:20
TarabassTarabass
2,88021230
2,88021230
add a comment |
add a comment |
0
I believe the problem you're having is syntactical in nature. If your code is exactly as you have it above, you're missing your closing }); on your $(document).ready(function(){});.
I've recreated your code in this Fiddle. It seems to be working as I understand your problem.
answered Nov 14 '18 at 20:18
RyanRyan
3169
add a comment |
0
I believe the problem you're having is syntactical in nature. If your code is exactly as you have it above, you're missing your closing }); on your $(document).ready(function(){});.
I've recreated your code in this Fiddle. It seems to be working as I understand your problem.
answered Nov 14 '18 at 20:18
RyanRyan
3169
add a comment |
0
0
0
I believe the problem you're having is syntactical in nature. If your code is exactly as you have it above, you're missing your closing }); on your $(document).ready(function(){});.
I've recreated your code in this Fiddle. It seems to be working as I understand your problem.
answered Nov 14 '18 at 20:18
RyanRyan
3169
I believe the problem you're having is syntactical in nature. If your code is exactly as you have it above, you're missing your closing }); on your $(document).ready(function(){});.
I've recreated your code in this Fiddle. It seems to be working as I understand your problem.
answered Nov 14 '18 at 20:18
RyanRyan
3169
answered Nov 14 '18 at 20:18
RyanRyan
3169
answered Nov 14 '18 at 20:18
RyanRyan
3169
answered Nov 14 '18 at 20:18
RyanRyan
3169
3169
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307963%2fradio-input-values-not-populating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
the code is incomplete. Nowhere in the above provided code it does any population or fetching of data. All your code is doing is showing an element of given class name. You didn't put the whole code. Can't help, sorry.
– Nawed Khan
Nov 14 '18 at 20:16
Are you seeing any errors in the JavaScript console?
– Barmar
Nov 14 '18 at 20:20