양식 제출 jQuery가 작동하지 않습니다.

양식 제출 jQuery가 작동하지 않습니다.

저는 그 양식을 가지고 있습니다.

<form action="deletprofil.php" id="form_id" method="post">
            <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
                <button type="submit" name="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
                <button type="submit" name="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
            </div>
        </form> 

의 그 .jQuery Mobile

<div class="ui-popup-container pop in ui-popup-active" id="popupDialog-popup" tabindex="0" style="max-width: 1570px; top: 2239.5px; left: 599px;">
    <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;" class="ui-popup ui-body-b ui-overlay-shadow ui-corner-all">
        <div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
            <h1 class="ui-title" role="heading" aria-level="1">Delete Page?</h1>
        </div>
        <div role="main" class="ui-content">
            <h3 class="ui-title">Sicher dass Sie das Profil löschen wollen?</h3>
            <p>Es kann nicht mehr rückgängig gemacht werden.</p>
            <a href="#" id="NOlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Abbrechen</a>
            <a href="#" id="OKlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">OK</a>
        </div>
    </div>
  </div>

제 jQuery Code로

<script language="javascript" type="text/javascript">
$(function(){
    $('#form_id').bind('submit', function(evt){
        $form = this;
        evt.preventDefault();
        $("#popupDialog").popup('open');
        $("#NOlink").bind( "click", function() {
            $("#popupDialog").popup('close');
        });
        $("#OKlink").bind( "click", function() {              
            $("#popupDialog").popup('close');   
            $( "#form_id" ).submit();         
        });         
    });
});    
    </script>

팝업이 나타나지만 제출 양식이 작동하지 않습니다.누가 무슨 생각 있어요?

에 NUMBER ONE 오류가 .submit~하듯이ID아니면NAME당신의 형태로

,.submit()그 양식과 그 양식이 가지고 있습니다.submit폼의 제출 메서드/handler은 name/id 속성에 의해 음영 처리되므로 폼 요소의 이름을 변경해야 합니다.

---

그 밖의 몇 가지 사항

말씀하신 것처럼 jQuery보다 간단한 이벤트를 이용해서 양식을 제출하셔야 합니다.

하지만 링크 클릭도 취소해야 합니다.

그런데 왜 단추가 두 개 있습니까?jQuery를 사용하여 양식을 제출하기 때문에 클릭할 때 숨겨진 필드를 설정하지 않는 한 두 단추 중 어떤 단추를 클릭했는지 알 수 없습니다.

<form action="deletprofil.php" id="form_id" method="post">
  <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
  <button type="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
  <button type="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
  </div>
</form> 

 $(function(){
    $("#NOlink, #OKlink").on("click", function(e) {
        e.preventDefault(); // cancel default action
        $("#popupDialog").popup('close');
        if (this.id=="OKlink") { 
          document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
        }
    });

    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $("#popupDialog").popup('open');
    });
});    

당신의 의견으로 미루어 볼 때, 당신은 정말로 이것을 하고 싶어하는 것 같습니다.

<form action="deletprofil.php" id="form_id" method="post">
  <input type="hidden" id="whichdelete" name="whichdelete" value="" />
  <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
  <button type="button" value="1" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
  <button type="button" value="2" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
  </div>
</form> 

 $(function(){
    $("#NOlink, #OKlink").on("click", function(e) {
        e.preventDefault(); // cancel default action
        $("#popupDialog").popup('close');
        if (this.id=="OKlink") { 
          // trigger the submit event, not the event handler
          document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
        }
    });
    $(".delete").on("click", function(e) {
        $("#whichdelete").val(this.value);
    });
    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $("#popupDialog").popup('open');
    });
});  

때.$( "#form_id" ).submit();합니다를 합니다.

$( "#form_id" )[0].submit();       

아니면

$form.submit();//declare `$form as a local variable by using var $form = this;

돔 요소의 제출 메서드를 프로그램적으로 호출하면 요소에 연결된 제출 핸들러가 트리거되지 않습니다.

http://api.jquery.com/submit/ 에 의하면.

제출 이벤트는 사용자가 양식을 제출하려고 할 때 요소로 전송됩니다.요소에만 부착할 수 있습니다.다를 할 수 .<input type="submit">,<input type="image">, 아니면<button type="submit">, 또는 특정 폼 요소에 포커스가 있을 때 누름으로써.

그래서 기본적으로..submit다 를 할 수

