I have customized some coding in my site
There is a select field which has options: 1) singaporean 2) singapore PR 3) others
once user select others, a text field will appear below for the user to key in any nationality user want to key in
The problem here is that I have managed to get the text field to appear but after press "save settings" button, the text field disappears but the data is saved.
<li class="jobsearch-column-6">
<label><?php esc_html_e('Nationality', 'wp-jobsearch') ?></label>
<div class="jobsearch-profile-select">
<label for="NationalitySelect">
<select name="nationality" id="NationalitySelect" class="selectize-select" placeholder="<?php esc_html_e('Nationality', 'wp-jobsearch') ?>">
</label>
<option <?php echo ($nationality=='Singaporean' ? 'selected="selected"' : '') ?>value="Singaporean">
<?php esc_html_e('Singaporean', 'wp-jobsearch') ?>
</option>
<option <?php echo ($nationality=='Singaporean PR' ? 'selected="selected"' : '') ?> value="Singaporean PR">
<?php esc_html_e('Singaporean PR', 'wp-jobsearch') ?>
</option>
<option <?php echo ($nationality=='Others' ? 'selected="selected"' : '') ?>value="Others">
<?php esc_html_e('Others', 'wp-jobsearch') ?>
</option>
</select>
<input type="text" style="display:none;" name="others_nationality" class="form-control" id="OthersNationalityInput" value="<?php echo ($others_nationality) ?>" />
</div>
</li>
<script type="text/javascript">
jQuery(document).on('change', '#NationalitySelect', function() {
var nationalothers = $('#OthersNationalityInput');
if (this.value == 'Others') {
nationalothers.show();
} else {
nationalothers.hide();
}
});
</script>
I want the text field to remain shown after the button "save settings" is pressed.
When you submit the page get refreshed so it disappears. Try to add the textbox by PHP on form submit
if(isset($_POST['submit']))
{
echo"<input type='text' val='value from database'/>";
}
Assuming after you submit then the page refreshed and the values in your form are maintained, you can modify your jQuery to this:
<script type="text/javascript">
jQuery(function() {
var nationalothers = $('#OthersNationalityInput');
if (this.value == 'Others') {
nationalothers.show();
} else {
nationalothers.hide();
}
});
jQuery(document).on('change', '#NationalitySelect', function() {
var nationalothers = $('#OthersNationalityInput');
if (this.value == 'Others') {
nationalothers.show();
} else {
nationalothers.hide();
}
});
</script>
But of course you should optimize the code above by keeping things DRY.
you can do it by changing this line
<input type="text" style="display:none;" name="others_nationality" class="form-control" id="OthersNationalityInput" value="<?php echo ($others_nationality) ?>" />
to
<input type="text" style="display:<?php echo ($nationality=='Others' ? 'block' : 'none'); ?>" name="others_nationality" class="form-control" id="OthersNationalityInput" value="<?php echo ($others_nationality) ?>" />