2010-08-23 5 views
39

JavaScript로 전달할 HTML 양식의 가치를 얻으려면 어떻게해야합니까?JavaScript - HTML 양식 값 얻기

이 정보가 맞습니까? 내 스크립트는 두 개의 인수를 하나의 텍스트 상자에서, 하나는 드롭 다운 상자에서 가져옵니다.

<body> 
<form name="valform" action="" method="POST"> 

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/> 
Card Type: <select name="cardtype" id="cardtypeid"> 
    <option value="visa">Visa</option> 
    <option value="mastercard">MasterCard</option> 
    <option value="discover">Discover</option> 
    <option value="amex">Amex</option> 
    <option value="diners">Diners Club</option> 
</select><br/> 
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" /> 
</body> 
+1

은 정확히 "HTML 코드의 형태의 값"이란 무엇을 의미합니까? –

답변

54

HTML :

<input type="text" name="name" id="uniqueID" value="value" /> 

JS :

var nameValue = document.getElementById("uniqueID").value; 
+6

@ shorty876 : 직접 테스트 해 보셨습니까? 그 말이 맞는지 아닌지를 결정하는 좋은 방법이 될 것입니다. –

+0

그래,하지만 그냥 true/false를 반환하고 함수가 호출되었는지 확인하는 방법을 모르겠다. 따라서 도움을 줄 수 있습니다. – user377419

+0

이 시도했지만,'nameValue'는 사용자가 입력 한 것이 아니라 기본값입니다. –

-3

javascript 인수는 javascript 함수 인수를 의미합니까? 예 :

일부 기능을 쓸 수 있습니다. 어느 객체에서 {"name":"value"}과 같은 양식을 직렬화하고 그 다음에이 객체를 함수로 전달할 수 있습니다.

20

하는 경우 - document.forms이 페이지에 형태의 배열을 포함합니다. 이 양식을 반복하여 원하는 양식을 찾을 수 있습니다.

var form = false; 
var length = document.forms.length; 
for(var i = 0; i < length; i++) { 
    if(form.id == "wanted_id") { 
     form = document.forms[i]; 
    } 
} 

각 양식에는 요소 배열이있어서 원하는 데이터를 찾을 수 있습니다. 데모는 here을 찾을 수 있습니다

function myFunction() { 
    var elements = document.getElementById("myForm").elements; 
    var obj ={}; 
    for(var i = 0 ; i < elements.length ; i++){ 
     var item = elements.item(i); 
     obj[item.name] = item.value; 
    } 

    document.getElementById("demo").innerHTML = JSON.stringify(obj); 
} 

: 또한 이름 여기

var wanted_value = form.someFieldName.value; 
jsFunction(wanted_value); 
8

에 의해 그들에 액세스 할 수 있어야하는 것은 W3 스쿨에서 예입니다. (예는 HTTP POST를 사용하여 전송되는 것과 같은) 형태의 값을 검색하려면

+3

라디오 버튼이나 체크 박스와 같은 다른 입력 유형의 선택된 값을 얻으려는 사람이 원하는 경우, 경고 만합니다. – Sean

8

당신이 사용할 수있는

자바 스크립트

new FormData(document.querySelector('form')) 

폼 직렬화 (https://code.google.com/archive/p/form-serialize/)

serialize(document.forms[0]); 

jQuery

$("form").serializeArray() 
+5

첫 번째 예제 인'FormData' 자체는 아무 것도하지 않습니다. 폼에서 값을 가져와야합니다. – putvande

+1

나는 그것이 틀렸다라고 생각한다. FormData를 초기화 할 때 양식 요소를 지정하면 올바르게 값을 검색합니다. http://codepen.io/kevinfarrugia/pen/Wommgd –

+1

FormData 객체 자체가 값이 아닙니다. 여전히 FormData를 호출하고 반복 할 필요가있다.entries()'를 호출하여 값을 검색합니다. 또한 FormData.entries()는 Safari, Explorer 또는 Edge에서 사용할 수 없습니다. https://developer.mozilla.org/en-US/docs/Web/API/FormData – dave

1
<input type="text" id="note_text" /> 

let value = document.getElementById("note_text").value;