Как получить значение из двух входных данных с помощью jquery

Question

У меня есть два поля ввода:

 <input type="text" class="form-control input-td" name="getmark[]" id="getMark_<?php echo $i++?>"  required>
 <input type="text" class="form-control input-td" name="mcq[]" id="mcq_<?php echo $i++?>" required>

Я пытаюсь:

 $('input[id^="getMark_"]','input[id^="mcq_"]').on('change', function() {  
       var get_mark = this.value;
       var mcq      = this.value;

 });

Я не уверен, как можно позвонить $('input[id^="getMark_"]','input[id^="mcq_")

Как можно вызвать два входных поля.

Answer 1

Для вашего кода, который будет работать:

$(document).on('change','input[id^=getMark_], input[id^=mcq_]', function() {  
       var get_mark = this.value;
       var mcq = this.value;
 });

Так что вам не нужно "" или "внутри селектора атрибутов ... Но у вас также есть логическая ошибка: переменные get_mark и mcq всегда будут одинаковыми.

Так что вам нужны два отдельных метода для получения этих переменных, которые лучше выбрать

$(document).on('change','input[id^=getMark_]', function() {  
           var get_mark = this.value;
     });

$(document).on('change','input[id^=mcq_]', function() {  
           var get_mark = this.value;
     });

Если вам нужно, вы можете сохранить их в глобальных переменных.

Answer 2

У вас синтаксическая ошибка, и ввод является подходящим событием для вашей ситуации

$('input[id^="getMark_"], input[id^="mcq_"').on('input', function() {  
		var mark = mcq = '';
    if($(this).attr("id").indexOf('getMark_') !== -1){
      mark = this.value;
    }else{
    	mcq = this.value
    }
		console.log(mark,mcq);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control input-td" name="getmark[]" id="getMark_<?php echo $i++?>"  required>
 <input type="text" class="form-control input-td" name="mcq[]" id="mcq_<?php echo $i++?>" required>

Будет получено изменение в текстовом поле ввода.

Answer 3

Замените ваш HTML на:

  <div id='student_<?php echo $student_id; //$i++; ?>' class='student'>
  <input type="text" class="form-control input-td" class="getmark" name="getmark[]"    id="getMark_<?php echo $i++?>"  required>
  <input type="text" class="form-control input-td"  class="mcq"  name="mcq[]" id="mcq_<?php  echo $i++?>" required>
  <input type="text" class="form-control input-td" class="is_success" readonly>
 </div>

Восстановите ваши js на:

$('.getmark, .mcq').on('change', function() {  
   var get_mark = this.value;
   var mcq      = this.value;
  if(get_mark > 18)
    $(this).find('.is_success').val()='pass';
   else 
     $(this).find('.is_success').val()='fail';
});

Чтобы собрать их все:

function getallstudentmark()
{
arr_allstudents = new Array();

  $(.student).each(function (index, value) {
    obj_student = new Object();
    obj_student.id= $(this).attr('id');
    obj_student.get_mark = $(this).find('.getmark').val();
    obj_student.mcq = $(this).find('.mcq').val();
    obj_student.success = $(this).find('.is_success').val();
    arr_allstudents.push(obj_student);
  });
return arr_allstudents;
}

Answer 4

Вы можете сделать что-то вроде

 $(' input[name="getmark[]"], input[name="mcq[]"] ').on('change', function() {  
       var get_mark = $('input[name="getmark[]"]').val();
       var mcq      = $('input[name="mcq[]"]').val();
       
       console.log('get_mark', get_mark);
       console.log('mcq', mcq);

 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control input-td" name="getmark[]" id="getMark_<?php echo $i++?>"  required>
 <input type="text" class="form-control input-td" name="mcq[]" id="mcq_<?php echo $i++?>" required>