작업이없는 양식 및 enter가 페이지를 다시로드하지 않는 경우


94

제출 버튼이없는 HTML 양식을 만드는 가장 좋은 방법을 찾고 있습니다. 그 자체만으로도 충분하지만 제출과 같은 작업이 완료 될 때 (예 Enter: 텍스트 필드를 치는 등) 양식이 자체적으로 다시로드되지 않도록해야합니다 .


제출하지 않기를 원하십니까?
UpTheCreek

텍스트 필드 인 단일 <input>이있는 <form>이있는 경우 Enter 키를 누를 때 제출하면 안됩니까?
Zack The Human

다른 조건 (사실 특정 버튼을 눌렀을 때)에 제출하기를 원합니다. 문제는 '텍스트 필드에있는 동안 입력'동작을 게시 / 동일한 URL로 가져 오지 않는 동작을 얻을 수 없다는 것입니다. 따라서 제출하기 위해 X, Y 및 Z를 수행해야하는 신중하게 만든 양식은 사용자가 Enter 키를 눌러 잘못 제출할 수 있습니다.
Matt Roberts

답변:


44

onsubmit 핸들러를 양식에 추가하고 (일반 js 또는 jquery $ (). submit (fn)을 통해) 특정 조건이 충족되지 않으면 false를 반환합니다.

양식 제출을 원하지 않는 경우가 아니면 양식 요소에서 'action'속성을 생략하지 않는 이유는 무엇입니까?


151
없는 형태의 action속성이 표준에 따르면, 양식을하지 않습니다 - 실제로 일부 브라우저의 페이지를 다시로드의 원인이됩니다 .. 나는 것으로 나타났습니다 action="javascript:void(0);"잘 작동.
Dutchie432

Dutchies 대답은 완벽하게 작동합니다. Firefox는 페이지를 새로 고치고있었습니다.
IAmGroot

1
@ Dutchie432는 이것을 댓글 대신 답변으로 만들어야합니다. 그런 다음 그것이 속한 꼭대기로 나아갈 것입니다. 또는 KPrime이 대답을 조정할 수 있습니다. 작업을 생략해도 효과가 없었기 때문에 ...
sage

211

action="javascript:void(0);"페이지 다시로드를 방지하고 HTML 표준을 유지하기 위해 양식 에 포함 할 수 있습니다.


4
입력을 눌렀을 때 제출 버튼 기본 동작을 억제하기 위해 2 일을 보냈습니다. 동작이 발생했지만 페이지가 다시로드 (Firefox) 되었기 때문입니다. 양식에 대한 조치로 javascript void를 추가하면 문제가 해결되었습니다. 감사합니다.
Tony Payne

이 추가 답변에 감사드립니다. 여전히 작동하지만 2016 년에도 여전히 "최첨단"솔루션입니까?
low_rents

1
@low_rents 나는 여전히 그것을 항상 사용하고 개인적으로 더 나은 해결책을 찾지 못했습니다.
Dutchie432

1
엔터 키를 눌렀을 때 페이지 새로 고침을 해결하는 정확하고 훌륭한 솔루션에 감사드립니다 :) 최상의 솔루션.
Imran Rafiq Rather

9

이 이벤트를 텍스트 필드에 추가하기 만하면됩니다. Enter 키를 눌러 제출할 수 없으며 필요에 따라 제출 버튼을 추가하거나 form.submit ()을 호출 할 수 있습니다.

onKeyPress="if (event.which == 13) return false;"

예를 들면 :

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

1
감사합니다. 귀하의 답변의 명확성으로 인해 이전 답변의 정확성이 분명 해져서 수락 된 답변을 얻지 못했지만 감사하고 찬성합니다!
Matt Roberts

2
감사합니다. 기꺼이 도와 드리겠습니다. 나는 어쨌든 각광을받는 사람이 아니었다. ;)
GenericMeatUnit

5

양식에서 Enter 키를 누르면 양식의 자연스러운 동작이 제출되는 것입니다. 자연스럽지 않은 동작을 중지하려면 jquery를 사용하여 제출 (기본 동작)을 방지해야합니다.

$("#yourFormId").on("submit",function(event){event.preventDefault()})

4

아이디어:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

1

해결하는 두 가지 방법 :

  1. 폼의 액션 값은 "javascript : void (0);"입니다.
  2. 제출을 방지하기 위해 양식에 키 누르기 이벤트 리스너를 추가하십시오.

키 누르기 이벤트 (예 : 엔터 키)를 수신하면 textareas 에 문제가 발생할 수 있으며 자동 완성 또는 드롭 다운을 선택할 수 있으며 모바일은 또 다른 문제의 원인이 될 수 있습니다.
luckydonald

0

첫 번째 응답은 최상의 솔루션입니다.

onsubmit 핸들러를 양식에 추가하고 (일반 js 또는 jquery $ (). submit (fn)을 통해) 특정 조건이 충족되지 않으면 false를 반환합니다.

jquery로 더 구체적입니다.

$('#your-form-id').submit(function(){return false;});

양식 제출을 원하지 않는 경우가 아니면 양식 요소에서 'action'속성을 생략하지 않는 이유는 무엇입니까?

Chrome 확장 프로그램 작성은 사용자 입력을위한 양식이 있지만 제출하고 싶지 않은 경우의 예입니다. action = "javascript : void (0);"를 사용하면 코드가 작동 할 수 있지만 인라인 Javascript 실행에 대한 오류가 발생하는 이 문제 가 발생합니다.

작업을 완전히 생략하면 양식이 다시로드되며 Chrome 확장 프로그램을 작성할 때 원하지 않는 경우도 있습니다. 또는 어떤 종류의 내장 계산기가있는 웹 페이지가있는 경우 사용자가 입력을 제공하고 "계산"또는 이와 유사한 것을 클릭합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.