Populate dropdown when editing a form using javascript
0
I have a dropdown like in below:-
<form name="depositForm" action="<?php echo site_url('ajax_funds/deposit_funds'); ?>" id="depositForm" class="page-form-main form-horizontal " autocomplete="off" method="post">
<div class="form-group">
<label class="control-label col-sm-4" ></label>
<div class="col-sm-8 country-selector">
<select id="country" name="country" class="input-control">
<?php foreach ($countries as $country) { ?>
<option value='<?php echo $country['country_id']; ?>'><?php echo $country['short_name']; ?></option>
<?php } ?>
</select>
</div>
<script>
country = 'AF';
$('#country').selectize({
allowEmptyOption: true,
create: true
});
$("#country").change(function () {
country = $("#country option:selected").val().toUpperCase();
});
$('#depositForm select[name="country"]').val(countryid);
</script>
So what I want is when I'm editing this form I want the country to be populated. I was trying the below code for this:-
$('#depositForm select[name="country"]').val(countryid);
countryid has the the id of the country that will be populated and I alerted countryid and it has the correct id of that country but the problem is this code is not working. countryid is coming from a ajax get request.
javascript jquery
asked Nov 26 '18 at 10:14
Alek StephanokAlek Stephanok
809
|
show 3 more comments
0
I have a dropdown like in below:-
<form name="depositForm" action="<?php echo site_url('ajax_funds/deposit_funds'); ?>" id="depositForm" class="page-form-main form-horizontal " autocomplete="off" method="post">
<div class="form-group">
<label class="control-label col-sm-4" ></label>
<div class="col-sm-8 country-selector">
<select id="country" name="country" class="input-control">
<?php foreach ($countries as $country) { ?>
<option value='<?php echo $country['country_id']; ?>'><?php echo $country['short_name']; ?></option>
<?php } ?>
</select>
</div>
<script>
country = 'AF';
$('#country').selectize({
allowEmptyOption: true,
create: true
});
$("#country").change(function () {
country = $("#country option:selected").val().toUpperCase();
});
$('#depositForm select[name="country"]').val(countryid);
</script>
So what I want is when I'm editing this form I want the country to be populated. I was trying the below code for this:-
$('#depositForm select[name="country"]').val(countryid);
countryid has the the id of the country that will be populated and I alerted countryid and it has the correct id of that country but the problem is this code is not working. countryid is coming from a ajax get request.
javascript jquery
asked Nov 26 '18 at 10:14
Alek StephanokAlek Stephanok
809
Where are you writing this jQuery Code?
– Umair Malhi
Nov 26 '18 at 10:22
Also you can check if $('#depositForm select[name="country"]').length is returning 1, as I don't see any depositForm in this code, so not sure if that's the issue
– Umair Malhi
Nov 26 '18 at 10:24
depositForm is the id of the form. It's a long form so I did n't included the entire one.
– Alek Stephanok
Nov 26 '18 at 10:28
I'm writing this jQuery code in the inside a function.
– Alek Stephanok
Nov 26 '18 at 10:29
1
Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 26 '18 at 10:35
|
show 3 more comments
0
0
0
I have a dropdown like in below:-
<form name="depositForm" action="<?php echo site_url('ajax_funds/deposit_funds'); ?>" id="depositForm" class="page-form-main form-horizontal " autocomplete="off" method="post">
<div class="form-group">
<label class="control-label col-sm-4" ></label>
<div class="col-sm-8 country-selector">
<select id="country" name="country" class="input-control">
<?php foreach ($countries as $country) { ?>
<option value='<?php echo $country['country_id']; ?>'><?php echo $country['short_name']; ?></option>
<?php } ?>
</select>
</div>
<script>
country = 'AF';
$('#country').selectize({
allowEmptyOption: true,
create: true
});
$("#country").change(function () {
country = $("#country option:selected").val().toUpperCase();
});
$('#depositForm select[name="country"]').val(countryid);
</script>
So what I want is when I'm editing this form I want the country to be populated. I was trying the below code for this:-
$('#depositForm select[name="country"]').val(countryid);
countryid has the the id of the country that will be populated and I alerted countryid and it has the correct id of that country but the problem is this code is not working. countryid is coming from a ajax get request.
javascript jquery
asked Nov 26 '18 at 10:14
Alek StephanokAlek Stephanok
809
I have a dropdown like in below:-
<form name="depositForm" action="<?php echo site_url('ajax_funds/deposit_funds'); ?>" id="depositForm" class="page-form-main form-horizontal " autocomplete="off" method="post">
<div class="form-group">
<label class="control-label col-sm-4" ></label>
<div class="col-sm-8 country-selector">
<select id="country" name="country" class="input-control">
<?php foreach ($countries as $country) { ?>
<option value='<?php echo $country['country_id']; ?>'><?php echo $country['short_name']; ?></option>
<?php } ?>
</select>
</div>
<script>
country = 'AF';
$('#country').selectize({
allowEmptyOption: true,
create: true
});
$("#country").change(function () {
country = $("#country option:selected").val().toUpperCase();
});
$('#depositForm select[name="country"]').val(countryid);
</script>
So what I want is when I'm editing this form I want the country to be populated. I was trying the below code for this:-
$('#depositForm select[name="country"]').val(countryid);
countryid has the the id of the country that will be populated and I alerted countryid and it has the correct id of that country but the problem is this code is not working. countryid is coming from a ajax get request.
javascript jquery
javascript jquery
asked Nov 26 '18 at 10:14
Alek StephanokAlek Stephanok
809
asked Nov 26 '18 at 10:14
Alek StephanokAlek Stephanok
809
edited Nov 27 '18 at 5:30
Alek Stephanok
asked Nov 26 '18 at 10:14
Alek StephanokAlek Stephanok
809
asked Nov 26 '18 at 10:14
Alek StephanokAlek Stephanok
809
asked Nov 26 '18 at 10:14
Alek StephanokAlek Stephanok
809
809
Where are you writing this jQuery Code?
– Umair Malhi
Nov 26 '18 at 10:22
Also you can check if $('#depositForm select[name="country"]').length is returning 1, as I don't see any depositForm in this code, so not sure if that's the issue
– Umair Malhi
Nov 26 '18 at 10:24
depositForm is the id of the form. It's a long form so I did n't included the entire one.
– Alek Stephanok
Nov 26 '18 at 10:28
I'm writing this jQuery code in the inside a function.
– Alek Stephanok
Nov 26 '18 at 10:29
1
Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 26 '18 at 10:35
|
show 3 more comments
Where are you writing this jQuery Code?
– Umair Malhi
Nov 26 '18 at 10:22
Also you can check if $('#depositForm select[name="country"]').length is returning 1, as I don't see any depositForm in this code, so not sure if that's the issue
– Umair Malhi
Nov 26 '18 at 10:24
depositForm is the id of the form. It's a long form so I did n't included the entire one.
– Alek Stephanok
Nov 26 '18 at 10:28
I'm writing this jQuery code in the inside a function.
– Alek Stephanok
Nov 26 '18 at 10:29
1
Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 26 '18 at 10:35
Where are you writing this jQuery Code?
– Umair Malhi
Nov 26 '18 at 10:22
Where are you writing this jQuery Code?
– Umair Malhi
Nov 26 '18 at 10:22
Also you can check if $('#depositForm select[name="country"]').length is returning 1, as I don't see any depositForm in this code, so not sure if that's the issue
– Umair Malhi
Nov 26 '18 at 10:24
Also you can check if $('#depositForm select[name="country"]').length is returning 1, as I don't see any depositForm in this code, so not sure if that's the issue
– Umair Malhi
Nov 26 '18 at 10:24
depositForm is the id of the form. It's a long form so I did n't included the entire one.
– Alek Stephanok
Nov 26 '18 at 10:28
depositForm is the id of the form. It's a long form so I did n't included the entire one.
– Alek Stephanok
Nov 26 '18 at 10:28
I'm writing this jQuery code in the inside a function.
– Alek Stephanok
Nov 26 '18 at 10:29
I'm writing this jQuery code in the inside a function.
– Alek Stephanok
Nov 26 '18 at 10:29
1
1
Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 26 '18 at 10:35
Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 26 '18 at 10:35
|
show 3 more comments
1 Answer
1
active
oldest
votes
0
I would Use Select2 (https://select2.org/data-sources/ajax). You just need to create a function that gets the list of countries to build your options.
answered Nov 27 '18 at 5:37
Raffaele ColleoRaffaele Colleo
459
add a comment |
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%2f53478915%2fpopulate-dropdown-when-editing-a-form-using-javascript%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
I would Use Select2 (https://select2.org/data-sources/ajax). You just need to create a function that gets the list of countries to build your options.
answered Nov 27 '18 at 5:37
Raffaele ColleoRaffaele Colleo
459
add a comment |
0
I would Use Select2 (https://select2.org/data-sources/ajax). You just need to create a function that gets the list of countries to build your options.
answered Nov 27 '18 at 5:37
Raffaele ColleoRaffaele Colleo
459
add a comment |
0
0
0
I would Use Select2 (https://select2.org/data-sources/ajax). You just need to create a function that gets the list of countries to build your options.
answered Nov 27 '18 at 5:37
Raffaele ColleoRaffaele Colleo
459
I would Use Select2 (https://select2.org/data-sources/ajax). You just need to create a function that gets the list of countries to build your options.
answered Nov 27 '18 at 5:37
Raffaele ColleoRaffaele Colleo
459
answered Nov 27 '18 at 5:37
Raffaele ColleoRaffaele Colleo
459
answered Nov 27 '18 at 5:37
Raffaele ColleoRaffaele Colleo
459
answered Nov 27 '18 at 5:37
Raffaele ColleoRaffaele Colleo
459
459
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%2f53478915%2fpopulate-dropdown-when-editing-a-form-using-javascript%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
Where are you writing this jQuery Code?
– Umair Malhi
Nov 26 '18 at 10:22
Also you can check if $('#depositForm select[name="country"]').length is returning 1, as I don't see any depositForm in this code, so not sure if that's the issue
– Umair Malhi
Nov 26 '18 at 10:24
depositForm is the id of the form. It's a long form so I did n't included the entire one.
– Alek Stephanok
Nov 26 '18 at 10:28
I'm writing this jQuery code in the inside a function.
– Alek Stephanok
Nov 26 '18 at 10:29
1
Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 26 '18 at 10:35