제출 버튼 onclick 이벤트에서 양식 제출을 어떻게 취소합니까?

ASP.net 웹 응용 프로그램에서 작업 중입니다.

제출 버튼이있는 양식이 있습니다. 제출 버튼의 코드는 다음과 같습니다 <input type='submit' value='submit request' onclick='btnClick();'>.

다음과 같이 작성하고 싶습니다.

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

어떻게해야합니까?

당신은하는 것이 낫습니다 ...

<form onsubmit="return isValidForm()" />

이 isValidForm()반환 false되면 양식이 제출되지 않습니다.

또한 이벤트 핸들러를 인라인에서 이동해야합니다.

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};

입력을 다음과 같이 변경하십시오.

<input type='submit' value='submit request' onclick='return btnClick();'>

함수에서 false를 반환합니다.

function btnClick() {
    if (!validData())
        return false;
}

당신은 변해야합니다

onclick='btnClick();'

에

onclick='return btnClick();'

과

cancelFormSubmission();

에

return false;

그건 내가 찬성 고유 이벤트 속성 피하려고 거라고 말했다 눈에 거슬리지 JS를 정말로 중요한하는 경우에 API와 넥타이를 처리하는 좋은 이벤트가 있습니다 (예 : YUI 또는 jQuery를 같은) 라이브러리 (예 : 양식의 대신에 이벤트를 제출 버튼의 클릭 이벤트).

때로는 onsubmitasp.net에서 작동하지 않습니다.

나는 아주 쉬운 방법으로 그것을 해결했습니다.

우리가 그런 형태를 가지고 있다면

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

이제 양식 포스트 백 전에 해당 이벤트를 잡아서 포스트 백에서 중지하고이 jquery를 사용하여 원하는 모든 ajax를 수행 할 수 있습니다.

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });

유형을에서 submit로 변경해야 합니다 button.

<input type='button' value='submit request'>

대신에

<input type='submit' value='submit request'>

그런 다음 자바 스크립트에서 버튼 이름을 얻고 원하는 작업을 연결하십시오.

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

도움이되기를 바랍니다.

다음이 필요합니다 return false;.

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}

제출 버튼을 일반 버튼으로 변경하고 클릭 이벤트에서 유효성 검사 테스트를 통과하면 양식을 제출하는 것이 어떻습니까?

예 :

<input type='button' value='submit request' onclick='btnClick();'>

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 

당신은 필요합니다 onSubmit. 아니 onClick, 그렇지 않은 사람은 키를 눌러 입력 할 수 있으며 유효성 검사를 생략합니다. 취소에 관해서. 거짓을 반환해야합니다. 코드는 다음과 같습니다.

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}

onSubmit 편집 은 양식 태그에 속합니다.

간단합니다. false를 반환합니다.

아래 코드는 jquery를 사용하여 제출 버튼의 onclick 내에 있습니다.

if(conditionsNotmet)
{
return false;
}

사용하다 onclick='return btnClick();'

과

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>

JQuery를 사용하면 훨씬 더 간단합니다. Asp.Net MVC 및 Asp.Core에서 작동합니다.

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>