Question

I’ve done a website in which the user needs to click on a button after he fills a textbox. When he presses the image changes (it is like a slidshow on command). My problem is that when you touch “enter” instead of clicking with mouse, it doesn’t make the fade effect.

The website is this, so that you can try: http://www.tuttoscorre.net/esame-storia-arte-moderna.php

How con I handle this?

The purpose of the website is to store in a javascript array the answer written in the textbox to show it at the end of the slideshow (10 slides).

Here is the code of the button and of the slideshow:

    <script type="text/javascript">
        //Dichiaro Array Globale
        var risposte = new Array();
        var count = 0;
        $('.risultati').css({opacity: 0.0});

        //Salvo risposta, svuoto text, proseguo con le slide
        function conferma(frm) {
            if (frm.nome.value == "") alert("Non hai scritto nulla!");
            else {
                risposte[count] = frm.nome.value;
                count = count + 1;
                frm.nome.value = "";
                prossima();
            }
        }

        //Nuova slide sempre verso dx
        function prossima(frm) {
            var $active = $('#slideshow img.active');

            if (!$active.next('img').length) {
                risultati();
            } else {
                var $next = $active.next(); 

                $next.css({opacity: 0.0})
                    .addClass('active')
                    .animate({opacity: 1.0}, 1000, function() {
                        $active.removeClass('active');
                    });
            }

        }

        //Tolgo slide e mostro risultati
        function risultati() {
            $('#slideshow').animate({opacity: 0.0}, 1000);
            $('#compila').animate({opacity: 0.0}, 1000);
            $('#risultati').animate({opacity: 1.0}, 1000, function() {
                $('#risultati').addClass('visibile');
            });

            $('#1').append(risposte[0] + "<br/>Risposa corretta: " + "<?php echo $soluzioni[0]; ?>");
            $('#2').append(risposte[1]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[1]; ?>");
            $('#3').append(risposte[2]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[2]; ?>");
            $('#4').append(risposte[3]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[3]; ?>");
            $('#5').append(risposte[4]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[4]; ?>");
            $('#6').append(risposte[5]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[5]; ?>");
            $('#7').append(risposte[6]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[6]; ?>");
            $('#8').append(risposte[7]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[7]; ?>");
            $('#9').append(risposte[8]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[8]; ?>");
            $('#10').append(risposte[9]+ "<br/>Risposa corretta: " + "<?php echo $soluzioni[9]; ?>");
        }

    </script>

And this is the form with the button:

        <form id="compila">
                <input id="enterTxt" class="okText" type="text" name="nome" />
                <input id="enterButt" class="okIcon" type="Button" value="ok" onClick="conferma(this.form)">
            </form>

Thanks a lot.

Answer 1

You must use .preventDefault() on event in your function which send form.

Documentation

Or use just:

$("#compila").submit(function() {
    conferma(this);
    return false;
});

My answer use JQuery.