document.formName.submit().

모든 제어 요소는 양식 요소의 이름과 함께 참조되므로(양식 사양 참조), "제출"이라는 이름을 가진 컨트롤은 내장 제출 기능을 재정의합니다.

이로 인해 위의 설명에 언급된 오류가 발생합니다.

Type 의 ''#<HTMLFormElement>다가 .

위의 인정된 답변에서처럼 가장 간단한 해결책은 해당 제어 요소의 이름을 변경하는 것입니다.

또 과 같습니다.dispatchEvent드:

$("#form_id")[0].dispatchEvent(new Event('submit')); 

제출 기능에 오류가 하나 발생하면 제출 기능이 실행됩니다.다른 문장에서는 submit function에서 하나의 오류가 있을 때 default(또는 return false)가 작동하지 않도록 합니다.

다음과 같은 양식 검증을 수행하는 경우

type="submit" onsubmit="return validateForm(this)"

validateForm = function(form) {
if ($('input#company').val() === "" || $('input#company').val() === "Company")  {
        $('input#company').val("Company").css('color','red'); finalReturn = false; 
        $('input#company').on('mouseover',(function() { 
            $('input#company').val("").css('color','black'); 
            $('input#company').off('mouseover');
            finalReturn = true; 
        }));
    } 

    return finalReturn; 
}

다시 한 번 확인해 보십시오.간단할 것 같지만 저는.

var finalReturn = false;

양식이 정확할 때 validateForm에 의해 수정되지 않았기 때문에 finalReturn으로 제출되지 않았기 때문에 true가 아닌 false로 초기화되었습니다.그런데 위의 코드는 주소, 도시, 주 등과 잘 어울립니다.

A로 폼을 닫는 것을 잊지 마세요.</form>. 그것 때문에 저는 일을 하지 않게 되었습니다.

좋아요, 이 말은 OP의 정확한 상황에는 해당되지 않지만, 저처럼 비슷한 문제에 직면한 사람들이라면, 저는 이것을 밖으로 던져버려야 할 것 같아요. 아마 두통은 한 두번쯤은 구할 수 있을 겁니다.

비표준 "버튼"을 사용하여 다음과 같은 작업을 수행하는 경우submit이벤트가 호출되지 않음:

<form>
  <input type="hidden" name="hide" value="1">
  <a href="#" onclick="submitWithChecked(this.form)">Hide Selected</a>
 </form>

그러면, 당신이 접속하려고 할 때this.form대본에는 정의되지 않은 상태로 나올 것입니다.제가 알아낸 바와 같이, 앵커 요소는 부모와 같은 접근권을 가지지 않습니다.form표준 양식 요소가 하는 방식의 요소.

그런 경우 (다시 말하지만, 당신이 의도적으로 피한다고 가정할 때)submitevent for the time), 당신은 a를 사용할 수 있습니다.button와 함께type="button"

<form>
  <input type="hidden" name="hide" value="1">
  <button type="button" onclick="submitWithChecked(this.form)">Hide Selected</a>
 </form>

---

(2020년 부록: 이 모든 세월이 흐른 지금, 이로부터 떼어낼 수 있는 더 중요한 교훈은 여러분의 입력을 확인하는 것이라고 생각합니다.만약 제 함수가 수신한 인수가 실제로 양식 요소인지 확인하는 데 애를 썼다면, 문제를 파악하기가 훨씬 쉬웠을 것입니다.)

jQuery는 다음과 같이 사용할 수 있습니다.

$(function() {
    $("#form").submit(function(event) {
        // do some validation, for example:
        username = $("#username").val();
        if (username.length >= 8)
            return; // valid
        event.preventDefault(); // invalidates the form
    });
});

HTML에서:

<form id="form" method="post">
    <input type="text" name="username" required id="username">
    <button type="submit">Submit</button>
</form>

참조:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event https://api.jquery.com/submit/

저의 문제는 다른 양식 안에 하나의 양식이 있다는 것이었습니다.

<form>
  <form></form>
</form>

때로는 모든 폼 요소를 동일한 디바에 입력해야 합니다.

예:-

ajax를 사용하는 경우 modal과 함께 제출합니다.

그래서 모든 요소들이 모달 바디에 있습니다.

가끔 우리는 모드 바닥글에 제출 버튼을 넣었습니다.

언급URL : https://stackoverflow.com/questions/22982741/form-submit-jquery-does-not-work