자바 스크립트와 파이어 폭스를 사용하여 제출 버튼을 클릭하십시오.

Question

이전에는 해보지 않은 적이 있었는데 ... 페이지에 버튼이 있습니다.

<input type="submit" id="btn" value="Submit"> 

그리고 포함하는 자바 스크립트 함수 : 파이어 폭스를 사용

function clickit() 
{ 
alert(document.getElementById('btn').value); 
document.getElementById('btn').click(); 
} 

이 버튼을 클릭하지 않는 - 즉 양식이 제출되지 않습니다. 경고가 표시되지만 양식이 제출되지 않습니다. Firefox가 버튼을 클릭하지 않는 이유는 무엇입니까?

Answer 1

클릭 이벤트를 바인딩하려는 경우 div 또는 INPUT 요소 이외의 요소를 사용하십시오. <INPUT>이 양식 본문 안에 있으면 이상한 문제가 발생할 수 있습니다.

Answer 2

버튼이있는 양식을 제출하기 만하면 <div> 요소를 입력이 아닌 클릭 핸들러와 함께 사용하는 것이 좋습니다. 그것은 당신에게 조금 더 많은 유연성을 줄 것입니다. 그렇게하면 양식을 선택하고 submit() API를 사용하여 양식을 제출할 수 있습니다.

실제로 코드를 수정할 수 없으며 여기에서 선택하고 제출하는 데 문제가있는 경우 jQuery와 DOM을 모두 사용하여 코드를 작성해야합니다.

JQuery와 방법

: 당신이 PhantomJS에서 실행중인 또는 포커스가없는 경우 테스트 러너와 같은 창을 가지고 있다면 당신은 초점 주변의 문제로 실행할 수 있습니다

$("my selector").trigger("click") 

. 이 경우 사용할 수 있습니다

$(<my selector>).triggerHandler(<my event>) 

에서 DOM API 방식

을 당신은 또한 시뮬레이션 할 수 있습니다이 단지 이벤트 (첫 번째 예에 해당)

// Create the event 
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" }); 

// Dispatch/Trigger/Fire the event 
document.dispatchEvent(event); 

를 트리거 실제 DOM 방법으로 클릭하십시오.

var button = document.getElementById('my-button'); 
button.click(); 

Answer 3

Firefox가 버튼을 클릭하지 않는 이유는 무엇입니까?

초기 버전의 Firefox는 보안상의 이유로 청취자를 호출 할 수 없었습니다. 그러나, 나는 그 이유가 다른 방법으로 해결 된 것 같아요 이제 처리기를 직접 호출 할 수 있어야합니다. 다음은 파이어 폭스 (34)에서 양식을 제출 :

<form onsubmit="alert('submitted!!')"> 
    <input name="foo" value="foo"> 
    <input type="submit" id="aa"> 
</form> 
<br> 
<button onclick="document.getElementById('aa').click();">Click the submit button</button> 

양식의 제출 리스너가 호출되고 형태가 너무 제출 버튼의 클릭 방법은 돼있 무엇을하고있는 전화, 제출됩니다.

이 방법은 모든 수신기에서 작동하지 않지만 을 클릭하십시오.은 특별한 경우입니다 (W3C DOM Level 3 Events Specification, §3.5 Activation triggers and behavior 참조).