Getting the Value of an Array Select in Form with JQUERY

ANGELOCHIQUITO
May 9, 2024
134 views
1 vote
2 Answers

I have a problem hiding my Admin_Email_Address with the selected value from a form with an array

the array is 0-Activated and 1-Deactivated

What I am trying to do is if I select the 1 from the drop-down the email form is hidden and when 0 it is not hidden and can be inputted

<!-- STATUS --> 
<div class="col-lg-3 col-md-4">
    <?php $err = isset($_SESSION['sys_employees_edit_status_err']) ? 1 : 0; ?>
    <div class="form-group">
        <label for="status" class="mr-1<?php if ($err) { echo ' text-danger'; } ?>"><?php if ($err) { echo '<i class="far fa-times-circle mr-1"></i>'; } echo renderLang($lang_status); ?></label> <span class="right badge badge-success"><?php echo renderLang($label_required); ?></span>
        <select class="form-control required<?php if ($err) { echo ' is-invalid'; } ?>" id="status" name="status" required>
           
           
           <?php
            foreach ($status_arr as $status) {
                echo '<option value="' . $status[0] . '"';
                if (isset($_SESSION['sys_employees_edit_status_val'])) {
                    if ($_SESSION['sys_employees_edit_status_val'] == $status[0]) {
                        echo ' selected';
                    }
                }
                echo '>' . renderLang($status[1]) . '</option>';
            }
            ?>
        </select>
        <?php if ($err) {
            echo '<p class="error-message text-danger mt-1">' . $_SESSION['sys_employees_edit_status_err'] . '</p>';
            unset($_SESSION['sys_employees_edit_status_err']);
        } ?>
    </div>
</div>

<!-- ADMIN EMAL ADDRESS -->
<div class="col-lg-3 col-md-4">
    <div class="form-group">
        <label for="admin_email_address" class="mr-1<?php echo $err ? 'text-danger' : ''; ?>"> <?php echo $err ? '<i class="far fa-times-circle mr-1"></i>' : ''; echo "Admin Email Address" ?></label>
        <span class="right badge badge-success"><?php echo renderLang($label_required); ?></span>
        <input type="text" class="form-control required<?php echo $err ? ' is-invalid' : ''; ?>" id="admin_email_address" name="admin_email_address" placeholder="" required>
    </div>
</div> 

<script>
        $(".status").keyup(function() {
        if ($('select#status option:selected').val(); = 1 ) {
            $('#admin_email_address').attr('hidden', true);
            
        } else {
            $('#admin_email_address').attr('hidden', false);   
        }
    });

</script>

I tried to so many times to get the value of it but it still doesn’t work

Answers

Chosen as BEST ANSWER

I solved it now i just changed the jquery value to change so it is easier

<!-- STATUS -->
                                <div class="col-lg-3 col-md-4">
                                    <?php $err = isset($_SESSION['sys_employees_edit_status_err']) ? 1 : 0; ?>
                                    <div class="form-group">
                                        <label for="status" class="mr-1<?php if ($err) { echo ' text-danger'; } ?>"><?php if ($err) { echo '<i class="far fa-times-circle mr-1"></i>'; } echo renderLang($lang_status); ?></label> <span class="right badge badge-success"><?php echo renderLang($label_required); ?></span>
                                        <select class="form-control required<?php if ($err) { echo ' is-invalid'; } ?>" id="status" name="status" required>
                                            <?php
                                            foreach ($status_arr as $status) {
                                                echo '<option value="' . $status[0] . '"';
                                                if (isset($_SESSION['sys_employees_edit_status_val'])) {
                                                    if ($_SESSION['sys_employees_edit_status_val'] == $status[0]) {
                                                        echo ' selected';
                                                    }
                                                }
                                                echo '>' . renderLang($status[1]) . '</option>';
                                            }
                                            ?>
                                        </select>
                                        <?php if ($err) {
                                            echo '<p class="error-message text-danger mt-1">' . $_SESSION['sys_employees_edit_status_err'] . '</p>';
                                            unset($_SESSION['sys_employees_edit_status_err']);
                                        } ?>
                                    </div>
                                </div>

                                <!-- ADMIN EMAIL ADDRESS -->
                                <div class="col-lg-3 col-md-4" id="admin_email_address_container" style="<?php echo (isset($_SESSION['sys_employees_edit_status_val']) && $_SESSION['sys_employees_edit_status_val'] == 1) ? '' : 'display: none;'; ?>">
                                    <div class="form-group">
                                        <label for="admin_email_address" class="mr-1<?php echo $err ? 'text-danger' : ''; ?>"> <?php echo $err ? '<i class="far fa-times-circle mr-1"></i>' : ''; echo "Admin Email Address" ?></label>
                                        <span class="right badge badge-success"><?php echo renderLang($label_required); ?></span>
                                        <input type="text" class="form-control required<?php echo $err ? ' is-invalid' : ''; ?>" id="admin_email_address" name="admin_email_address" placeholder="" required>
                                    </div>
                                </div>

                                <script>
                                    document.getElementById('status').addEventListener('change', function() {
                                        var adminEmailContainer = document.getElementById('admin_email_address_container');
                                        if (this.value == 0) {
                                            adminEmailContainer.style.display = '';
                                        } else {
                                            adminEmailContainer.style.display = 'none';
                                        }
                                    });
                                </script>

(Edit)

You have below issue:

a) .val(); is a syntax issue while doing comparison.

b) = 1 is not a comparison, it’s an assignment, so you need to fix it with == 1.

c) There is no HTML attribute hidden exist. You can achieve it via .toggleClass() or .css() using jQuery

d) Since you want things to happen on change of the select box value then you need .change() not .keyUp()

Here is the solution:

$("#status").change(function() {
  $('#admin_email_address_container').toggle($(this).val() != 1);
});

Sample snippet:

$("#status").change(function() {
  $('#admin_email_address_container').toggle($(this).val() != 1);
});

/* or you can use this code as well
$("#status").change(function() {
  if ($(this).val() == 1) {
    $('#admin_email_address_container').css('display', 'none');
  } else {
    $('#admin_email_address_container').css('display', 'block');
  }
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select id="status">
  <option value="-1">Please select</option>
  <option value="0">Activate Email Address</option>
  <option value="1">Deactivate Email Address</option>
</select>


<div class="col-lg-3 col-md-4" id="admin_email_address_container">
  <div class="form-group">
    <label for="admin_email_address" class="mr-1">Admin email Address</label>
    <span class="right badge badge-success">*</span>
    <input type="text" class="form-control required" id="admin_email_address" name="admin_email_address" placeholder="" required>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.