2016-09-04 2 views
2

하지 버튼 값을 사용자로부터 입력으로 두 문자열을 얻기. 분명히 사용자가 "Submit"을 입력하지 않는다고 가정하면 값이 "Submit"인지 확인하고 건너 뛸 수 있습니다.는이 코드를

다른 방법이 있습니까? 이름으로

+0

'object.onsubmit = 함수 (E) {}'또는'object.addEventListener은 (} {) 함수 (예를 들어 '제출') '다음에 액세스하는 전자 개체를 사용 양식 요소. AFAIK'button'은'e.target'에서 제외됩니다. – divyaSharma

+1

@divyaSharma를 수정하십시오.하지만 아기 예제의 경우에는별로 중요하지 않습니다. 감사합니다. :) – gsamaras

+0

@divyaSharma - * "e 객체를 사용하여 양식 요소에 액세스"* - OP의 "제출"버튼 *은 양식 요소입니다. – nnnnnn

답변

3

나는 값이 "제출"하고 건너 뛸 하드 코드-확인할 수 있습니다.

사용자가 실제로 "제출"단어를 입력 할 수 있기 때문에 작동하지 않습니다 확인.

당신은 요소의 유형을 테스트 할 수 있습니다

if (x.elements[i].type === "text") { ... } 

을 아니면 그냥 텍스트 요소를 선택할 수 있습니다 직접 the querySelectorAll() method를 사용하여 :

function myFunction() { 
 
    var x = document.querySelectorAll("#frm1 input[type='text']"); 
 
    var text = ""; 
 
    var i; 
 
    for (i = 0; i < x.length ;i++) { 
 
     text += x[i].value + "<br>"; 
 
    } 
 
    document.getElementById("demo").innerHTML = text; 
 
}
<form id="frm1" action="form_action.asp"> 
 
    First name: <input type="text" name="fname" value="Donald"><br> 
 
    Last name: <input type="text" name="lname" value="Duck"><br><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 

 
<p>Click "Try it" to display the value of each element in the form.</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<p id="demo"></p>

+0

오른쪽, 선택기! 고맙습니다. n² * n³! :) – gsamaras

2

디스플레이 단지 요소 :

for (i = 0; i < x.length ;i++) { 
    if(x.elements[i].value && x.elements[i].name) 
     text += x.elements[i].value + "<br>"; 
} 

아마도 더 유용 당신이 다른 유형이있는 경우 코딩 할 필요가 없기 때문에 단지 text 입력을 선택하는 것보다 - 플러스, 이러한 항목이 그 것이다 것을 강화 양식을 제출하는 동안 보냈습니다.

그리고 내가 지루했기 때문에 :

function myFunction() { 
 
    document.getElementById("demo").innerHTML = 
 
     Array.prototype.slice.call(document.querySelectorAll("#frm1 input[name]")) 
 
      .reduce((prev, curr) => 
 
       { return prev + curr.value + "<br />"; }, ""); 
 
} 
 

 
document.addEventListener("DOMContentLoaded", 
 
    function() { 
 
     document.getElementById("button").addEventListener("click", myFunction, false); 
 
    }, false);
<body> 
 
<form id="frm1" action="form_action.asp"> 
 
    First name: <input type="text" name="fname" value="Donald"><br> 
 
    Last name: <input type="text" name="lname" value="Duck"><br><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
<p>Click "Try it" to display the value of each element in the form.</p> 
 
<button id="button">Try it</button> 
 
<p id="demo"></p> 
 
</body>

+0

작품, 고마워, +1! – gsamaras

2

당신은 확인할 수 있습니다 요소의 유형 (x.elements[i].type === 'text') :

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<form id="frm1" action="form_action.asp"> 
 
    First name: <input type="text" name="fname" value="Donald"><br> 
 
    Last name: <input type="text" name="lname" value="Duck"><br><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 

 
<p>Click "Try it" to display the value of each element in the form.</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<p id="demo"></p> 
 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById("frm1"); 
 
    var text = ""; 
 
    var i; 
 
    for (i = 0; i < x.length ;i++) { 
 
     if(x.elements[i].value && x.elements[i].type === 'text') 
 
      text += x.elements[i].value + "<br>"; 
 
    } 
 
    document.getElementById("demo").innerHTML = text; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

+0

작동, Daniel, +1 감사합니다! – gsamaras