Show/Hide Fields Depending on Select Value

Show/hide fields depending on select value

Try something like this:

<select id="viewSelector">
   <option value="0">-- Select a View --</option>       
   <option value="view1">view1</option>
   <option value="view2">view2</option>
   <option value="view3">view3</option>
</select>

<div id="view1">
  <!-- content --> 
</div>
<div id="view2a">
  <!-- content --> 
</div>
<div id="view2b">
  <!-- content --> 
</div>
<div id="view3">
  <!-- content --> 
</div>

then in the jQuery:

$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1'),
    'view2' : $('#view2a, #view2b'),
    'view3' : $('#view3')
  };

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
    // show current
    $.viewMap[$(this).val()].show();
  });
});

Hiding Fields Depending on User Selection?

function loadBtn(){   let colour = $(".colour").val();   let numbers = $(".numbers").val();   $('.btn').html(colour+" - "+numbers);   $('.btn').attr("href", "http://yourURL.com/?colour="+colour+"&numbers"+numbers);}
function loadNumbers(elem){  let value = $(elem).val();  let range = $(elem).find("option:selected").attr("numberRange");  let newRanges = range.split(",").map(num => `<option value="${num}">${num}</option>`).join("");  $('.numbers').html(newRanges);}
loadNumbers($(".colour"));loadBtn();
$('.colour').on('change',function(){  loadNumbers(this);  loadBtn();});
$('.numbers').on('change',function(){  loadBtn();});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script><select name="color" class="colour">  <option value="red" numberRange="1,2,3">Red</option>  <option value="blue" numberRange="1,2">Blue</option>  <option value="green" numberRange="1,2,3,4">Green</option>  <option value="orange" numberRange="1,2,3,4,5,6">Orange</option></select>
<select name="numbers" class="numbers"></select> <a class="btn" href=""></a>

show hide field depend on select value sharepoint online

My test code for your reference,and Choice and lookup column do not need to change the code.

Add a script editor in NewForm,and insert the code into it(replace the column name).

 <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
    <script src="https://xxxx.sharepoint.com/sites/dev/SiteAssets/sputility.js">

</script>

    <script>
    $(document).ready(function () {
        // Get a single select dropdown field
        var relacionField = SPUtility.GetSPField('CityLookUp');

        // create a function to show or hide Rates based on Rate value
        var showOrHideField = function() {
            var relacionFieldValue = relacionField.GetValue();
            // Hide the Rates field if the selected value is Especial
            if(relacionFieldValue === 'other') {
                SPUtility.ShowSPField('Other')
            }
            else {
                SPUtility.HideSPField('Other')
            }
        };

        // run at startup (for edit form)
        showOrHideField();

        // make sure if the user changes the value we handle it
        $(relacionField.Dropdown).on('change', showOrHideField);
    });

    </script>

You can download sputility.js here: https://archive.codeplex.com/?p=sputility

Updated:

Did the code above report any error?

JavaScript code:

ExecuteOrDelayUntilScriptLoaded(show,"sp.js");
  function show () {
  //Get the select element corresponding to column
    var selectElement=document.getElementById('CityLookUp').parentNode.parentNode.childNodes[3].childNodes[3].childNodes[0];//chnage coulmn name
    //get tr the hidden column located
    var trElement=document.getElementById('Other').parentNode.parentNode;//change column name 
    //hide tr when we get into page,if the default value is 'other' ,do not need this
    trElement.style.display='none';
    //select change event 
    selectElement.onchange =  function () {
     var index = selectElement.selectedIndex;
     //get option value
    var value = selectElement.options[index].text;

      if(value==='other'){
      //show  tr element
        trElement.style.display='';
      }else{
      //hide  tr element
        trElement.style.display='none';
      }
    }
  }

The code idea is to find the corresponding select element and decide whether to hide the tr element where column other is located according to the value of option.

Tip: Our page dom structure may be different, so you may need to modify the code according to your page dom structure. You could view your page dom structure by Developer tool.
Test result:
test result

show / hide form fields based on a select option (dropdown)

I'd suggest using hide and show to set the display instead of using css. Additionally there is a syntax error on the following line.

if ($(this).val() == "SKATER" || "HOCKEY" || "HOCKEYA")

With the || you can essentially break this down into 3 separate statements.

  1. if ($(this).val() == "SKATER")
  2. if("HOCKEY")
  3. if("HOCKEYA")

The 2nd and 3rd expressions are always true, you need to be comparing them to the value. (i.e. if($(this).val() == "SKATER" || $(this).val() == "HOCKEY" || $(this).val() == "HOCKEYA")).

I updated your 2nd JSFiddle to reflect these changes.

Hide fields based on selection from dropdown

I fixed this question by using this code

