버튼이 양식을 제출하지 못하게하는 방법

917

다음 페이지에서 Firefox의 제거 단추는 양식을 제출하지만 추가 단추는 제출하지 않습니다. 제거 버튼이 양식을 제출하지 못하게하려면 어떻게합니까?

<html>

<head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function addItem() {
            var v = $('form :hidden:last').attr('name');
            var n = /(.*)input/.exec(v);

            var newPrefix;
            if (n[1].length == 0) {
                newPrefix = '1';
            } else {
                newPrefix = parseInt(n[1]) + 1;
            }

            var oldElem = $('form tr:last');
            var newElem = oldElem.clone(true);
            var lastHidden = $('form :hidden:last');

            lastHidden.val(newPrefix);

            var pat = '=\"' + n[1] + 'input';

            newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"' + newPrefix + 'input'));
            newElem.appendTo('table');
            $('form :hidden:last').val('');
        }

        function removeItem() {
            var rows = $('form tr');
            if (rows.length > 2) {
                rows[rows.length - 1].html('');
                $('form :hidden:last').val('');
            } else {
                alert('Cannot remove any more rows');
            }
        }
    </script>
</head>

<body>
    <form autocomplete="off" method="post" action="">
        <p>Title:<input type="text" /></p>
        <button onclick="addItem(); return false;">Add Item</button>
        <button onclick="removeItem(); return false;">Remove Last Item</button>
        <table>
            <th>Name</th>

            <tr>
                <td><input type="text" id="input1" name="input1" /></td>
                <td><input type="hidden" id="input2" name="input2" /></td>
            </tr>
        </table>
        <input id="submit" type="submit" name="submit" value="Submit">
    </form>
</body>

</html>
javascript  html  forms  button  submit 
— 칸포
소스
어떤 대답을 추천 하시겠습니까?
— sanepete

답변:

1796

HTML5 버튼 요소를 사용하고 있습니다. 여기에 표시된대로 W3 스펙에 명시된 바와 같이이 단추에 기본 제출 동작이 있기 때문입니다. W3C HTML5 단추

따라서 유형을 명시 적으로 지정해야합니다.

<button type="button">Button</button>

기본 제출 유형을 대체합니다. 나는 이것이 왜 일어나는지 지적하고 싶다 =)

=)

— 메타 파니 엘
소스
17
또한 type 속성 중 하나가 button 인 type 속성을 가진 HTML 요소가 f # $ 'n'기본 타입의 submit을 가져서는 안된다는 점을 지적하고 싶습니다 . 그것은 단순한 바보이며 스펙에서 큰 실수입니다. 나는 항상 형태의 버튼을 사용하며, 가장자리가 아닌 경우에도 기본 유형을 제출하는 것이 합리적입니다.
— dudewad
3
this 나는 이번 주 대부분을 양식 내 버튼을 사용하여 모달을 열 때 내 Electron 앱이 "새로 고침"되는 데 짜증을 냈습니다. 한 번 발생하면 앱이 예상대로 작동합니다. 나는 무슨 일이 있었는지 전혀 몰랐다. 이거 야! 기본 유형을 제출하는 데 문제가 없습니다. 그것에 대해 배우는 데 5 년이 걸렸지 만 약간의 어려움이있는 것 같습니다.
— freethebees
4
귀하의 참조 덕분에 방금 양식에 대한 유형 = 재설정이 있음을 알게되었습니다. 대박!
— Duong Nguyen
602

버튼에서 유형을 설정하십시오.

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

... 이벤트 핸들러에서 예외가 발생할 때 제출 조치를 트리거하지 못하게합니다. 그런 다음 removeItem()예외가 발생하지 않도록 함수를 수정하십시오 .

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

변경 사항을 참고하십시오. 원본 코드는 jQuery 세트에서 HTML 요소를 추출한 다음 jQuery 메소드를 호출하려고 시도했습니다. 예외가 발생하여 버튼의 기본 동작이 발생했습니다.

