CODEWITHSUNDEEP
javascriptjqueryinput
Pabi
Pabi

Reputation: 994

jQuery Get Value of Select and Add to Text Input

I am having trouble changing the value of the select once both selects have been filled.

This is what I have so far, but it doesn't work:

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(function() {
            $("input.company_id").val($("#company_select").val());
	        $("input.market_id").val($("#market_select").val());
            });
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" id="company_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" id="market_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>

<input name="company_id" type="text">
<input name="company_id" type="text">

This is the part of the code that should set the value of the input:

$("input.company_id").val($("#company_select").val());
$("input.market_id").val($("#market_select").val());

This should be setting the value of the text inputs to the value of the selected options once both selects have been filled.

How can I make this work.

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

Upvotes: 1

Views: 1595

Answers (2)

Ram
Ram

Reputation: 144659

You are using a class selector for selecting an element by it's name attribute. You should either add those classes to the target elements or use the attribute equals ([attribute=value]) selector.

Upvotes: 1

LTasty
LTasty

Reputation: 2008

Your input don't have class you can use [name=''] and in your html input have same name.

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(function() {
            $("input[name='company_id']").val($("#company_select").val());
            $("input[name='market_id']").val($("#market_select").val());
            });
        }
    });
});

http://jsfiddle.net/kfhxachp/

Upvotes: 1

Related Questions