Write a function inside a jquery if an option of select field is selected

15
May 18, 2019, at 6:30 PM

While editing a podcast, I am getting an option being selected through the PHP code and now I want to write a j-query if the option is selected from the select field.

I am gone through many question and answer give in the Stack Overflow but all of them seems to output the effect in click even or in change event.

<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
  <option selected disabled hidden>-- Select Any One --</option>
    <option id="audio1" name="audio1" value="audio1" >Audio</option>
    <option id="video1" name="video1" value="video1" >Video</option>
 </select>
 </div>                        
<div class="form-group" id="input-upload">
    <label for="avatar">Upload Audio:</label><br>
    <input type="file" class="upload" id="fileUp" name="audio">
</div>  
<div class="form-group" style="width:30%" id="input-file">
    <label for="Filename">Audio Duration: </label>
    <input id="infos" class="form-control" name="duration">
</div> 
<div class="form-group" id="input-upload-file">
    <label for="avatar">Video url:</label><br>
    <input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>

I have already written j-query if the user is trying to add a post but when editing post my j-query code does not work like expected. Following is the code I have written while adding a podcast.

$('#podcast_type').change(function(){
    if($('#podcast_type').val() == 'audio1') {
        $('#input-upload').show(); 
        $('#input-file').show(); 
    } else {
        $('#input-upload').hide(); 
        $('#input-file').hide(); 
    } 
});
$('#podcast_type').change(function(){
    if($('#podcast_type').val() == 'video1') {
        $('#input-upload-file').show();
    } else {
        $('#input-upload-file').hide();
    } 
});
Answer 1

You can combine the 2 events in one.

$('#podcast_type').change(function() { 
 
  var val = $('#podcast_type').val();        //Get value of the select 
  if (val == 'audio1') {                     //If audio, hide 1 input. Show 2 
    $('#input-upload').show(); 
    $('#input-file').show(); 
    $('#input-upload-file').hide(); 
  } else if (val == 'video1') {              //If video, hide 2 input. Show 1 
    $('#input-upload').hide(); 
    $('#input-file').hide(); 
    $('#input-upload-file').show(); 
  } else { 
    $('#input-upload').hide();               //Hide all intially 
    $('#input-file').hide(); 
    $('#input-upload-file').hide(); 
  } 
}).change();                                 //Trigger change on load.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="form-group pt-2 input-upload"> 
 
  <label for="EditedBy">Podcast Type : </label> 
  <select class="form-control" name="podcast_type" id="podcast_type"> 
    <option selected disabled hidden>-- Select Any One --</option> 
    <option id="audio1" name="audio1" value="audio1">Audio</option> 
    <option id="video1" name="video1" value="video1">Video</option> 
  </select> 
</div> 
 
<div class="form-group" id="input-upload"> 
  <label for="avatar">Upload Audio:</label><br> 
  <input type="file" class="upload" id="fileUp" name="audio"> 
</div> 
<div class="form-group" style="width:30%" id="input-file"> 
  <label for="Filename">Audio Duration: </label> 
  <input id="infos" class="form-control" name="duration"> 
</div> 
 
<div class="form-group" id="input-upload-file"> 
  <label for="avatar">Video url:</label><br> 
  <input type="url" name="link" id="link" class="form-control" placeholder="link" value=""> 
</div>

Answer 2

Before listening to change event, you need to Initialize inputs state on page load

<?php
    $podcast_type = 'audio1';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="form-group pt-2 input-upload">
        <label for="EditedBy">Podcast Type : </label>
        <select class="form-control" name="podcast_type" id="podcast_type">
            <option disabled>-- Select Any One --</option>
            <option id="audio1" value="audio1" <?= ($podcast_type == 'audio1') ? 'selected' : '' ?>>Audio</option>
            <option id="video1" value="video1" <?= ($podcast_type == 'video1') ? 'selected' : '' ?>>Video</option>
        </select>
    </div>                        
    <div class="form-group" id="input-upload">
        <label for="avatar">Upload Audio:</label><br>
        <input type="file" class="upload" id="fileUp" name="audio">
    </div>
    <div class="form-group" style="width:30%" id="input-file">
        <label for="Filename">Audio Duration: </label>
        <input id="infos" class="form-control" name="duration">
    </div> 
    <div class="form-group" id="input-upload-file">
        <label for="avatar">Video url:</label><br>
        <input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function() {
            var podcast = $('#podcast_type');
            var podcast_type = podcast.val();
            // Initialize input state on page load
            setPodcastType(podcast_type);
            podcast.change(function() {
                setPodcastType($(this).val());
            });
            function setPodcastType(podcast_type)
            {
                if (podcast_type == 'audio1') {
                    $('#input-upload').show(); 
                    $('#input-file').show();
                    // Hide video  input
                    $('#input-upload-file').hide();
                    return true;
                }
                $('#input-upload-file').show();
                // Hide audio input
                $('#input-upload').hide(); 
                $('#input-file').hide();
            }
        });
    </script>
</body>
</html>
READ ALSO
Javascript : Detect Whether an Event is Triggered by User and not programmatically

Javascript : Detect Whether an Event is Triggered by User and not programmatically

Well this question has been asked before but in context of jQueryIn jQuery we can check it by originalEvent property of event Object (link) which tells whether its a manual or programmed event

28
Get date value from spreadsheet using Google apps script

Get date value from spreadsheet using Google apps script

I have been struggling to get proper "date" from spreadsheet using google apps scriptSo below is scenario: 1

43
How does data conversion work between HTML and JavaScript?

How does data conversion work between HTML and JavaScript?

HTML5 documents are encoded in UTF-8, this means 1byte (8bits) per character

18