FWIW, 당신이 이것과 함께 갈 수있는 또 다른 방법이 있습니다 ... jQuery를 사용하여 이벤트 핸들러를 연결 하고 jQuery의 이벤트 객체 에서 preventDefault () 메소드를 사용 하여 기본 동작을 미리 취소하십시오.

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

이 기술은 또한 당신이 변경하여 가을 백을 구현할 수 있습니다 ... 디버깅 쉽게 그것을 만들기, 한 곳에서 모든 로직을 유지 type버튼에가 백업 submit이가로 알려져있다 - 이벤트 서버 측 처리를 방해 자바 스크립트 .

— Shog9
소스
4
Firefox에서 type = "button"이 항상 작동하는 것은 아닙니다. js가 충분히 복잡하고 Firefox에서 양식을 제출할 때 오류가 발생합니다. 광기!
— Matthew Lock
1
@ MatthewLock : 거의-스크립트의 오류는 해당 코드 블록을 종료하고 작업은 평소와 같이 진행됩니다. 메소드의 첫 번째 행으로 jQuery 이벤트 메소드 e.preventDefault () 및 / 또는 e.stopPropgation ()을 호출하십시오. 자세한 내용은 stackoverflow.com/questions/2017755/… 를 참조하십시오.
— brichins
8
type = button은 아무리해도 양식을 제출해서는 안됩니다.
— Matthew Lock
1
return false너무 중요합니다. 때로는 제출 버튼 ( onclick)에 사용하기도합니다.
— Jamie
7
html이 이상하다고 생각합니다. 제출하지 않고 기본적으로 type = "button"이어야합니다. 제출이 기본적으로 표시되는 것은 항상 예상치 못한 일입니다. 예외입니다.
— httpete
31

언젠가 나는 매우 비슷한 것을 필요로했고 그것을 얻었습니다.

그래서 여기에 넣은 것은 사용자가 버튼 (일반적으로 보내기 버튼)을 누를 때만 유효성 검사없이 JavaScript로 양식을 제출하고 유효성 검사를 실행할 수있는 트릭을 수행하는 방법입니다.

이 예제에서는 두 개의 필드와 제출 단추 만있는 최소 양식을 사용합니다.

원하는 것을 기억하십시오 : JavaScript에서 확인없이 제출할 수 있어야합니다. 그러나 사용자가 이러한 버튼을 누르면 유효성 검사를 통과 한 경우에만 유효성 검사를 수행하고 양식을 보내야합니다.

일반적으로 모든 것은이 근처에서 시작됩니다 (중요하지 않은 모든 추가 항목을 제거했습니다).

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

양식 태그에없는 방법을 참조하십시오 onsubmit="..."( 없는 태그 ).

문제는 폼이 항상하는 경우에 상관없이 제출되지 않은 것입니다 onclick반환 true또는 false.

내가 변경하는 경우 type="submit"를 위해 type="button", 그것은 작동하는 것 같다하지만하지 않습니다. 양식을 보내지 않지만 쉽게 수행 할 수 있습니다.

그래서 마침내 이것을 사용했습니다 :

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

그리고 function Validator어디 return True;에서 JavaScript 제출 문장을 추가합니다.

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

은 id=""단지 자바 스크립트입니다 getElementById(가), name=""이 POST 데이터를 표시하는 단지입니다.

그런 식으로 내가 필요한대로 작동합니다.

onsubmit양식에 기능 이 필요없는 사람들을 위해 이것을 넣었 지만 사용자가 버튼을 누를 때 약간의 유효성을 검사합니다.

양식 태그에 대한 제출이 필요하지 않은 이유는 무엇입니까? 다른 JavaScript 부분에서는 제출을 수행해야하지만 유효성 검사가 필요하지 않습니다.

이유 : 사용자가 제출을 수행하는 사람이라면 유효성 검사를 수행하고 싶어하지만 JavaScript 인 경우 제출이 필요하지만 때로는 그러한 유효성 검사로 피할 수 없습니다.

