Получить val ввода любой переменной с jQuery

Question

У меня есть форма, и мне нужно выполнить действие, если определенный вход изменяется. В моей JQuery, у меня есть три поля ввода установлен на другой переменной, например:

var workOrderInput = jQuery(".work-order-select input"); 
var eventSchedulerInput = jQuery(".event-scheduler .gchoice_2_13_0 #choice_2_13_0"); 
var eventSchedulerSelect = jQuery(".event-scheduler select"); 

Для того, чтобы выяснить, если изменения входных, я использую:

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() { 
    jQuery(this).change(function() { 

    }); 
}); 

Если один из входных изменения полей, я хотел бы установить переменную в значение скрытого поля ввода, например

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() { 
    jQuery(this).change(function() { 
     var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val(); 
     console.log(totalCost); 
    }); 
}); 

Прямо сейчас, переменная totalCost устанавливается, но только при втором нажатии. Например, если я нажимаю на «.work-order-select input», ничего не происходит. Только когда я нажимаю на другой вход, переменная устанавливается и отображается в консоли.

Edit: Вот мой HTML

<form> 
    <div class="work-order-select"> 
     <input type="radio" name="wo1" value="14.99"> 
     <input type="radio" name="wo2" value="24.99"> 
     <input type="radio" name="wo2" value="34.99"> 
    </div> 
    <div class="event-scheduler"> 
     <input type="radio" name="es1" value="44.99"> 
     <select name="es1" > 
      <option value="Square Footage|0">Square Footage</option> 
      <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option 
      <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option> 
      <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option>  
     </select> 
    <div> 
    <div> 
     <span class="total"></span> 
     <input type="hidden" id="input_2_22" value="49.99"> 
    </div> 
</form> 

Прямо сейчас, как только один из радио-кнопок выбора или выпадающие изменений, входное значение # input_2_22 обновляется.

Использование mouseup() также работает ... вид. Если я использую:

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() { 
    jQuery(this).mouseup(function() { 
     var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val(); 
     console.log(totalCost); 
    }); 
}); 

Первый переключатель, который не выбирает ничего. Это буквально пустая строка в веб-инспекторе Chrome. Во второй раз, когда я нажимаю на переключатель, отображается значение предыдущей кнопки, на которую я нажал.

Edit 2: Все вышеперечисленное фиксируется:

jQuery("#choice_2_13_0, #choice_2_10_0, #choice_2_10_1, #choice_2_10_2").addClass("discount-class"); 

jQuery(".discount-class").change(function() { 
    setTimeout(function() { 
     var totalCost = jQuery(".signup-cost #input_2_22").val(); 
     var totalDiscount = (totalCost * .2).toFixed(2); 
     var afterDiscount = (totalCost - totalDiscount).toFixed(2); 
     console.log(totalDiscount); 
     jQuery("#input_2_23").val(totalDiscount); 
    }, 1000); 
}); 

Теперь мне нужно только функцию изменения, чтобы стрелять, если один из «Wo» радио-кнопки выбираются и выберите значение не равно «Квадратные футы 0». Без везения я пытаюсь:

if (jQuery(".discount-class").is(':checked') && jQuery("#input_2_14").val != 'Square Footage|0') { 

Answer 1

Возможно, вы должны передать все свои элементы одному и тому же классу и привязать их к этому пути.

jQuery('.myElements').change(function() { 
 
    if (jQuery('#es1').val() != "Square Footage|0") { 
 
    setTimeout(function() { 
 
     var totalCost = jQuery("#input_2_22").val(); 
 
     jQuery('#test').append(totalCost + '<br>') 
 
     console.log(totalCost); 
 
    }, 1000); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="work-order-select"> 
 
    <input type="radio" class="myElements" name="wo1" value="14.99"> 
 
    <input type="radio" class="myElements" name="wo2" value="24.99"> 
 
    <input type="radio" class="myElements" name="wo2" value="34.99"> 
 
    </div> 
 
    <div class="event-scheduler"> 
 
    <input type="radio" class="myElements" name="es1" value="44.99"> 
 
    <select name="es1" id="es1" class="myElements"> 
 
     <option value="Square Footage|0">Square Footage</option> 
 
     <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option> 
 
     <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option> 
 
    </select> 
 
    <div> 
 
     <div> 
 
     <span class="total"></span> 
 
     <input type="hidden" id="input_2_22" value="49.99"> 
 
     </div> 
 
</form> 
 

 
<div id="test"></div>

Answer 2

Я не знаю, как представить этот ответ, как много вещей, которые должны быть решены. Давайте возьмем его по одной строке за раз, следующие комментарии основаны на HTML, предоставленном в вопросе.

// this matches the first three radio buttons 
var workOrderInput = jQuery(".work-order-select input"); 
// this does not match anything 
var eventSchedulerInput = jQuery(".event-scheduler .gchoice_2_13_0 #choice_2_13_0"); 
// this matches the dropdown 
var eventSchedulerSelect = jQuery(".event-scheduler select"); 

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() { 
    jQuery(this).mouseup(function() { 
     // this selector does not match anything either 
     var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val(); 
     console.log(totalCost); 
    }); 
}); 

Вот FIDDLE, которая иллюстрирует точки, сделанные выше.

Теперь давайте применим то, что мы узнали, и исправим несколько вещей.

jQuery(function ($) { 
 
     // match radio buttons that are children of an element with the class "work-order-select" 
 
    var workOrderInput = $(".work-order-select input[type=radio]"), 
 
     // match radio buttons that are children of an element with the class "event-scheduler" 
 
     eventSchedulerInput = $(".event-scheduler input[type=radio]"), 
 
     // match a select element that is the child of an element with the class "event-scheduler" 
 
     eventSchedulerSelect = $(".event-scheduler select"), 
 
     // get one element with the id "input_2_22" 
 
     hiddenInput = $("#input_2_22"); 
 

 
    $([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() { 
 
     this.on('change', function() { 
 
      // get the value of the hidden element 
 
      var totalCost = hiddenInput.val(); 
 
      // do something with it. 
 
      alert(totalCost); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="work-order-select" style="border:1px solid black">.work-order-select input[type=radio] 
 
     <br /> 
 
     <input type="radio" name="wo1" value="14.99" /> 
 
     <br />These two radio buttons have a different name 
 
     <input type="radio" name="wo2" value="24.99" /> 
 
     <input type="radio" name="wo2" value="34.99" /> 
 
    </div> 
 
    <br /> 
 
    <div class="event-scheduler"> 
 
     <div style="border:1px solid black">.event-scheduler input[type=radio] 
 
      <input type="radio" name="radio-es1" value="44.99" /> 
 
     </div> 
 
     <br /> 
 
     <div style="border:1px solid black">.event-scheduler select 
 
     
 
     <select name="select-es1"> 
 
      <option value="Square Footage|0">Square Footage</option> 
 
      <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option> 
 
      <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option> 
 
      <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option> 
 
     </select> 
 
     </div> 
 
     <div> 
 
      <div> <span class="total"></span> 
 
       <input type="hidden" id="input_2_22" value="49.99" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</form>