1
votes

Modifier dynamiquement l'action du formulaire en fonction de la sélection à l'aide de jQuery - problème avec la soumission par défaut

J'ai un formulaire simple avec un champ d'options de courrier électronique. Je voulais faire une action de changement dynamique de formulaire basée sur la sélection à l'aide de jQuery et cela fonctionne bien.

Le seul problème est que si vous ne sélectionnez pas en cliquant sur l'une des options 'Motoristi' / 'Navtika', rien ne se passe. Je veux que l'action par défaut fonctionne.

<html>
  <script>
    $(document).ready(function () {
      // Function to change form action.
      $("#db").change(function () {
        var selected = $(this).children(":selected").text();
        switch (selected) {
          case "Motoristi":
            $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4');

            break;
          case "Navtika":
            $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=2463b3ce5c');
            break;

          default:
            $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4');
        }
      });

      // Function For Back Button
      $(".back").click(function () {
        parent.history.back();
        return false;
      });
    });     
  </script>
  <div id="main">
    <div id="first">
      <form id="myform" method="post" name="myform">
        <label>E-poÅ¡tni naslov:</label>
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
        <label>Zanimanje:</label>
        <select id="db">
          <option>Motoristi</option>
          <option>Navtika</option>
        </select>
        <input class="submit" id="submit" type="submit" value="Submit">
      </form>
    </div>
  </div>
</html>

javascript jquery html

2 commentaires

nécessite juste votre sélection

oh nvm je viens de comprendre le problème

3 Réponses :

0
votes

Votre switch / case n'est exécuté que si un utilisateur clique sur modifier la liste déroulante. Si la liste déroulante ne change pas, rien ne se passe.

Ajoutez simplement l'action par défaut du formulaire directement à votre formulaire et remplacez-la si un utilisateur modifie la sélection.

$("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&amp;id=75956a3bb4');

Et puis remplacez dans vos cas:

<form id="myform" method="post" name="myform" action="YOUR DEFAULT ACTION">

0 commentaires

0
votes

L'instruction switch n'est déclenchée qu'après que l'événement change soit déclenché sur votre sélection. Donc, par défaut, votre formulaire n'a pas d'action. Afin de donner à votre formulaire une action par défaut, donnez au formulaire un attribut action . Lorsque l'un des cas de votre commutateur est sélectionné, les actions changent. Si aucun des cas ne correspond, rien ne se passe. Donc:

switch (selected) {

    case "Motoristi":
        $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&amp;id=75956a3bb4');
        alert("Form Action is Changed to 'mysql.html'n Press Submit to Confirm");
    break;
    case "Navtika":
        $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&amp;id=2463b3ce5c');
        alert("Form Action is Changed to 'oracle.html'n Press Submit to Confirm");
    break;
}

et le commutateur comme ceci:

<form id="myform" method="post" name="myform" action="https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&amp;id=75956a3bb4">
    <!-- rest of your form -->
</form>

0 commentaires

0
votes

Quelques corrections

Définissez `[action]` sur la valeur par défaut car l'utilisateur pourrait ignorer et il n'y aurait pas de valeur par défaut autrement.

Ajoutez un par défaut à la première position.

Ajoutez une `valeur` à chaque

Utilisez le directement pour obtenir la valeur sélectionnée.

`var selected = $ ('# db'). val ()`

Utilisez `confirm ()` au lieu de `alert ()`

Lorsque l'utilisateur clique sur `OK` , définissez `[action]` sur une nouvelle valeur et `retour` .

Lorsque l'utilisateur clique sur `Annuler` , définissez sur la valeur par défaut: `$ ('# db'). val ('')` li>

Utilisez des littéraux de modèle au lieu de littéraux de chaîne.

TL: Envelopper avec ` ex. `chaîne de texte`

TL: peut avoir plusieurs lignes

Suggestions

Utilisez un élément sémantique lorsque cela est possible.
- , et ont été ajoutés pour définir la hiérarchie et l'objectif. Pour une raison plus technique, les styles peuvent être attribués de manière plus fluide.
J'ai changé l'identifiant de

en #main de #myForm . Il n'y a aucun avantage à le faire, c'est juste que je déteste tout ce qui s'appelle mon * c'est juste mon avis.

Demo

<!DOCTYPE html>
<html>

<head></head>

<body>
  <main>
    <section class="first">
      <form id="main" action='https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4' name="main" method="post">
        <fieldset>
          <label>E-poÅ¡tni naslov:</label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required><br>
          <label>Zanimanje:</label>
          <select id="db">
            <option value=''>Odaberite zanimanje</option>
            <option value='Motoristi'>Motoristi</option>
            <option value='Navtika'>Navtika</option>
          </select>
          <input type="submit">
        </fieldset>
      </form>
    </section>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

$(document).ready(function() {
  // Function to change form action.
  $("#db").change(function() {
    var selected = $(this).val();
    switch (selected) {
      case "Motoristi":
        if (window.confirm(`
        Form Action is Changed to 'mysql.html'
        Press OK to Confirm.
        `)) {
          $("#main").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4');
          return;
        }
        $(this).val('');
        break;

      case "Navtika":
        if (window.confirm(`
        Form Action is Changed to 'oracle.html' 
        Press OK to Confirm.
        `)) {
          $("#main").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=2463b3ce5c');
          return;
        }
        $(this).val('');
        break;

      default:
        $("#main").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4');
        break;
    }
  });

  // Function For Back Button
  $(".back").click(function() {
    parent.history.back();
    return false;
  });
});

0 commentaires