<button>이 양식을 제출하지 못하게 할 수 있습니까?


515

2 개의 버튼이있는 양식이 있습니다

<a href="index.html"><button>Cancel changes</button></a>

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

나는 이것처럼 jQuery UI의 버튼도 사용합니다.

$('button').button();

그러나 첫 번째 버튼도 양식을 제출합니다. 나는 그것을 가지고 있지 않다면 그렇지 않을 것이라고 생각 type="submit"했을 것입니다.

분명히 나는 ​​이것을 할 수 있었다

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

그러나 JavaScript 개입없이 해당 뒤로 버튼이 양식을 제출하는 것을 막을 수있는 방법이 있습니까?

솔직히 말하면 버튼 만 사용했기 때문에 jQuery UI로 스타일을 지정할 수 있습니다. button()링크를 호출하려고 시도했지만 예상대로 작동하지 않았습니다 (매우 추한 것처럼 보입니다!).



2
사용 <button type="button">양식을 제출하지 않는 하나와 <input type="submit">다른 하나. 그런 다음 jquery로 잡으십시오$('#formID').submit(function(e){});
Airwavezx 11:16에

답변:


1129

요소 type속성의button 기본값 "submit"입니다. type="button"양식을 제출하지 않는 버튼을 생성하도록 설정하십시오 .

<button type="button">Submit</button>

HTML 표준 의 말에서 : "아무것도하지 않습니다."


14
w3schools에 따르면 IE에는 해당되지 않습니다 .
R0MANARMY

53
그것은 놀랍게도 나쁜 디자인 선택입니다.
octern


와우, 당신과 알렉스는 실제로 개정판에서 그것을 제거하고있었습니다. 왜 당신 중 한 사람이 따옴표에 관심이 있는지 또는 속성에 관심이 없는지 모르겠습니다.
ADJenks

228

button요소 의 기본 유형이 있습니다 submit.

유형을 설정하여 아무것도하지 않도록 할 수 있습니다 button.

<button type="button">Cancel changes</button>

1
@ B.ClayShannon 실제로는 아닙니다. 버튼을 클릭하면 서버 측 코드를 사용하여 동일한 페이지를 반환 할 수 있지만 여전히 페이지를 다시로드합니다. 궁극적으로 버튼은 문서의 일부이므로 브라우저에게 버튼과 동작 방식을 알려주는 유일한 방법은 HTML과 JavaScript입니다.
s4y

17

좋은 오래된 HTML을 사용하십시오.

<input type="button" value="Submit" />

원하는 경우 링크의 주제로 랩핑하십시오.

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

또는 자바 스크립트로 다른 기능을 제공하기로 결정한 경우 :

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

7
적절한 type 속성을 가진 표준 버튼 컨트롤을 사용하는 것은 "good old html"이며 훨씬 간단한 마크 업을 만듭니다.
R0MANARMY

일부 브라우저에서는 기본 유형의 제출이 있고 다른 브라우저에서는 기본 유형의 버튼이 있으면 더 간단하지 않습니다. 빌어 먹을, 심지어 단지 IMO 필요 이상으로 제출 복잡 것들의 기본 유형을 가진. 아무것도하지 않는 버튼을 쉽게 제공하는 마크 업이 있어야합니다. 그리고이 :<input type="button" />
제프리 블레 이크

+1이 정확한 기술을 여러 번 사용해 왔으며 항상 저에게 효과적이었습니다. 한 가지 변형은 일부 클라이언트 측 계산을 기반으로 서버 측 버튼의 포스트 백 이벤트를 취소해야하는 경우 window.event.returnValue = false; 버튼의 클라이언트 측 onclick 이벤트에서 실행되는 코드에서 ... 즉, 사용자 정의 유효성 검사기 컨트롤을 사용하여 겨자를 자르지 않으면 :)
Adam McKee

1
@ JGB146 : 그냥 같은 값으로 모든 브라우저의 기본은 jleedev에 의해 제안으로는 (수동으로 설정되어있는 경우 올바른 유형을 존중하지 의미하지 않기 때문에하지 특히 질문에 언급을 할 수있는 방법을 요청 할 수 있습니다. 않고 당신의 대답은 그것을 고려하지 않는 동안 JavaScript
R0MANARMY

11
@ JGB146 : ButtonHTML의 컨테이너입니다. 그것은 당신이 그것을 input지원하지 않는 동안 이미지 나 테이블과 같은 것을 배치 할 수있게합니다 (왜 그렇게했는지는 모르지만 할 수 있습니다) . 둘 사이에는 차이가 있으며, 각각 적절한 사용 사례가 있습니다.
R0MANARMY


5

솔직히, 나는 다른 답변을 좋아합니다. 쉽고 JS에 들어갈 필요가 없습니다. 그러나 jQuery에 대해 묻는 것으로 나타났습니다. 따라서 완전성을 위해 jQuery에서 .click () 핸들러로 false를 리턴하면 위젯의 기본 조치가 무효화됩니다.

예를 보려면 여기를 참조하십시오 (그리고 더 많은 장점도 있습니다). 여기 문서도 있습니다 .

간단히 말해서 샘플 코드와 함께 다음을 수행하십시오.

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

추가 이점으로이 기능을 사용하면 앵커 태그를 제거하고 버튼을 사용하면됩니다.


흥미롭게 추가 e.preventDefault()(가 시작 어디에 제출을 중지 아무것도하지 않는다 function(e)).
Sablefoste

1

type속성을 설정하지 않으면 핸들러 false에서 리턴 OnClick하여 onclick속성을로 선언 할 수도 있습니다 onclick="return onBtnClick(event)".


0

예, 당신은 버튼 값 버튼의 유형의 속성을 추가하여 양식을 제출할 수 있습니다 : <button type="button"><button>


-2
  <form class="form-horizontal" method="post">
        <div class="control-group">

            <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
        </div>
        <div class="control-group">
            <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
        </div>
        <div class="control-group">
            <input type="text" class="span1" name="unit" id="inputPassword" required>
        </div>
            <div class="control-group">
            <label class="control-label" for="inputPassword">Semester</label>
            <div class="controls">
                <select name="semester">
                    <option></option>
                    <option>1st</option>
                    <option>2nd</option>
                </select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputPassword">Deskripsi</label>
            <div class="controls">
                    <textarea name="description" id="ckeditor_full"></textarea>
 <script>CKEDITOR.replace('ckeditor_full');</script>
            </div>
        </div>



        <div class="control-group">
        <div class="controls">

        <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
        </div>
        </div>
        </form>

        <?php
        if (isset($_POST['save'])){
        $subject_code = $_POST['subject_code'];
        $title = $_POST['title'];
        $unit = $_POST['unit'];
        $description = $_POST['description'];
        $semester = $_POST['semester'];


        $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
        $count = mysql_num_rows($query);

        if ($count > 0){ ?>
        <script>
        alert('Data Sudah Ada');
        </script>
        <?php
        }else{
        mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());


        mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());


        ?>
        <script>
        window.location = "subjects.php";
        </script>
        <?php
        }
        }

        ?>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.