So verwenden Sie mehrere Funktionen auf onsubmit-Schaltfläche

Mein Hauptproblem hier ist, dass dieses Formular bereits eine Übergabefunktion hatte, die auf eine Seite umleiten. Inzwischen habe ich die Validierung vergessen, dann habe ich versucht, beide Funktionen zu einem zusammenzufassen und es funktionierte nur für den Namen.So verwenden Sie mehrere Funktionen auf onsubmit-Schaltfläche

Jetzt muss das Namensfeld gültig sein und es wird zu einer anderen HTML-Seite gesprungen, nachdem die Schaltfläche Senden gedrückt wurde. Die lokale und die E-Mail, hat überhaupt nicht funktioniert.

Ich brauche Hilfe bei der Einstellung der Validierungskonfigurationen, alle Felder müssen validiert werden, die Optionsfelder (mindestens eins) müssen aktiviert sein, die Kontrollkästchen (mindestens 3) müssen überprüft werden, um gültig zu sein. Ich möchte nicht, dass das Textfeld eine Validierung verlangt, da es nur ein Beobachtungsfeld ist.

Wenn mir jemand helfen könnte, würde ich es sehr schätzen, Danke im Voraus.

body, html { 
 
    margin:0; 
 
    font:1em "Glegoo", slab-serif; 
 
    background-color:#000; 
 
} 
 

 
h1 { 
 
    color:#fff; 
 
    text-align:center; 
 
} 
 

 
h2 { 
 
    color:#fff; 
 
} 
 
h3 { 
 
    color:#fff; 
 
} 
 

 
h4 { 
 
    color:#fff; 
 
} 
 

 
legend { 
 
    color:#fff; 
 
} 
 

 
fieldset{ 
 
    margin-left:150px; 
 
    margin-right:150px; 
 
    color:#fff; 
 
} 
 

 
.restodoformulario { 
 
    margin-left:164px; 
 
    margin-right:150px; 
 
    color:#fff; 
 
} 
 

 
.domo p{ 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%) \t 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
      <title>musicUS</title> 
 
\t \t \t 
 
      <link rel="stylesheet" href="form-main.css"> 
 
      <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Glegoo"> 
 
      <link rel="icon" href="backuplogo.png"> 
 
\t \t \t 
 
<script language="javascript"> 
 
    function dgi(el) 
 
    { 
 
     return document.getElementById(el); 
 
    } 
 
    var aYear = 100; 
 
    window.onload = function() 
 
    { 
 
     var y = dgi('year'); 
 
     var d = new Date(); 
 
     var _y = d.getFullYear(); 
 

 
     var _o = document.createElement('option'); 
 
     _o.setAttribute('value', 0); 
 
     _o.innerHTML = 'Ano'; 
 
     y.appendChild(_o); 
 

 
     for(var i = 0; i < aYear; i++) 
 
     { 
 
      var o = document.createElement('option'); 
 
      o.setAttribute('value', _y); 
 
      o.innerHTML = _y; 
 
      y.appendChild(o); 
 
      _y--; 
 
     } 
 
    } 
 
    function loadMonths(obj) 
 
    { 
 
     if(obj.value != '0') 
 
     { 
 
      dgi('months').style.display = ''; 
 
     } 
 
     else 
 
     { 
 
      dgi('months').style.display = 'none'; 
 
     } 
 
    } 
 
    function loadDays(obj) 
 
    { 
 
     var days = dgi('days'); 
 
        
 
     if(obj.value != '0') 
 
     { 
 
      clearDays(); 
 
      var number = 32 - new Date(parseInt(dgi('year').value), parseInt(dgi('months').value)-1, 32).getDate(); 
 
        
 
      for(var i = 1; i <= number; i++) 
 
      { 
 
       var o = document.createElement('option'); 
 
       o.setAttribute('value', i); 
 
       o.innerHTML = i; 
 
       days.appendChild(o); 
 
      } 
 
      days.style.display = ''; 
 
     } 
 
     else 
 
     { 
 
      clearDays(); 
 
      hideDays(); 
 
     } 
 
    } 
 
    function clearDays() 
 
    { 
 
     var days = dgi('days'); 
 
     days.innerHTML = '';     
 
    } 
 

 
    function hideDays() 
 
    { 
 
     var days = dgi('days'); 
 
     days.style.display = 'none'; 
 
    } 
 

 
</script> 
 
<script type="text/javascript"> 
 
    function outrofestival(val){ 
 
     var element=document.getElementById('festival'); 
 
     if(val=='Escolhe um festival'||val=='outro') 
 
      element.style.display='block'; 
 
     else 
 
      element.style.display='none'; 
 
    } 
 
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> 
 
</script> 
 
<script> 
 
    jQuery(function(){ 
 
     var max = 3; 
 
     var checkboxes = $('input[type="checkbox"]'); 
 

 
     checkboxes.change(function(){ 
 
      var current = checkboxes.filter(':checked').length; 
 
      checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
 
     }); 
 
    }); 
 
</script> 
 
<script> 
 
    function redirect() { 
 
     window.location.replace("obrigado.html"); 
 
     return false; 
 
     if(document.getElementById('nome').value=="") { 
 
      alert ('Por favor preenche o teu nome.'); 
 
      return false; 
 
     } else if(document.getElementById('local').value=="") { 
 
      alert ('Por favor preenche a tua localidade.'); 
 
      return false; 
 
     } else if(document.getElementById('email').value=="") { 
 
      alert ('Por favor preenche o teu e-mail.'); 
 
      return false; 
 
     } 
 
    } 
 
