jQuery - Как получить входные значения при вводе?

Question

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

Код будет первым двумя буквами каждого входа (вход № 1, вход №2, вход №3).

При наборе текста «код» будет храниться в переменной и задан как значение для ввода №4.

Это мой HTML:

<form id="gravity"> 
    <li> 
     <input type="text" id="one"/> 
    </li> 
    <li> 
     <input type="text" id="two" /> 
    </li> 
    <li> 
     <input type="email" id="three" /> 
    </li> 
    <li> 
     <label>Code:</lable> 
     <input type="text" id="four" /> 
    </li> 

</form> 

И это мой JQuery:

$(function() { 

$("input#one").keyup(function() { 
    var el1 = $(this).val().substr(0,2); 
}).keyup(); 

$("input#two").keyup(function() { 
    var el2 = $(this).val().substr(0,2); 
}).keyup(); 

$("input#three").keyup(function() { 
    var el3 = $(this).val().substr(0,2); 
}).keyup(); 

var el4 = el1 + el2 + el3; 
$("input#four").attr('value', el4); 


}); 

Таким образом, если пользователь вводит имя (вход # один): William, фамилию (вход #two): Tell и электронная почта (вход # три): williamtell@gmail.com -> код будет: witewi

Где я буду неправильно с моей JQuery?

Ваш результат очень ценится! Fiddle

Answer 1

Когда вы объявляете var, переменная существует только в объявленном контейнере, поэтому el1 и т. Д. Прекратит свое существование после завершения функции.

Кроме того, этот бит кода только когда запускается после загрузки страницы ...

var el4 = el1 + el2 + el3; 
$("input#four").attr('value', el4); 

Что вам нужно сделать, это восстановить его каждый раз, поставив его в функции и вызова функции. ..

$(function() { 
 
    var el1 = "", el2 = "", el3 = ""; 
 

 
    $("input#one").keyup(function() { 
 
    el1 = $(this).val().substr(0,2); 
 
    buildel4(); 
 
    }); 
 
    
 
    $("input#two").keyup(function() { 
 
    el2 = $(this).val().substr(0,2); 
 
    buildel4(); 
 
    }); 
 

 
    $("input#three").keyup(function() { 
 
    el3 = $(this).val().substr(0,2); 
 
    buildel4(); 
 
    }); 
 
    
 
    function buildel4() { 
 
    var el4 = el1 + el2 + el3; 
 
    $("input#four").attr('value', el4); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="gravity"> 
 
    <li> 
 
     <input type="text" id="one"/> 
 
    </li> 
 
    <li> 
 
     <input type="text" id="two" /> 
 
    </li> 
 
    <li> 
 
     <input type="email" id="three" /> 
 
    </li> 
 
    <li> 
 
     <label>Code:</lable> 
 
     <input type="text" id="four" /> 
 
    </li> 
 

 
</form>

Вот Live Demo using jsfiddle

(Кроме того, вам не нужен 2-й вызов .keyup(); на каждом из них)

Answer 2

определяются локальные переменные el1, el2, el3, который не доступен из внешнего контекста

Попробуйте определить это раньше, что-то вроде этого:

$(function() { 
    var el1, el2, el3; 
    $("input#one").keyup(function() { 
     el1 = $(this).val().substr(0,2); 
     var el4 = el1 + el2 + el3; 
    $("input#four").attr('value', el4); 
}).keyup(); 

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

https://jsfiddle.net/dmy6o1wm/2/

Answer 3

Вы вызываете $ (function() {}). эта функция будет выполнена один раз и добавит прослушиватель событий к вашим входным (первые три) элементам. и изначально они не имеют никакой ценности. поэтому вы получаете нулевое значение. поэтому вызовите некоторую функцию для консолидации конечного значения el4.

Answer 4

Вы можете получить это более легко и динамически отправить форму, вроде как следовать

$(function() { 
 
    $("#click").click(function() { 
 
     var e1 = ''; 
 
     $('input[type="text"],input[type="email"]').each(function(){ 
 
      //console.log($(this).val().substr(0,2)); 
 
      e1 += $(this).val().substr(0,2); 
 
     }); 
 
     $('#four').val(e1);     
 
    });     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form id="gravity"> 
 
    <li> 
 
     One <input type="text" id="one"/> 
 
    </li> 
 
    <li> 
 
     Two<input type="text" id="two" /> 
 
    </li> 
 
    <li> 
 
     Three<input type="email" id="three" /> 
 
    </li> 
 
    <li> 
 
     <label>Code:</lable> 
 
     <input type="text" id="four" /> 
 
    </li> 
 
    <li><button id="click">click</button></li> 
 
</form>

Answer 5

instead of using local variable use as global and call the concatenate el4 value on keypress of input like this $("input").keypress
 

$(function() { 
    var flag_1 = false, el1 = "", el2 = "", el3 = "", el4 = ""; 
    $("input").keyup(function(){ 
     el1 = $("input#one").val(); 
     el2 = $("input#two").val(); 
     el3 = $("input#three").val();   
     var el4 = el1 + el2 + el3; 
     $("input#four").attr('value', el4); 
    }) 

}); 
 

https://jsfiddle.net/rajen_ranjith/dmy6o1wm/9/