리뷰나라 - Page 44369 of 45039

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

다음 페이지에서 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>

답변

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

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

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

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

답변

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

<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이가로 알려져있다 – 이벤트 서버 측 처리를 방해 자바 스크립트 .

답변

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

그래서 여기에 넣은 것은 사용자가 버튼 (일반적으로 보내기 버튼)을 누를 때만 유효성 검사없이 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 로하는 것을 잊지 마십시오 .

답변

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

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

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

답변

HTML 양식에 id="form_id"

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

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

$("#form_id").submit(function(){
  return false;
});

답변

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

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

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

            return false;
    });});

답변

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