</script> 
 
\t \t 
 
</head> 
 
<body> 
 
    <h1> 
 
     <p>Diz-nos a que festival é que vais este verão!</p> 
 
    </h1> 
 
    <form method="post" id="formfest" action="#" onSubmit="return redirect()" > 
 
     <fieldset> 
 

 
     <legend><b>Sobre ti</b></legend> 
 
      Nome Completo: 
 
       <input type="text" size="30" maxlength="60" name="nome" required> 
 
       <br> 
 
      Sexo: 
 
       <br> 
 
       <input type="radio" name="sexo" value="feminino">Feminino 
 
       &nbsp; 
 
       <br> 
 
       <input type="radio" name="sexo" value="masculino">Masculino 
 
       &nbsp; 
 
       <br> 
 
       <input type="radio" name="sexo" value="naodefinido">Não definido 
 
       <br> 
 
      Data de Nascimento: 
 
       <select id="year" onchange="loadMonths(this);"></select> 
 
       <select id="months" style="display: none;" onchange="loadDays(this);"> 
 
        <option value="0">Mês</option> 
 
        <option value="1">Janeiro</option> 
 
        <option value="2">Fevereiro</option> 
 
        <option value="3">Março</option> 
 
        <option value="4">Abril</option> 
 
        <option value="5">Maio</option> 
 
        <option value="6">Junho</option> 
 
        <option value="7">Julho</option> 
 
        <option value="8">Agosto</option> 
 
        <option value="9">Setembro</option> 
 
        <option value="10">Outubro</option> 
 
        <option value="11">Novembro</option> 
 
        <option value="12">Dezembro</option> 
 
       </select> 
 
       <select id="days" style="display: none;"></select> 
 
       <br> 
 
      Localidade: 
 
       <input type="text" size="36" maxlength="60" name="local"> 
 
       <br> 
 
      E-mail: 
 
       <input type="text" size="41" maxlength="40" name="email"> 
 
       <p></p> 
 
     </fieldset> 
 

 
      <div class="restodoformulario"> 
 
      <p><b>Sobre os festivais</b></p> 
 
      <p>Qual o festival que desperta mais o teu interesse para ires este verão?</p> 
 
      <select name="festival" onchange='outrofestival(this.value);'> 
 
       <option>Escolhe um festival</option> 
 
       <option value="alive">NOS Alive</option> 
 
       <option value="sbsr">Super Bock Super Rock</option> 
 
       <option value="pdc">Vodafone Paredes de Coura</option> 
 
       <option value="msw">MEO Sudoeste</option> 
 
       <option value="edp">EDP CoolJazz</option> 
 
       <option value="nps">NOS Primavera Sound</option> 
 
       <option value="outro">Outro</option> 
 
      </select> 
 
      <p><input type="text" name="festival" id="festival" size="32" maxlength="60" style='display:none;'/></p> 
 
      <p>Selecciona dos tópicos abaixo, os 3 aspectos mais apelativos de um festival</p> 
 
      <input type="checkbox" name="aspectos" value="cartaz">Cartaz 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="campismo">Campismo 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="preço">Preço 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="acessos">Facilidades de acesso 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="ambiente">Ambiente 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="idade">Faixa etária do público 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="localização">Localização 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="segurança">Segurança 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="dimensão">Dimensão do festival 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="variedade">Variedade de conteúdos musicais 
 
      &nbsp; 
 
      <br> 
 
      <input type="checkbox" name="aspectos" value="actividades">Actividades no festival 
 
      &nbsp; 
 
      <br> 
 
      <p>Com quantas pessoas vais ao festival que escolheste?</p> 
 
      <select size="3" style="height:100px;"> 
 
       <option>Vou sozinho.</option> 
 
       <option>Com um amigo.</option> 
 
       <option>Com 2 amigos.</option> 
 
       <option>Com 3 amigos.</option> 
 
       <option>Com 4 amigos.</option> 
 
       <option>Com 5 amigos.</option> 
 
       <option>Com 6 amigos.</option> 
 
       <option>Com 7 amigos.</option> 
 
       <option>Com 8 amigos.</option> 
 
       <option>Vou trazer o acampamento.</option> 
 
      </select> 
 
      <br> 
 
      <p>Porque recomendarias o festival que escolheste?</p> 
 
      <textarea rows="8" cols="50" name="observacoes" style="text-indent: 3px"> 
 
      </textarea> 
 
      <br> 
 
      <a href="home.html"><input type="submit" name="enviar" value="Tá feito." ></a> 
 
      <input type="reset" value="Limpar respostas."> 
 
      <br><br><br> 
 
     </div> 
 
    </form> 
 
    </body> 
 
</html>

Quelle

2016-05-28 João Carlos Novo

Ur-Code wird nie Formular einreichen, für Redirect-Funktion immer false.redirect wird vor dem tatsächlichen Senden aufgerufen werden. –

entfernen onSubmit="" von <form> und dann abfangen die mit jQuery einreichen:

$("#myform").on("submit", function() { 
    validate(); 

    if(is_good) { 
    redirect(); 
    } 
    return false; 
});

Sie können dann so viele Funktionen ausführen, wie Sie benötigen.
Hier ist eine einfache Demo: https://jsfiddle.net/johnniebenson/c2n4gwjj/

Quelle

2016-05-28 02:54:34 johnniebenson

So verwenden Sie mehrere Funktionen auf onsubmit-Schaltfläche

Antwort

Verwandte Themen