Phil Phil - 27 days ago 5
jQuery Question

Form Submit jQuery does not work

I have that form

<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>


and that Popup from
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>


with my 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>


The popup shows up but the form submit does not work.
Does someone have any ideas?

Answer

Several things

As mentioned, you need to submit the form using a simpler event than the jQuery one

BUT you also need to cancel the clicks on the links

The NUMBER ONE error is to have ANYTHING with ID or NAME "submit" in your form. Rename your form elements or you cannot call .submit() on the form

why by the way do you have two buttons? Since you use jQuery to submit the form, you will never know which of the two buttons were clicked unless you set a hidden field on click

<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();
        $("#popupDialog").popup('close');
        if (this.id=="OKlink") document.getElementById("form_id").submit();
    });

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

Judging from your comments, I think you really want to do this:

<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();
        $("#popupDialog").popup('close');
        if (this.id=="OKlink") document.getElementById("form_id").submit();
    });
    $(".delete").on("click", function(e) {
        $("#whichdelete").val(this.value);
    });
    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $("#popupDialog").popup('open');
    });
});