양식을 제출하지 않고 자바 스크립트에서 입력 필드의 값을 가져 오는 방법은 무엇입니까?

Question

저는 javascript에 상당히 익숙하며 양식을 제출하지 않고 입력 필드의 값을 얻는 방법에 대한 질문이 있습니다. 필드의 유효성을 검사하기 위해 실시간 유효성 검사 스크립트와 함께 사용하는 다음과 같은 작은 코드가 있습니다.

<form name="FormName" method="post" /> 
    <input type="text" id="nameValidation" value="HelloWorld" /> 
    <script type="text/javascript"> 
     var NameValue = document.forms["FormName"]["nameValidation"].value; 
    </script> 
</form> 

은 내가 var에 NameValue 당신이 입력 필드에 입력 그래서 검증 후 나타나는 메시지에서 사용할 수있는 가치가되고 싶어요. 양식을 제출하지 않고 입력 필드의 값을 변경하면 var NameValue는 "HelloWorld"로 설정됩니다. 몇 가지 연구를 한 후 jQuery를 사용하여 문제를 해결할 수 있다는 것을 알았고 함수 serialize()를 사용했습니다. jQuery없이이 작업을 수행 할 수있는 방법이 있습니까? jQuery를하지 않고

Answer 1

:

var value = document.getElementById('nameValidation').value; 

이 있었다 구문은 이름이 아닌 ID로 입력을 얻기 위해 사용할 수있다.

당신이 원하는 것은이 변경 될 때이 값을 사용하는 경우 해당 작업을 수행 할 수 있습니다

var nameValidationInput = document.getElementById('nameValidation'); 
function useValue() { 
    var NameValue = nameValidationInput.value; 
    // use it 
    alert(NameValue); // just to show the new value 
} 
nameValidationInput.onchange = useValue; 
nameValidationInput.onblur = useValue; 

Answer 2

는이 코드를 호출 할 onchange를 또는 위해 onblur 이벤트를 사용 :

var에 NameValue을 = 예 : document.forms [ "FormName"] [ "nameValidation"]. 값;

가 커서 당신은, 텍스트 상자의 값의 변화에 ​​클라이언트 측 코드 응답을 할 수 있도록 같은 수

<input type="text" id="nameValidation" value="HelloWorld" onblur="changeVal();" /> 

<script type="text/javascript"> 

    function changeVal() { 
     var NameValue = document.forms["FormName"]["nameValidation"].value; 
alert(NameValue); 
    } 
</script> 

Answer 3

텍스트 상자 떠날 때 활성화 얻을 것이다이 방법 :

$(document).ready(function(){ 
    $("#nameValidation").on('change', function() { 
     var value = $("#nameValidation").value; 
     //do your work here 
    } 
}) 

을

Answer 4

예제에서 변수는 그 순간에 할당 된 값만 가져옵니다. 텍스트 상자가 업데이트되면 업데이트되지 않습니다. [onchange 또는 onblur 또는 keypress] 함수를 트리거하고 변수를 새 값으로 재설정해야합니다.

<form name="FormName" method="post" /> 
    <input type="text" id="nameValidation" value="HelloWorld" /> 
    <script type="text/javascript"> 
     var myTextbox = document.getElementById("nameValidation"); 
     var nameValue = myTextbox.value; 
     myTextbox.onchange = function() { 
      nameValue = myTextbox.value; 
     }; 
    </script> 
</form> 

Answer 5

코드가 작동합니다. 입력 필드의 값을 var NameValue에 할당합니다. 당신이 설명했던 것과 JQuery serialize이하는 것은 다른 두 가지입니다. 당신이 필요로하는

모든 것이 바로 이벤트에 코드를 할당하는 것입니다 :

<form name="FormName" method="post" /> 
    <input type="text" id="nameValidation" value="HelloWorld" onchange="myFunction()"/> 

</form> 
<script type="text/javascript"> 
function myFunction(){ 
    var NameValue = document.forms["FormName"]["nameValidation"].value; 
    alert(NameValue); 
} 
</script> 

see the JSFiddle.