1
votes

Bouton Soumettre aucune fonction lorsque vous cliquez

J'ai émis à propos du bouton Soumettre aucune fonction lorsque l'utilisateur clique dessus. N'importe qui peut m'aider à vérifier quelle partie je me trompe. Merci.

        <script>
 function submit() {
   //alert("Hello! I am an alert box!!");
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
var message = $('#message').val();
if (name == '' || email == ''|| phone == ''){
    alert("Please insert Full Name , Email and phone!");
}else{
    $.ajax({
        type: 'POST',
        url: '?f=send_email',
        data: {
            name: name,
            email: email,
            phone: phone,
            message: message
        },
        success: function (data) {
        if(data=='1'){
            alert("Send Successfull. We will reply you soon.");
            location.reload();
            }else{
            alert("Error while processing data, please try again.");
            }
        }
    });
}
   }
</script>

fonction de script

          <!-- contact form -->
            <div class="col-lg-7 contact-right mt-lg-0 mt-5">

                    <div class="row">
                        <div class="col-lg-6 form-group pr-lg-2">
                            <input id="name" type="text" class="form-control" placeholder="Name" required="">
                        </div>
                        <div class="col-lg-6 form-group pl-lg-2">
                            <input id="email" type="email" class="form-control"  placeholder="Email" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <input id="phone" type="text" class="form-control"  placeholder="Phone" required="">
                    </div>
                    <div class="form-group">
                        <textarea id="message" class="form-control" placeholder="Message" required=""></textarea>
                    </div>
                    <button type="button" onclick="submit();" class="btn submit-contact-main ml-auto">Submit ok</button>

            </div>
            <!-- contact form -->

J'ai utilisé l'alerte ("Bonjour! Je suis une boîte d'alerte !! "); pour tester le bouton de soumission, cela peut être travaillé et fera apparaître le message. Mais jusqu'à ce codage if (name == '' || email == '' || phone == '') {alert ("Please insert Full Name, Email and Phone!");} , cela ne fonctionne pas et pas de popup le message. J'espère que n'importe qui peut m'aider à trouver le problème. Merci.

jquery html

5 commentaires

Pouvez-vous vérifier les outils de développement et accéder à l'onglet console? Ctrl + Shift + i puis allez dans l'onglet console et vérifiez les erreurs.

Assurez-vous d'avoir inclus jquery avant votre bloc de script.

Votre code fonctionne correctement jsfiddle.net/b6xkg4yq comme ci-dessus, assurez-vous que jquery est chargé et vérifiez les erreurs dans la console . N'utilisez pas alert () pour le débogage, utilisez debugger et les outils du navigateur ou console.log (...) .

Veuillez fournir un exemple reproductible minimal qui illustre le problème.

Ajoutez également comme première ligne de submit () ce qui suit: console.log ($ ("# name"). Length, $ ("# email"). Length, $ ("# phone"). Length ); - si l'un d'entre eux n'est pas 1 , votre code ne fonctionnera pas comme prévu car vous avez des ID en double

6 Réponses :

0
votes

Il n'y a rien de mal avec votre syntaxe. Vérifiez votre valeur de retour si elle renvoie "1". Les valeurs des éléments se soumettent bien à la même page.

L'erreur doit être dans votre fonction sendEmail.

0 commentaires

0
votes

Je viens d'essayer votre code dans un codepen et j'ai exactement le problème que vous indiquez. Mais après avoir ajouté l'importation jQuery avant le script, cela a parfaitement fonctionné.

N'oubliez pas d'inclure la bibliothèque jQuery quelque part dans votre code, elle peut être chargée à partir d'un CDN comme celui-ci:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

2 commentaires

Donc vous avez eu "exactement" le même message d'erreur que $ n'est pas défini que OP n'a pas confirmé / nié avoir obtenu?

J'ai confirmé que rien ne s'était réellement passé car la bibliothèque jQuery n'était pas chargée et fonctionnait parfaitement après son importation.

0
votes

Peut-être que votre nom / email / téléphone a des valeurs «null» ou «indéfini»; Pour vérifier les valeurs, vous pouvez écrire quelque chose comme ceci:

function submit() {
       //alert("Hello! I am an alert box!!");
    var name = $('#name').val();
    var email = $('#email').val();
    var phone = $('#phone').val();
    var message = $('#message').val();
    console.log(name);
    console.log(email );
    console.log(phone);
    if (name == '' || email == ''|| phone == ''){
        alert("Please insert Full Name , Email and phone!");
    }else{
        $.ajax({
            type: 'POST',
            url: '?f=send_email',
            data: {
                name: name,
                email: email,
                phone: phone,
                message: message
            },
            success: function (data) {
            if(data=='1'){
                alert("Send Successfull. We will reply you soon.");
                location.reload();
                }else{
                alert("Error while processing data, please try again.");
                }
            }
        });
    }
       }

Et vérifier les valeurs dans la console développeur (F12, éventuellement)

0 commentaires

0
votes

essayez le code suivant.j'espère que cela vous sera utile et pour d'autres

<button type="button" onclick="my_button_click_handler">Click this button</button>
<script>
function my_button_click_handler()
{
alert('Button Clcked');
}
</script>

dans votre cas, onclick = "submit ();" mais vous essayez ceci onclick="submit"

0 commentaires

0
votes

au-dessus de votre balise de script, ajoutez cette balise de script

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
</script>

pour inclure jquery

0 commentaires

0
votes

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>

<div class="col-lg-7 contact-right mt-lg-0 mt-5">
  <div class="row">
    <div class="col-lg-6 form-group pr-lg-2">
      <input id="name" type="text" class="form-control" placeholder="Name" required="">
    </div>
    <div class="col-lg-6 form-group pl-lg-2">
      <input id="email" type="email" class="form-control" placeholder="Email" required="">
    </div>
  </div>
  <div class="form-group">
    <input id="phone" type="text" class="form-control" placeholder="Phone" required="">
  </div>
  <div class="form-group">
    <textarea id="message" class="form-control" placeholder="Message" required=""></textarea>
  </div>
  <button type="button" onclick="submit();" class="btn submit-contact-main ml-auto">Submit ok</button>
</div>

function submit() {
  //alert("Hello! I am an alert box!!");
  var name = $('#name').val();
  var email = $('#email').val();
  var phone = $('#phone').val();
  var message = $('#message').val();
  if (name == '' || email == '' || phone == '') {
    alert("Please insert Full Name , Email and phone!");
  } else {
    $.ajax({
      type: 'POST',
      url: '?f=send_email',
      data: {
        name: name,
        email: email,
        phone: phone,
        message: message
      },
      success: function(data) {
        if (data == '1') {
          alert("Send Successfull. We will reply you soon.");
          location.reload();
        } else {
          alert("Error while processing data, please try again.");
        }
      }
    });
  }
}

0 commentaires