양식 제출을 중지하는 JavaScript 코드

206

양식 제출을 중지하는 한 가지 방법은 JavaScript 함수에서 false를 반환하는 것입니다.

제출 단추를 클릭하면 유효성 검증 기능이 호출됩니다. 양식 유효성 검사에 대한 사례가 있습니다. 해당 조건이 충족되면 returnToPreviousPage () 라는 함수를 호출합니다 .

function returnToPreviousPage() {
    window.history.back();
}

JavaScript와 Dojo Toolkit을 사용하고 있습니다.

이전 페이지로 돌아가서 양식을 제출합니다. 이 제출을 중단하고 이전 페이지로 돌아가려면 어떻게해야합니까?

javascript html forms

— 무하마드 임란 타리크
소스

RU 확실히이 함수가 호출되고 있습니까 ?? alert ( 'test')를 넣어보십시오; window.history 전에

— samirprogrammer

그래 확실해; 호출됩니다.

— Muhammad Imran Tariq

8

양식이 제출되는 것을 방지하는 방법의

— TJ

292

함수의 반환 값을 사용하여 양식 제출을 막을 수 있습니다

<form name="myForm" onsubmit="return validateMyForm();">

그리고 같은 기능

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

Chrome 27.0.1453.116 m의 경우 위의 코드가 작동하지 않으면 이벤트 핸들러의 매개 변수 returnValue 필드를 false로 설정하여 작동 시키십시오.

정보를 공유해 주셔서 감사합니다.

편집하다 :

validateMyForm ()이 false를 반환하는 경우에 대한 해결 방법으로 Vikram에 감사합니다.

 <form onsubmit="event.preventDefault(); validateMyForm();">

여기서 validateMyForm ()은 유효성 검사에 실패하면 false를 반환하는 함수입니다. 요점은 이름 이벤트를 사용하는 것입니다. egepreventDefault ()에는 사용할 수 없습니다

— 헤만 메탈 리아
소스

1

최신 버전의 Chrome에서는 작동하지 않습니다.

— Sam

5

반환되는 false것은 효과가없는 것 같습니다. Chrome은 여전히 양식을 제출합니다. 예를 들면 다음과 같습니다 onsubmit="return false;". 그러나 이벤트 핸들러의 매개 변수 returnValue필드를 설정하면 효과 false가 있습니다.

— Sam

3

안녕하세요 Sam / Hemant, 이벤트 처리기의 매개 변수 returnValue 필드를 false로 설정하는 방법에 대한 코드 샘플을 제공 할 수 있습니까?

— JackDev September

2

나는 이것이 받아 들일만한 대답이기 때문에 아마도 이것을 올바르게 수행하는 방법을 말해야합니다. 나는 JackDev와 함께 이것이 제대로 작동하는 방법을 궁금해하고 있습니다. 이므로,이 수행 되지 작업을

— Cruncher의

1

경우 validateMyForm()이 오류가 return false도달되지 않습니다. 따라서 이것이 실패 할 수 있습니다. 몇 시간 후, 나는 작동하는 솔루션을 발견하고 아래에 게시했습니다.

— Vikram Pudi

116

예방 기본 사용

Dojo 툴킷

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

바닐라 자바 스크립트

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}

— 그렉 귀다
소스

3

나는 여러 가지 이유로 false를 반환하는 것에 대해 event.preventDefault ()를 권장합니다. 이것이 가장 좋은 대답이어야합니다. blog.nmsdvid.com/…

— acidjazz

1

좋은 대답입니다. 선택한 것보다 낫습니다.

— 애니 메논

2

좋습니다.하지만 OP가 원하는 유효성 검사를 어디에서 수행 하시겠습니까?

— Sahand

1

@acidjazz 그러나 기본 설정을 방지 한 후 양식 데이터에 어떻게 액세스합니까?

— CodeAt30

@Sahand @ codeat30 이벤트에 액세스 할 수 있습니다 target.

— Adrien

50

다음은 현재 작동합니다 (Chrome 및 Firefox에서 테스트).

<form onsubmit="event.preventDefault(); validateMyForm();">

여기서 validateMyForm ()은 false유효성 검사에 실패하면 반환되는 함수입니다 . 핵심은 이름을 사용하는 것 event입니다. 예를 들어 사용할 수 없습니다 e.preventDefault().

— 비 크람 푸디
소스

15

button제출 버튼 대신 간단한 것을 사용하십시오 . 그리고 양식 제출을 처리하기 위해 JavaScript 함수를 호출하십시오.

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

script태그 내 기능 :

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

시도해 볼 수도 있습니다 window.history.forward(-1);

— dku.rajkumar
소스

이 접근 방식은 유스 케이스 인 콜백을 허용하기 때문에 좋아합니다.

— Eddie

12

이것은 Enter 키를 사용하여 양식을 제출하지 못하게합니다. 또한 같은 새로운 HTML5 속성 required이 작동하지 않습니다.