이상하게 들릴지 모르지만 예를 들어 생각할 때와는 다릅니다.

따라서 모든 링크를 제출 양식으로 변환해야 로그인 데이터가 손실되지 않습니다. 아직 로그인하지 않은 경우에도 작동해야합니다. 따라서 링크에서 유효성 검사를 수행하지 않아야합니다. 그러나 사용자가 user와 pass 필드를 모두 입력하지 않은 경우 사용자에게 메시지를 표시하고 싶습니다. 따라서 누락 된 양식은 보내지 않아야합니다! 문제가 있습니다.

문제를 참조하십시오. 사용자가 단추를 누른 경우에만 필드가 비어있을 때 양식을 보내면 안됩니다. JavaScript 코드 인 경우 보낼 수 있어야합니다.

onsubmit양식 태그에 대한 작업을 수행하는 경우 사용자 또는 다른 JavaScript인지 알아야합니다. 매개 변수를 전달할 수 없으므로 직접적으로 불가능하므로 일부 사람들은 유효성 검사를 수행해야하는지 여부를 알려주는 변수를 추가합니다. 유효성 검사 기능의 첫 번째는 변수 값 등을 확인하는 것입니다. 너무 복잡하고 코드에서 실제로 원하는 것을 말하지 않습니다.

따라서 솔루션은 양식 태그에 onsubmit을 포함하지 않아야합니다. Insead는 버튼이 실제로 필요한 곳에 놓았습니다.

반면에 개념 상 onsubmit 유효성 검사를 원하지 않기 때문에 onsubmit 코드를 넣는 이유는 무엇입니까? 버튼 유효성 검사를 정말로 원합니다.

코드가 더 명확 할뿐만 아니라 코드가 있어야하는 위치에 있습니다. 이것을 기억하십시오 :-JavaScript가 서버의 PHP에서 항상 수행 해야하는 양식의 유효성을 검사하지 않기를 원합니다-모든 필드가 비어 있지 않아야하며 JavaScript가 필요한 클라이언트 (클라이언트가 필요하다는 메시지)를 사용자에게 보여주고 싶습니다. 측면)

그렇다면 왜 어떤 사람들은 onsumbit 유효성 검사를 수행해야합니까? 아니요, 개념적으로 클라이언트 측에서 onsumbit 유효성 검사를 수행하지 않습니다. 버튼을 눌렀을 때 무언가를하고 있습니다. 그래서 왜 구현하도록하지 않습니까?

그 코드와 스타일은 트릭을 완벽하게 수행합니다. 양식을 보내야하는 모든 JavaScript에서 방금 입력했습니다.

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

그리고 필요하지 않으면 유효성 검사를 건너 뜁니다. 양식을 보내고 다른 페이지 등을로드합니다.

그러나 사용자가 제출 단추 (일명 type="button"아님 type="submit")를 클릭하면 양식을 제출하기 전에 유효성 검증이 수행되고 유효하지 않은 경우에는 전송되지 않습니다.

이것이 다른 사람들이 길고 복잡한 코드를 시도하지 않는 데 도움이되기를 바랍니다. onsubmit필요 하지 않으면 사용 하지 말고 사용하십시오 onclick. 그러나 JavaScript 로 변경 type="submit"하는 type="button"것을 잊지 말고 submit()JavaScript 로하는 것을 잊지 마십시오 .

— z666zz666z
소스
28

Shog9에 동의하지만 대신 다음을 사용할 수 있습니다.

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

W3 스쿨 스에 따르면 의 <button>태그는 다른 브라우저에 다른 행동을 가지고있다.

— 파운드
소스
18

HTML 양식에 id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

이 jQuery 스 니펫을 코드에 추가하여 결과를 확인하십시오.

$("#form_id").submit(function(){
  return false;
});
— 프라 테크 조시
소스
18

