javascript - onsubmit ボタンで複数の機能を使用する方法

Question

ここでの主な問題は、このフォームに、ページにリダイレクトする送信機能が既にあることです。その間、検証を忘れていたので、両方の機能を1つにまとめてみましたが、名前に対してのみ機能しました。

そのため、名前フィールドが有効である必要があり、送信ボタンを押した後に別の html ページにスキップします。ローカルと電子メールはまったく機能しませんでした。

有効にするためには、すべてのフィールドを検証し、ラジオボタン (少なくとも 1 つ) をチェックし、チェックボックス (少なくとも 3 つ) をチェックする必要があります。テキストボックスは単なる観察フィールドであるため、検証を要求したくありません。

誰かが私を助けてくれたら、とても感謝しています。

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%)	
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>musicUS</title>
			
            <link rel="stylesheet" href="form-main.css">
            <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Glegoo">
            <link rel="icon" href="backuplogo.png">
			
<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>
		
</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>

score 0 · Accepted Answer

から削除onSubmit=""してから<form>、jQuery で送信をインターセプトします。

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

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

その後、必要な数の関数を実行できます。
簡単なデモを次に示します: https://jsfiddle.net/johnniebenson/c2n4gwjj/

javascript - onsubmit ボタンで複数の機能を使用する方法

1 に答える 1

Related

Reference