— Sam

8

쉬운 일을하는 많은 어려운 방법들 :

<form name="foo" onsubmit="return false">

— 다닐
소스

3

이 정확한 답변 (반 콜론이 없기 때문에 정확하지는 않습니다)은 8 개월 전에 제출되었으며 정당한 이유로 부정적인 투표를합니다. 이것은 대부분 의 시간에 작동합니다 . 그러나 모든 브라우저에서 모든 시간.

— Auspex

3

세미콜론 이 필요 하다고 말하지 않았습니다 . 나는 그것이 당신의 대답과 훨씬 오래된 것의 차이점이라고 지적했습니다 . 지금 브라우저를 지원하지 않는 지적 저를 요구하고 있다는 사실, 당신은 증명 (내가 어떤 있었다 말했다 결코, 나는 단지 그것을하지 않습니다 항상 일을 지적) 아직 이 전체 페이지를 읽지 않은 .

— Auspex

2

사람들이 올바른 코드를 다운 투표하고 있다는 것을 알지 못한다면 일반적으로 다운 투표를 검사하지 않습니다. 기술적으로 세미콜론은 관련이 없으므로 잘못되었습니다. 그리고 당신은 "당신이 세미콜론을 잃어 버렸습니다"라고 말하면서 그것이 필요하다는 것을 암시합니다. "항상 작동하지는 않는다"고 말하지만 작동하지 않는 단일 사례 또는 브라우저를 가리킬 수 없습니까? 이것은 소리 논리입니까? 올바른 코드입니다. 따라서 작동하지 않는 경우를 지적 할 수 없다면 전혀 요점이 없습니다.

— Danial

더 많은 투표를하지 않는 방법은 무엇입니까? 다른 예제에 비해 훨씬 간결합니다.

— Sal Alturaigi

제목이 남자가 실제로 요구 한 것과 일치하지 않기 때문일 수 있습니다.

— Danial

6

모든 대답은 함께 할 일을주었습니다.

마지막으로, 이것은 나를 위해 일했습니다 : (적어도 하나의 확인란 항목을 선택하지 않으면 경고와 동일한 페이지에 유지됩니다)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>

— Gdba
소스

나도 일했다.

— chetan

4

@Vikram Pudi 답변을 기반으로 순수한 Javascript로도 이와 같이 할 수 있습니다

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>

— 판 반 린
소스

3

onsubmit스크립트에서 이벤트를 사용하지 않고 첨부하는 것이 좋습니다 .

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

그런 다음 preventDefault()(또는 returnValue = false구형 브라우저)을 사용하십시오.

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

— 아이작 아브라모 비츠
소스

왜 사용하지 않는지 설명해 주 onsubmit시겠습니까?

— theFreedomBanana

어쩌면 선호 일 수도 있지만 모든 이벤트 리스너가 속성 JS을 HTML사용 하는 대신 연결되어 있으면 웹 페이지의 기능을 이해하는 것이 더 쉽다는 것을 알았습니다 . 그렇게하면 다른 사람의 코드를 읽는 동안 앞뒤로 이동할 필요가 없습니다

— Isaac Abramowitz

누군가가 버튼을 클릭하는 대신 입력 중 하나를 입력하면 어떻게됩니까? 일반적으로 ii 여전히 제출 ...

— bluejayke

1

이와 비슷한 형태를 가지고 있다고 가정 해 봅시다.

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

confirmAction 함수에 대한 자바 스크립트는 다음과 같습니다.

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

이것은 Firefox, Chrome, Internet Explorer (edge), Safari 등에서 작동합니다.

그렇지 않은 경우 알려주십시오

— 모리시오 그라시아 구티에레즈
소스

1

의 조합 preventDefault()과는 returnToPreviousPage()완벽하고 우아한. 예외 캐처가 작동하도록 디자인하는 것처럼 정상적인 작동을 중단합니다. +1.

— 1934286

1

Chrome에서 Hemant와 Vikram의 답변이 제대로 작동하지 않았습니다. event.preventDefault (); 스크립트를 통해 유효성 검사 통과 또는 실패와 상관없이 페이지가 제출되지 않았습니다. 대신, 나는 event.preventDefault (); 다음과 같이 if 문에

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

올바른 길로 안내해 준 Hemant와 Vikram에게 감사합니다.

— 예스 페라이
소스

나도 일했다. 감사.

— ivbtar

1

예를 들어 양식에 제출 버튼이있는 경우 전파를 중지하려면 간단히 event.preventDefault ()를 작성하십시오. 제출 버튼 또는 Enter 버튼을 클릭하면 호출되는 함수에서.

— 딜라 즈 날라 와이드
소스

0

간단하게 ....

<form>
<!-- Your Input Elements -->
</form>

그리고 여기에 당신의 JQuery가

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

— 마테 고즈 라
소스

1

여기서 jquery를 사용 했습니까?

— Selva Ganapathi