Development Tip

아무것도하지 않으려면 HTML 양식 제출

yourdevel 2020. 12. 30. 19:45
반응형

아무것도하지 않으려면 HTML 양식 제출


html 양식이 제출 된 후 아무것도하지 않기를 원합니다.

action="" 

페이지가 다시로드되기 때문에 좋지 않습니다.

기본적으로 버튼을 누르거나 데이터를 입력 한 후 누군가 "입력"을 누를 때마다 아약스 함수가 ​​호출되기를 원합니다. 예, 양식 태그를 삭제하고 버튼의 onclick 이벤트에서 함수를 호출하기 만하면됩니다.하지만 모든 해킹없이 "히팅 입력"기능을 원합니다.


return false;제출 버튼에서 호출하는 javascript를 사용 하여 양식 제출을 중지 할 수 있습니다.

기본적으로 다음 HTML이 필요합니다.

<form onsubmit="myFunction(); return false;">
<input type="submit" value="Submit">
</form>

그런 다음 지원 자바 스크립트 :

<script language="javascript"><!--
function myFunction() {
    //do stuff
}
//--></script>

원하는 경우 스크립트가 양식을 제출하도록 허용하는 특정 조건을 가질 수도 있습니다.

<form onSubmit="return myFunction();">
<input type="submit" value="Submit">
</form>

다음과 페어링 됨 :

<script language="JavaScript"><!--
function myFunction() {
    //do stuff
    if (condition)
        return true;

    return false;    
}
//--></script>

또한 작동합니다.

<form id='my_form' action="javascript:myFunction(); return false;">

<form id="my_form" onsubmit="return false;">

충분합니다 ...


어때

<form id="my_form" onsubmit="the_ajax_call_function(); return false;">
 ......
</form>

다음 HTML을 사용할 수 있습니다.

<form onSubmit="myFunction(); return false;">
  <input type="submit" value="Submit">
</form>

버튼의 onclick 이벤트의 일부로 false를 반환하여 양식 제출을 중지합니다.

즉 :

function doFormStuff() {
    // ajax function body here
    return false;
}

그리고 제출 버튼 클릭시 해당 함수를 호출하십시오. 여러 가지 방법이 있습니다.


jquery를 사용하십시오. 양식에서 요소 주위에 div를 배치 할 수 있습니다. 그런 다음 preventDefault ()를 사용하고 ajax 호출을 수행하십시오.


<form action='javascript:functionWithAjax("search");'>
  <input class="keyword" id="keyword" name="keyword" placeholder="input your keywords" type="search">
  <i class="iconfont icon-icon" onclick="functionWithAjax("search");"></i>
</form>

<script type="text/javascript">
function functionWithAjax(type) {
  // ajax action

  return false;
}
</script>

참조 URL : https://stackoverflow.com/questions/3384960/want-html-form-submit-to-do-nothing

반응형