Javascript + PHP - Populate select based on radio option, but grab the result from database

Multi tool use
Multi tool use





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















Right now I am using a static array in my javascript and I would like to change it to get the info from my MariaDB table. I have one radio select (yes/no) that should determine which entries are selected to populate the select field, if yes, get the DB results for A, B, C, if no, get X, Y, Z.



<script type="text/javascript">    
$(function() {
var primaryDisposition = {
1: ['A', 'B', 'C'],
2: ['X', 'Y', 'Z']
};
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
});
</script>


EDIT:
I switched to using ajax, even though fetch would work just as well.
I do have a question, the following does get the data I want, but I am not sure on the best way to make it
so when I click on the radio Yes it will populate the select field.



$(function() {
$.ajax({
method: 'GET',
url: "/dispositions",
success: function(data){
let primaryDisposition = data;
$('#radioDispositionGroup input[type=radio]').click(function(){
let options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition, function(i, v) {
options += '<option value="'+ v.id +'">' + v.description + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
console.log('Success0 '+ data[0].description); //using data[0] so I can see the test data
}
});
});









share|improve this question




















  • 1





    You're going to need some AJAX.

    – Jay Blanchard
    Jan 3 at 21:49











  • An actual question would also help.

    – Patrick Q
    Jan 3 at 22:19


















0















Right now I am using a static array in my javascript and I would like to change it to get the info from my MariaDB table. I have one radio select (yes/no) that should determine which entries are selected to populate the select field, if yes, get the DB results for A, B, C, if no, get X, Y, Z.



<script type="text/javascript">    
$(function() {
var primaryDisposition = {
1: ['A', 'B', 'C'],
2: ['X', 'Y', 'Z']
};
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
});
</script>


EDIT:
I switched to using ajax, even though fetch would work just as well.
I do have a question, the following does get the data I want, but I am not sure on the best way to make it
so when I click on the radio Yes it will populate the select field.



$(function() {
$.ajax({
method: 'GET',
url: "/dispositions",
success: function(data){
let primaryDisposition = data;
$('#radioDispositionGroup input[type=radio]').click(function(){
let options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition, function(i, v) {
options += '<option value="'+ v.id +'">' + v.description + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
console.log('Success0 '+ data[0].description); //using data[0] so I can see the test data
}
});
});









share|improve this question




















  • 1





    You're going to need some AJAX.

    – Jay Blanchard
    Jan 3 at 21:49











  • An actual question would also help.

    – Patrick Q
    Jan 3 at 22:19














0












0








0








Right now I am using a static array in my javascript and I would like to change it to get the info from my MariaDB table. I have one radio select (yes/no) that should determine which entries are selected to populate the select field, if yes, get the DB results for A, B, C, if no, get X, Y, Z.



<script type="text/javascript">    
$(function() {
var primaryDisposition = {
1: ['A', 'B', 'C'],
2: ['X', 'Y', 'Z']
};
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
});
</script>


EDIT:
I switched to using ajax, even though fetch would work just as well.
I do have a question, the following does get the data I want, but I am not sure on the best way to make it
so when I click on the radio Yes it will populate the select field.



$(function() {
$.ajax({
method: 'GET',
url: "/dispositions",
success: function(data){
let primaryDisposition = data;
$('#radioDispositionGroup input[type=radio]').click(function(){
let options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition, function(i, v) {
options += '<option value="'+ v.id +'">' + v.description + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
console.log('Success0 '+ data[0].description); //using data[0] so I can see the test data
}
});
});









share|improve this question
















Right now I am using a static array in my javascript and I would like to change it to get the info from my MariaDB table. I have one radio select (yes/no) that should determine which entries are selected to populate the select field, if yes, get the DB results for A, B, C, if no, get X, Y, Z.



<script type="text/javascript">    
$(function() {
var primaryDisposition = {
1: ['A', 'B', 'C'],
2: ['X', 'Y', 'Z']
};
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
});
</script>


EDIT:
I switched to using ajax, even though fetch would work just as well.
I do have a question, the following does get the data I want, but I am not sure on the best way to make it
so when I click on the radio Yes it will populate the select field.



$(function() {
$.ajax({
method: 'GET',
url: "/dispositions",
success: function(data){
let primaryDisposition = data;
$('#radioDispositionGroup input[type=radio]').click(function(){
let options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition, function(i, v) {
options += '<option value="'+ v.id +'">' + v.description + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
console.log('Success0 '+ data[0].description); //using data[0] so I can see the test data
}
});
});






javascript php jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 10 at 18:54







Dyasis

















asked Jan 3 at 21:47









DyasisDyasis

95




95








  • 1





    You're going to need some AJAX.

    – Jay Blanchard
    Jan 3 at 21:49











  • An actual question would also help.

    – Patrick Q
    Jan 3 at 22:19














  • 1





    You're going to need some AJAX.

    – Jay Blanchard
    Jan 3 at 21:49











  • An actual question would also help.

    – Patrick Q
    Jan 3 at 22:19








1




1





You're going to need some AJAX.

– Jay Blanchard
Jan 3 at 21:49





You're going to need some AJAX.

– Jay Blanchard
Jan 3 at 21:49













An actual question would also help.

– Patrick Q
Jan 3 at 22:19





An actual question would also help.

– Patrick Q
Jan 3 at 22:19












1 Answer
1






active

oldest

votes


















0














If you want to use something like fetch to get a javascript array to work with like you are doing on your code then you can use this example for your php page: JSON encode MySQL results



Your fetch code would look something like:



fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function(data) {
// Your code for handling the data you get from the API
let primaryDisposition = JSON.parse(primaryDisposition)
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
})
.catch(function() {
// This is where you run code if the server returns any errors
});





share|improve this answer
























  • I updated my question, if you have time to review.

    – Dyasis
    Jan 10 at 18:35












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


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030254%2fjavascript-php-populate-select-based-on-radio-option-but-grab-the-result-fr%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














If you want to use something like fetch to get a javascript array to work with like you are doing on your code then you can use this example for your php page: JSON encode MySQL results



Your fetch code would look something like:



fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function(data) {
// Your code for handling the data you get from the API
let primaryDisposition = JSON.parse(primaryDisposition)
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
})
.catch(function() {
// This is where you run code if the server returns any errors
});





share|improve this answer
























  • I updated my question, if you have time to review.

    – Dyasis
    Jan 10 at 18:35
















0














If you want to use something like fetch to get a javascript array to work with like you are doing on your code then you can use this example for your php page: JSON encode MySQL results



Your fetch code would look something like:



fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function(data) {
// Your code for handling the data you get from the API
let primaryDisposition = JSON.parse(primaryDisposition)
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
})
.catch(function() {
// This is where you run code if the server returns any errors
});





share|improve this answer
























  • I updated my question, if you have time to review.

    – Dyasis
    Jan 10 at 18:35














0












0








0







If you want to use something like fetch to get a javascript array to work with like you are doing on your code then you can use this example for your php page: JSON encode MySQL results



Your fetch code would look something like:



fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function(data) {
// Your code for handling the data you get from the API
let primaryDisposition = JSON.parse(primaryDisposition)
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
})
.catch(function() {
// This is where you run code if the server returns any errors
});





share|improve this answer













If you want to use something like fetch to get a javascript array to work with like you are doing on your code then you can use this example for your php page: JSON encode MySQL results



Your fetch code would look something like:



fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function(data) {
// Your code for handling the data you get from the API
let primaryDisposition = JSON.parse(primaryDisposition)
$('#radioDispositionGroup input[type=radio]').click(function(){
var options = '<option disabled selected>Choose one</option>';
$.each(primaryDisposition[$(this).val()] || , function(i, v) {
options += '<option>' + v + '</option>';
});
$('select[name="selectDisposition"]').html(options);
});
})
.catch(function() {
// This is where you run code if the server returns any errors
});






share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 3 at 22:12









Christopher KarlssonChristopher Karlsson

186115




186115













  • I updated my question, if you have time to review.

    – Dyasis
    Jan 10 at 18:35



















  • I updated my question, if you have time to review.

    – Dyasis
    Jan 10 at 18:35

















I updated my question, if you have time to review.

– Dyasis
Jan 10 at 18:35





I updated my question, if you have time to review.

– Dyasis
Jan 10 at 18:35




















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














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030254%2fjavascript-php-populate-select-based-on-radio-option-but-grab-the-result-fr%23new-answer', 'question_page');
}
);

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







tx,TID7rt9ri1FoX7WqL4R PEoUb0labApoUP,gnp xth s6te2w DOnuGxS,Z
DnxCK BL66,OBBMF0tE,NN p0Ly,PncxReeX6FNBFnRW CBnuqds

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas