JQuery klicken Sie auf Funktion nicht ausgeführt

Ich versuche, JQuery sowie HTML zu lernen. Ich versuche eine Tabelle mit neu eingegebenen Daten anzuhängen. Ich habe eine Übermittlungsschaltfläche, die die JQUERY-Funktion ausführen sollte, um die Tabelle anzufügen. Ich habe sogar eine Alarmbox in die Funktion gesetzt, um zu sehen, ob sie wenigstens läuft. Gibt es einen offensichtlichen Grund, warum meine Funktion überhaupt nicht läuft?JQuery klicken Sie auf Funktion nicht ausgeführt

HTML

<body> 
<div class="form-style-2"> 
    <div class="form-style-2-heading">Provide your information</div> 
    <form name="contactPage" id="contactPage"> 
     <label for="field1"><span>Name <span class="validated">*</span></span><input type="text" class="input-field" name="field1" id="name" value="" required /></label> 
     <label for="field3"><span>Address <span class="validated">*</span></span><input type="text" class="input-field" name="field3" id="address" value="" required /></label> 
     <label for="field2"><span>Email <span class="validated">*</span></span><input type="text" class="input-field" name="field2" id="email" value="" required /></label> 


     <label><span>&nbsp;</span><input class="addrow" type="submit" value="Submit" /></label> 
    </form> 


    <table width="80%"> 
     <tr> 
      <th>First Name</th> 
      <th>Address</th> 
      <th>Email</th> 
     </tr> 
     <tr> 
     </tr> 
    </table> 
    <p>testtesttest</p> 
</div>

JQUERY

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"> </script> 
<script> 
$(document).ready(function(){ 
    var mainElement = document.getElementById('contactPage'); 

    $(mainElement).find('form input[type="submit"]').click(function (evt) { 
     evt.preventDefault(); 
     if ($(evt.target).parents('form')[0].checkValidity()) { 
      alert("its working!!"); 

      var mainElement = document.getElementById('contactPage'); 

      var name = $("#name").val(); 
      var email = $("email").val(); 
      var address = $("address").val(); 

      var html = '<tr><td>' + name + '</td>' + 
         '<td>' + address + '</td>' + 
          '<td>' + email + '</td></tr>'; 

      $(mainElement).find('table tbody').append(html); 
      $(mainElement).find('form :input[name]').val('') 

     } 

    }); 
}); 
</script>

Quelle

2017-04-21 Anonymous

Ihre Entdeckung Linie nur sein sollte '$ (mainElement) .find ('input [type = "submit"] '). click ('... Im Moment suchst du ein Formular in' # contactPage', das nicht existiert. – techfoobar

ich denke, sind Sie wie dies: -

Änderungen vorgenommen: -

1. $(mainElement).find('input[type="submit"]').click(function (evt) {

2. $('table tbody').append(html); $(mainElement).find('input[type="text"]').val('');

3.Instead von <p>testtesttest</p> hinzufügen <tbody></tbody>

Arbeitsbeispiel: -

$(document).ready(function(){ 
 
    var mainElement = document.getElementById('contactPage'); 
 

 
    $(mainElement).find('input[type="submit"]').click(function (evt) { 
 
    evt.preventDefault(); 
 
    if ($(evt.target).parents('form')[0].checkValidity()) { 
 

 
     var mainElement = document.getElementById('contactPage'); 
 

 
     var name = $("#name").val(); 
 
     var email = $("#email").val(); 
 
     var address = $("#address").val(); 
 

 
     var html = '<tr><td>' + name + '</td><td>' + address + '</td><td>' + email + '</td></tr>'; 
 
     $('table tbody').append(html); 
 
     $(mainElement).find('input[type="text"]').val(''); 
 

 
    } 
 

 
    }); 
 
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"> </script> 
 
<body> 
 
<div class="form-style-2"> 
 
    <div class="form-style-2-heading">Provide your information</div> 
 
    <form name="contactPage" id="contactPage"> 
 
     <label for="field1"><span>Name <span class="validated">*</span></span><input type="text" class="input-field" name="field1" id="name" value="" required /></label> 
 
     <label for="field3"><span>Address <span class="validated">*</span></span><input type="text" class="input-field" name="field3" id="address" value="" required /></label> 
 
     <label for="field2"><span>Email <span class="validated">*</span></span><input type="text" class="input-field" name="field2" id="email" value="" required /></label> 
 

 
     <label><span>&nbsp;</span><input class="addrow" type="submit" value="Submit" /></label> 
 
    </form> 
 
    <table width="100%"> 
 
     <tr> 
 
      <th>First Name</th> 
 
      <th>Address</th> 
 
      <th>Email</th> 
 
     </tr> 
 
     <tr> 
 
     </tr> 
 
    </table> 
 
    <tbody> 
 
    </tbody> 
 
</div>

Quelle

2017-04-21 07:34:44

Danke, das hat funktioniert! –

@Konovoloff froh, Ihnen zu helfen :) :) –

Verketten Sie niemals beliebige Daten in HTML! Setzen Sie stattdessen den Test dieser Zellenelemente. – Brad

-1

Sie haben einige Probleme in Ihrem script.
1. In Form versuchen Sie ein Formular zu finden.
2. keine Notwendigkeit submit Taste einstellen, können Sie normale verwenden button

Sie unter Schnipsel nach aktualisierten Code überprüfen:

$('#contactPage input[type="button"]').click(
 
function (evt) { 
 
\t evt.preventDefault(); 
 
\t if ($(evt.target).parents('form')[0].checkValidity()) { 
 
\t \t alert("its working!!"); 
 

 
\t \t var mainElement = document.getElementById('contactPage'); 
 

 
\t \t var name = $("#name").val(); 
 
\t \t var email = $("email").val(); 
 
\t \t var address = $("address").val(); 
 

 
\t \t var html = '<tr><td>' + name + '</td>' + 
 
\t \t \t \t \t '<td>' + address + '</td>' + 
 
\t \t \t \t \t \t '<td>' + email + '</td></tr>'; 
 

 
\t \t $(mainElement).find('table tbody').append(html); 
 
\t \t $(mainElement).find('form :input[name]').val('') 
 

 
\t } 
 

 
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"> </script> 
 

 
<div class="form-style-2-heading">Provide your information</div> 
 
    <form name="contactPage" id="contactPage"> 
 
     <label for="field1"><span>Name <span class="validated">*</span></span><input type="text" class="input-field" name="field1" id="name" value="" required /></label> 
 
     <label for="field3"><span>Address <span class="validated">*</span></span><input type="text" class="input-field" name="field3" id="address" value="" required /></label> 
 
     <label for="field2"><span>Email <span class="validated">*</span></span><input type="text" class="input-field" name="field2" id="email" value="" required /></label> 
 

 

 
     <label><span>&nbsp;</span><input class="addrow" type="button" value="Submit" /></label> 
 
    </form> 
 

 

 
    <table width="80%"> 
 
     <tr> 
 
      <th>First Name</th> 
 
      <th>Address</th> 
 
      <th>Email</th> 
 
     </tr> 
 
     <tr> 
 
     </tr> 
 
    </table> 
 
    <p>testtesttest</p> 
 
</div>

Quelle

2017-04-21 07:32:17

Daten niemals direkt in HTML verketten! Stellen Sie stattdessen den Text ein, um die verwendeten Daten ordnungsgemäß zu entfernen. – Brad

Wie @techfoobar wies in seiner Kommentar Sie sollten das "Formular" aus Ihrem Selektor entfernen, da Sie sich bereits im Formular befinden, wenn Sie Ihren Fund verwenden.

<form name="contactPage" id="contactPage"> 

var mainElement = document.getElementById('contactPage'); 
$(mainElement).find('input[type="submit"]')

, wenn Sie das Hauptelement weisen Sie die Formular-Container zuweisen, können so Ihre Wähler finden nicht in einem Formular abgesendet haben, da Sie bereits „innerhalb“ Ihre Form

Quelle

2017-04-21 07:33:07 MKougiouris

JQuery klicken Sie auf Funktion nicht ausgeführt

Antwort

Verwandte Themen