web-dev-qa-db-fra.com

Formulaire d'envoi jQuery ne fonctionne pas

J'ai ce formulaire

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

et que Popup de 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>

avec mon code jQuery

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

La fenêtre contextuelle apparaît mais le formulaire envoyé ne fonctionne pas .. Est-ce que quelqu'un a des idées?

jqueryjquery-ui
44
Phil

L’erreur NUMBER ONE est d’avoir n'importe quoi, avec submit comme ID ou NAME dans votre formulaire.

Renommez vos éléments de formulaire , sinon vous ne pouvez pas appeler .submit() sur le formulaire car la méthode/le gestionnaire d'envoi est masqué par l'attribut name/id.

Plusieurs autres choses:

Comme mentionné, vous devez soumettre le formulaire en utilisant un événement plus simple que celui de jQuery.

MAIS vous devez également annuler les clics sur les liens

Pourquoi, au fait, avez-vous deux boutons? Puisque vous utilisez jQuery pour soumettre le formulaire, vous ne saurez jamais sur lequel des deux boutons ont été cliqués à moins que vous ne définissiez un champ caché en cliquant.

<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');
    });
});

À en juger par vos commentaires, je pense que vous voulez vraiment faire ceci:

<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');
    });
});
121
mplungjan

Parce que lorsque vous appelez $( "#form_id" ).submit();, il déclenche le gestionnaire d'envoi externe qui empêche l'action par défaut, utilisez plutôt

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

ou

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

Lorsque vous appelez la méthode submit de l'élément dom par programme, les gestionnaires de soumission attachés à l'élément ne sont pas déclenchés.

41
Arun P Johny

Согласно http://api.jquery.com/submit/

Pour envoyer, cliquez sur Annuler, cliquez sur Annuler, cliquez sur Annuler. Он может быть прикреплен только к элементам. Ормы могут быть отправлены либо нажатием явного <input type="submit">, <input type="image"> или <button type="submit">, либо нажавEnterкогда определенные элементы формы имеют фокус.

В общем, .submit является обязательной функцией, для отправки формы вы можете использовать просать

document.formName.submit().
7
BrownEyes

Étant donné que chaque élément de contrôle est référencé avec son nom sur l'élément de formulaire ( voir les spécifications de formulaire ), les contrôles portant le nom "submit" remplaceront la fonction d'envoi intégrée.

Ce qui conduit à l'erreur mentionnée dans les commentaires ci-dessus:

Uncaught TypeError: la propriété 'submit' de l'objet #<HTMLFormElement> n'est pas une fonction

Comme dans la réponse acceptée ci-dessus, la solution la plus simple serait de changer le nom de cet élément de contrôle.

Cependant, une autre solution pourrait être d'utiliser la méthode dispatchEvent sur un élément de formulaire:

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

N'oubliez pas de fermer votre formulaire avec un </form>. Cela a arrêté submit () de travailler pour moi.

0
Antony

Très bien, cela ne s'applique pas à la situation exacte du PO, mais pour tous ceux qui, comme moi, viennent ici pour faire face à un problème similaire, imaginez que je devrais jeter cela dehors… peut-être économiser un ou deux maux de tête. 

Si vous utilisez un "bouton" non standard pour vous assurer que l'événement submit n'est pas appelé:

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

Ensuite, lorsque vous tenterez d’accéder à this.form dans le script, il sera indéfini.

Au lieu de cela, vous pouvez utiliser un button avec type="button"

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

(Je n'ai pas encore testé cela sur tous les navigateurs, alors quelqu'un pourrait avoir besoin de m'appeler à ce sujet.)

0
DevBodin

s'il y a une erreur dans la fonction submit, celle-ci sera exécutée. dans d'autres phrases, empêcher par défaut (ou renvoyer faux) ne fonctionne pas lorsqu'une erreur existe dans la fonction d'envoi.

0
Ali Rasouli

Si vous effectuez une validation de formulaire telle que

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

Vérifiez que vous retournez vrai. Cela semble simple mais j'avais

var finalReturn = false;

Lorsque le formulaire était correct, il n'était pas corrigé par validateForm et n'a donc pas été soumis en tant que finalReturn était toujours initialisé à false au lieu de true. En passant, le code ci-dessus fonctionne bien avec l'adresse, la ville, l'état, etc.

0
Richard Bradley Smith