[javascript] 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를 사용하여 전송되는 값)을 검색하려면 다음을 사용할 수 있습니다.

자바 스크립트

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

form-serialize ( https://code.google.com/archive/p/form-serialize/ )

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

답변

다음은 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);
}

데모는 여기 에서 찾을 수 있습니다 .

답변

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);

답변

여기 내 5 센트 사용 form.elements하여 각 필드를 조회 할 수있는 그것의name 반복에 의해뿐만 아니라 :

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;

답변

Atrur Klesun의 아이디어를 확장하면 … getElementById를 사용하여 양식에 도달하면 이름으로 액세스 할 수 있습니다. 한 줄로 :

document.getElementById('form_id').elements['select_name'].value;

라디오 버튼에 그렇게 사용했고 잘 작동했습니다. 여기서도 똑같은 것 같아요.

답변

이것은 개발 된 예입니다 https://stackoverflow.com/a/41262933/2464828

치다

<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
    <input name="formula">
</form>

name 입력을 검색한다고 가정 해 봅시다 formula. 이는 전달하여 수행 할 수 있습니다 event에 onsubmit필드. 그런 다음 객체 FormData를 참조하여이 정확한 형식의 값을 검색하는 데 사용할 수 있습니다 SubmitEvent.

const check = (e) => {
    const form = new FormData(e.target);
    const formula = form.get("formula");
    console.log(formula);
    return false
};

위의 JavaScript 코드는 입력 값을 콘솔에 출력합니다.

값을 반복하려면 (즉, 모든 값을 가져 오려면) https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods 를 참조 하십시오.