반응형
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>
HTML :
<input type="text" name="name" id="uniqueID" value="value" />
JS :
var nameValue = document.getElementById("uniqueID").value;
양식 값 (예 : HTTP POST를 사용하여 전송되는 값)을 검색하려면 다음을 사용할 수 있습니다.
자바 스크립트
new FormData(document.querySelector('form'))
form-serialize ( https://code.google.com/archive/p/form-serialize/ )
serialize(document.forms[0]);
jQuery
$("form").serializeArray()
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];
}
}
각 양식에는 원하는 데이터를 찾기 위해 반복 할 수있는 요소 배열이 있습니다. 이름으로도 액세스 할 수 있어야합니다.
var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
다음은 W3Schools의 예입니다.
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);
}
좋은 문서와 함께 사용하기 쉬운 여러 양식 직렬 변환기.
In order of Github stars,
<input type="text" id="note_text" />
let value = document.getElementById("note_text").value;
참고URL : https://stackoverflow.com/questions/3547035/javascript-getting-html-form-values
반응형
'Program Club' 카테고리의 다른 글
| Android Gradle에서 versionCode를 자동 증가시키는 방법 (0) | 2020.10.11 |
|---|---|
| 인터페이스 속성의 XML 직렬화 (0) | 2020.10.11 |
| 매개 변수를 사용하여 개조 및 GET (0) | 2020.10.11 |
| TypeError : 일관된 메서드 확인 순서 (MRO)를 만들 수 없습니다. (0) | 2020.10.11 |
| Axios로 양식에서 파일을 게시하는 방법 (0) | 2020.10.11 |