jQuery("#prop_category_submit").change(function(){
            const currentVal = jQuery("#prop_category_submit").val();
            let imputList = ["property_rooms","property_bedrooms","property_bathrooms", "meuble","property_size"];
            if (['65','37','66','68','70','69','67','71','27'].includes(currentVal)) {
                if(currentVal=="65"){ //Terrains
                    jQuery("#property_rooms").parent().css('display','none');
                    jQuery("#property_bedrooms").parent().css('display','block');
                    jQuery("#property_bathrooms").parent().css('display','block');
                    jQuery("#meuble").parent().css('display','block');
                    jQuery("#property_lot_size").parent().css('display','none');
                    jQuery("#property-garage").parent().css('display','block');
                    jQuery("#property_size").parent().css('display','block');
                }
 }else{
                for (let i = 0; i < imputList.length; i++) { 
                   const elmnt = imputList[i];
                   jQuery("#"+elmnt).parent().css({'display':'block'});
                }
            }
        });

ReactJs : Show or hide input fields based on select value

fields is an object and updating a prop on that object does not change the reference to the object so react's equality check will not recognize a change (and therefore won't rerender).

Try changing

        fields[name] = value
        setFields(fields)

to

        setFields({...fields, [name]: value})

Show/hide next input field based on dropdown selection

You need to reference the value of the options element.

If value="cheque" is lowercase, v-if="receive_method === 'cheque'" should too.

This works:

<script setup>
import { ref } from 'vue'
const receive_method = ref()
const cheque_number = ref()
</script>

<template>
  <select v-model="receive_method" id="">
    <option value="cheque">Cheque</option>
    <option value="eftn">EFTN</option>
    <option value="cash">CASH</option>
  </select>
  <div v-if="receive_method === 'cheque'">
    <input type="integer" v-model="cheque_number" placeholder="Cheque Number">
  </div>
</template>

If using Options API

<script>
  export default {
    data() {
      return {
        receive_method: undefined,
        cheque_number: undefined
      }
    }
  }
</script>

jQuery to hide form depending on select field?

Your code structure is not proper otherwise it is working fine see below example

$(document).ready(function(){
    $("#recurring").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue=="No"){
                $("#Yes").hide()
            } else{
                $("#Yes").show();
            }
        })
});
  $("#before_after").change(function(){
      debugger
        $(this).find("option:selected").each(function(){
            var optionValue2 = $(this).attr("value");
            if(optionValue2=="Until the prayer after"){
                $("#Length-div").show();
            } else{
                $("#Length-div").hide();
            }
            
        })
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="required">
            <label class="control-label" for="before_after">When?</label>
            <select class="form-control" id="before_after" name="before_after" required="">
                <option selected="" value="Until the prayer after">Until the prayer after</option>
                <option value="Before">Before</option>
                <option value="After">After</option>
            </select>
        </div>
        <div class="form-group  required">
            <label class="control-label" for="recurring">Recurring</label>
            <select class="form-control" id="recurring" name="recurring" required="">
                <option selected="" value="No">No</option>
                <option value="Yes">Yes</option>
            </select>
        </div>
        <div name="Length-div" id="Length-div" style="display:none;">
            {{ wtf.form_field(form.length)}}
        </div>

        <div name="Yes" id="Yes" style="display: none;">
            {{ wtf.form_field(form.frequency)}}
            {{ wtf.form_field(form.end)}}
        </div>

Display hidden form field based on select box choice

<!doctype html>
<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function (){
            $("#state").change(function() {
                // foo is the id of the other select box 
                if ($(this).val() != "notinoz") {
                    $("#foo").show();
                }else{
                    $("#foo").hide();
                } 
            });
        });
    </script>

</head>

<body>
    <p>
        <select id="state" name="state" style="width: 212px;">
            <option value="nsw">New South Wales</option>
            <option value="qld">Queensland</option>
            <option value="vic">Victoria</option>
            <option value="nt">Northern Territory</option>
            <option value="tas">Tasmania</option>
            <option value="sa">South Australia</option>
            <option value="wa">Western Australia</option>
            <option value="act">Australian Capital Territory</option>
            <option value="notinoz">Not in Australia</option>
        </select>
    </p>

    <p id="foo" style="display:none;">
        <select style="width: 212px;>
            <option value="item1">Item</option>
            <option value="item2">Item</option>
            <option value="item3">Item</option>
        </select>
    </p>

</body>

Related Topics

Set Active State on Navigation Dynamically

PHP Function That Creates a Nested Ul Li

Destroy Session When Broswer Tab Closed

Special Characters in "File_Exists" Problem (Php)

How So I Convert This Sha256 + Base64 from Swift to PHP

How to Decode a JSON String

Are PHP Associative Arrays Ordered

PHP Session for Tracking Unique Page Views

Insert Query Check If Record Exists - If Not, Insert It

Forget Password Page, Creating a Generated Password to Email to the User

Woocommerce: Display Some Reviews Randomly on Home Page

How to Query Employee Details and Relate Their Performance Metrics

Comma-Separated String to Array

PHP How to Retrieve Array Values

Org.JSON.JSONexception: Value <Br of Type Java.Lang.String Cannot Be Converted to JSONobject

Connect to PHP Server Using Swift

How to Use Prepare() with Dynamic Column Names

Absolute VS. Relative Paths


Leave a reply



Submit