JavaScript-HTML 양식 값 가져 오기

112

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>
javascript  html 
— user377419
소스
2
"HTML 코드의 양식 값"이란 정확히 무엇을 의미합니까?
— Pekka 2010-08-23
7
질문은 매우 분명하다
— laurentngu
1
@laurentngu 문제는 그는 "값을 의미 하는가이다 의 에서 하나 개의 값을 의미하는 HTML 양식" 의 많은 값 또는 그는 "의미 하는가 값 "하나 개의 큰에서 모든 값을 의미, 직렬화 된 전체 HTML 양식을 " "value
— bluejayke
질문은 명확하지만 양식의 가치를 전달하는 것은별로 의미가 없습니다.
— Matthew

답변:

112

HTML :

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

JS :

var nameValue = document.getElementById("uniqueID").value;
— user406632
소스
7
@ shorty876 : 직접 테스트 했나요? o_0 그것이 당신이 옳았는지 아닌지를 결정하는 꽤 좋은 방법이 될 것입니다.
— Jeff Rupert
1
예,하지만 참 / 거짓을 반환하고 함수가 호출되었는지 확인하는 방법을 모르겠습니다. 따라서 당신은 도울 수 있습니다.
— user377419
나는 이것을 시도했지만 nameValue사용자가 입력 한 것이 아니라 기본값입니다.
— James T.
왜 name = "name"이고 ID가 전혀 없으면 어떻게됩니까?
— bluejayke
65

양식 값 (예 : 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()
— 케빈 파루 기아
소스
12
첫 번째 예제 FormData자체는 아무것도하지 않습니다. 여전히 양식에서 값을 가져와야합니다.
— putvande
1
나는 그것이 틀렸다고 생각합니다. FormData를 초기화 할 때 양식 요소를 지정하면 값을 올바르게 검색합니다. codepen.io/kevinfarrugia/pen/Wommgd
— 케빈 FARRUGIA
2
FormData 객체는 그 자체가 값이 아닙니다. FormData.entries()값을 검색하려면 여전히 호출하고 반복해야 합니다. 또한 FormData.entries()Safari, Explorer 또는 Edge에서는 사용할 수 없습니다. developer.mozilla.org/en-US/docs/Web/API/FormData
— dave
1
브라우저 호환성과 관련하여 정확하지만 polyfill이 있습니다. 을 반복하는 formData.entries()것과 관련하여 찾고있는 내용에 따라 다릅니다. 단일 필드의 값을 찾고 있다면 formData.get(name). 참조 : get () .
— 케빈 FARRUGIA
예 FormData, Chrome에서 아무것도 출력 할 수 없습니다 .
— Atav32
33

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

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

— Tran Nguyen Nhat Thuy
소스
12
경고 일뿐입니다. 라디오 버튼이나 체크 박스와 같은 다른 유형의 입력에 대해 선택한 값을 얻으려는 사람은 원하는대로 수행 할 수 없습니다.
— 숀
로 변경 var obj = {};해야했습니다 var obj = [];.
— Daniel Williams
@Sean 라디오 버튼에서 작동하지 않는 이유는 무엇입니까? 그들은 또한 elements 속성 아래에 나타납니다
— bluejayke
@bluejayke 코드는 모든 라디오 버튼 입력을 순환하며 obj어떤 항목이 선택되었는지에 관계없이에 대한 LAST 라디오 버튼의 '값'을 저장합니다 . 문제는 여기에 설명되어 있습니다 ( '옵션 1'선택). w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
— Sean
29

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);
— Codeacula
소스
더 짧은 방법이 먼저 언급되지 않은 이유는 무엇입니까? = -D
— Klesun
2
@ArturKlesun 10 년 전 대답을 입력하기 시작했을 때 OP가 업데이트되지 않았기 때문에 대부분의 상황을 처리하기 위해 for 루프를 작성했기 때문이라고 생각합니다. 당시에는 IE7과 브라우저 호환성을 보장하고 있었던 것 같습니다. 오늘날 우리가 가진 더 나은 환경이 없었기 때문입니다.
— Codeacula
5

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

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

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

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

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

— Rusca8
소스
2

이것은 개발 된 예입니다 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 를 참조 하십시오.

— Jhaavist
소스
큰!. 이것이 바로 내가 필요한 것입니다. 감사합니다.
— Dang Cong Duong
1

아래와 같이 코드를 변경해보십시오.

<form
   onSubmit={e => {
     e.preventDefault();
     e.stopPropagation();

     const elements = Array.from(e.currentTarget) as HTMLInputElement[];

     const state = elements.reduce((acc, el) => {
       if (el.name) {
         acc[el.name] = el.value;
       }

       return acc;
     }, {});

     console.log(state); // {test: '123'}
   }}
>
   <input name='test' value='123' />
</form>
— Максим Щирый
소스
감사합니다. 완벽한 코드가 저를 위해 작동합니다!
— LI HO TAN
0

라이브러리없이 양식을 직렬화하는 빠른 솔루션

function serializeIt(form) {
  return (
    Array.apply(0, form.elements).map(x => 
      (
        (obj => 
          (
            x.type == "radio" ||
            x.type == "checkbox"
          ) ?
            x.checked ? 
              obj
            : 
              null
          :
            obj
        )(
          {
            [x.name]:x.value
          }
        )
      )
    ).filter(x => x)
  );
}

function whenSubmitted(e) {
  e.preventDefault()
  console.log(
    JSON.stringify(
      serializeIt(document.forms[0]),
      4, 4, 4
    )
  )
}
<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>

<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>

<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>
스 니펫 확장

— Bluejayke
소스
-1 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
— Randhawa
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.