jQuery를 사용하여 버튼의 참조를 가져 와서 다음과 같이 전파를 막을 수 있습니다.

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
— 아타이라 바니
소스
2
e.preventDefault(); e.stopPropagation();일하기에 충분합니다. e.stopImmediatePropagation()Chrome에서 정의되지 않은 메소드 오류가 발생합니다.
— Subroto
14

$("form").submit(function () { return false; }); 그 제출에서 버튼을 방지 할 수 있습니다 아니면 그냥 "버튼"을 버튼 유형을 변경할 수 있습니다 <input type="button"/>대신 <input type="submit"/> 어떤 것에만 작업이 버튼이 양식에서 유일하게 버튼이 아닌 경우.

— 시알 라
소스
2
이것은 jQuery를위한 것이며, Javascript와 동등한 기능은 다음과 같습니다. myform.onsubmit = function () {return false} ... 또한 제출 단추를 제거하더라도 다른 양식 필드에서 Enter를 눌러 양식을 제출할 수도 있습니다.
— Synexis 2016 년
10

이것은 html5 오류라고 말한 것처럼 다음과 같이 사용하여 버튼을 제출로 사용할 수 있습니다 (자바 스크립트 사용자와 비 Javascript 사용자 모두를 포함하려는 경우).

     <button type="submit" onclick="return false"> Register </button>

이렇게하면 제출을 취소하지만 여전히 jquery 또는 javascript 함수에서 수행중인 작업을 수행하고 javascript가없는 사용자를 위해 제출하십시오.

— 시상
소스
8

나는 FF에서 

removeItem

함수에 JavaScript 오류가 발생했습니다. 이것은 IE에서 발생하지 않았습니다.

자바 스크립트 오류가 표시되면 "false return"코드가 실행되지 않아 페이지가 다시 게시되도록합니다.

— 알린 바 실레
소스
8

false를 반환하면 기본 동작이 방지됩니다. 그러나 false를 반환하면 추가 클릭 이벤트의 버블 링이 중단됩니다. 즉,이 함수가 호출 된 후 다른 클릭 바인딩이 있으면 다른 클릭 바인딩이 고려되지 않습니다.

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

아니면 간단히 이렇게 넣을 수 있습니다

 <button type="submit" onclick="return false"> PostData</button>
— 수니 파파 둘레
소스
7

e.preventDefault();메소드를 추가하면 페이지가 양식을 제출하지 못하게됩니다.

function myFunc(e){
       e.preventDefault();
}

MDN 웹 문서 에 따르면

이벤트 인터페이스의 preventDefault () 메소드는 이벤트가 명시 적으로 처리되지 않으면 기본 조치가 정상적으로 수행되지 않아야 함을 사용자 에이전트에 알려줍니다. 리스너 중 하나가 stopPropagation ()또는을 (를 stopImmediatePropagation ()) 호출하지 않고 전파를 종료 하지 않는 한 이벤트는 평소와 같이 계속 전파됩니다 .

— 음 셀미 알리
소스
6

일반적인 방법으로 버튼을 설정하고 event.preventDefault like.를 사용하십시오. 

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }
— 비샬
소스
4 
return false;

함수가 끝날 때 또는 함수 호출 후에 false를 반환 할 수 있습니다.

마지막으로 발생하는 한 양식이 제출되지 않습니다.

— WonderWorker
소스
2

간단한 접근 방식은 다음과 같습니다.

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});
— 공리
소스
1

다음 샘플 코드는 단추 클릭이 양식을 제출하지 못하게하는 방법을 보여줍니다.

내 샘플 코드를 사용해보십시오.

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
— KNVB
소스
0

removeItem 함수에는 실제로 오류가 포함되어있어 양식 단추가 기본 동작 (양식 제출)을 수행합니다. 이 경우 자바 스크립트 오류 콘솔은 일반적으로 포인터를 제공합니다.

자바 스크립트 부분에서 removeItem 함수를 확인하십시오.

라인 :

rows[rows.length-1].html('');

작동하지 않습니다. 대신 이것을 시도하십시오 :

rows.eq(rows.length-1).html('');
— ylebre
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.