CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-rails
Pabi
Pabi

Reputation: 994

jQuery if Form with Selects are Filled out, show div

I am look for a way to make it so that when the user selects an item form all the select (for which the value of the option is not nil) the div with id "js-market" is shown.

This is my html code:

<form class="js-chose">

    <div class="col-md-6 col-xm-12">
    <div class="form-group js-select">
        <label>Select a Market</label>
    <select class="form-control">
     <option value='' disabled selected>Chose a Market</option>
        <%Item.all.each do |item|%>
        <option value="<%=item.id%>"><%=item.name.capitalize%></option>
        <%end%>
    </select>
    </div>
    </div>

    <div class="col-md-6 col-xm-12">
    <div class="form-group">
        <label>Enter Market with:</label>
    <select class="form-control js-select">
        <option value='' disabled selected>Chose a Company</option>
        <%Company.where(user_id: current_user.id).each do |company|%>
        <option value="<%=company.id%>"><%=company.name%></option>
        <%end%>
    </select>
    </div>
    </div>
</form>

In short I need to make jQuery show the div with id="js-market" when both selects have been filled by the user and get the values of the selected items and assign them to a variable.

Thank you. Please let me know if I wasn't clear enough.

Upvotes: 0

Views: 43

Answers (2)

slashsharp
slashsharp

Reputation: 2833

Example that works with multiple select elements

Link to jsfiddle

var counter = $('.select').length;
$('.select').change(function() {
    $.each($('.select'),function(i,e) {
        var t = $(this);
        if (t.val() == undefined || t.val() == '') {
            $('#js-market').fadeOut();
            return;
        }
        if (i+1 == counter) {
            $('#js-market').fadeIn();
        }
    });
});
#js-market {
    display: none;
}
<select class="select">
    <option value="">No Value</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value1">Value 4</option>
</select>
<select class="select">
    <option value="">No Value</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value1">Value 4</option>
</select>

<select class="select">
    <option value="">No Value</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>

Upvotes: 1

Lal
Lal

Reputation: 14820

See this fiddle

You can do this by onchange() event in javascript. In the fiddle specified above, what I do is that, I've placed 2 select boxes and a div with id demo will be shown only if two of the select boxes are selected.

HTML

<select id="mySelect1" onchange="myFunction()">
    <option value="0">--Select--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
    <option value="0">--Select--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div id="demo"></div>

JS

function myFunction() {
    if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
        document.getElementById("demo").style.display = "block";
    } else document.getElementById("demo").style.display = "none";
}

Upvotes: 1

Related Questions