Ajax Php non eseguire se il campo input e vuoto

Come da titolo, sto cercando di evitare di eseguire il codice javascript Ajax e bloccare la query
se l'input della form e' vuoto

sto usando 2 input e 2 submit, come risolvo? :roll:

Codice HTML:

---

<!-- Ajax search engine -->

<form id="myForm2" class="navbar-form navbar-left" onsubmit="return false">
       
                <div>
                    <b>Actor</b>
            <input type="text" id="nome" autofocus style="width: 300px;" placeholder="Inserisci attore in minuscolo o imdbid" name="input_nome" required />
                       
                        <input type="submit" class="button1" id="invia" name="Cerca un nome" value="Cerca Attore"  />
</div>
</form>

<form id="myForm3" class="navbar-form navbar-left" onsubmit="return false">                       
                        <b>Movie</b>
                        <input type="text" id="movie" style="width: 300px;" placeholder="Inserisci titolo, imdbid, regista " name="input_movie" required />
                       
                        <!-- <input type="button" class="button2" id="invia2" onclick="move()" name="Cerca film titolo originale" value="Cerca Movie"/> -->
                       
                        <input type="submit" class="button2" id="invia2"  name="Cerca film titolo originale" value="Cerca Movie"/>
                       
</div>
</form>                       
                       
                       
<form id="myForm4" class="navbar-form navbar-left" onsubmit="return false">       
               
<div>
                       
<input type="button" class="button4" id="btn"  value="Reset" onClick="window.location.reload()">
                       
                </div>
                </form>

---

Codice:

---

<div id="risultato">
               
 
        <script type="text/javascript">
            $("#invia").click(function(){               
                $.ajax({   
                    type: "POST", 
                    url: "results_actor.php",
                    data: "input_nome=" + $("#nome").val(),
                    success: function(response){
                        $("#risultato").html(response);
                    }
                });
            });         
        </script>

       
                <script type="text/javascript">
            $("#invia2").click(function(){               
                $.ajax({   
                    type: "POST", 
                    url: "results_movie.php",
                    data: "input_movie=" + $("#movie").val(),
                    success: function(response){
                        $("#risultato").html(response);
                    }
                });
            });         
        </script>

---

ps: non sapevo dove postare, dato che e' un mix di html, javascript e php(poco)

Prima di eseguire $.ajax metti un bell'if con la condizione che $("#nome").val() (o $("#movie").val()) non siano vuote.
Così su due piedi (ma non ho provato), dovrebbe essere una cosa del tipo:

Codice:

---

$("#invia").click(function(){ 
    if($("#nome").val().length > 0)
    {
                $.ajax({   
                        type: "POST", 
                        url: "results_actor.php",
                        data: "input_nome=" + $("#nome").val(),
                        success: function(response){
                                $("#risultato").html(response);
                        }
                });
    }       
});

---

Stessa cosa per "invia2". Sei sicuro però di inserire quel codice dentro il div <div id="risultato"> ? Perché $("#risultato").html(response); va a sostituire il contenuto di quel div, quindi dovrebbe (credo) eliminarti anche il codice javascript.

Ciao!

Citazione:

---

Originalmente inviato da alemoppo

Prima di eseguire $.ajax metti un bell'if con la condizione che $("#nome").val() (o $("#movie").val()) non siano vuote.
Così su due piedi (ma non ho provato), dovrebbe essere una cosa del tipo:

Codice:

---

$("#invia").click(function(){ 
    if($("#nome").val().length > 0)
    {
                $.ajax({   
                        type: "POST", 
                        url: "results_actor.php",
                        data: "input_nome=" + $("#nome").val(),
                        success: function(response){
                                $("#risultato").html(response);
                        }
                });
    }       
});

---

Stessa cosa per "invia2". Sei sicuro però di inserire quel codice dentro il div <div id="risultato"> ? Perché $("#risultato").html(response); va a sostituire il contenuto di quel div, quindi dovrebbe (credo) eliminarti anche il codice javascript.

Ciao!

---

Ciao alemoppo, grazie per la risposta :=):

ho aggiornato il codice con i reset inviduali, e' strutturato cosi adesso (la formattazione la eseguo dopo) :lol:

Codice HTML:

---

        <!-- Ajax search engine -->
       
        <script>
        jQuery(document).ready(function() {               
                jQuery("#btn1").on('click', function(e)
                {       
          values= $('#fname').val();
            document.getElementById("myForm1").reset();
            $('#fname').attr("placeholder", values);
        });
        });
        </script>

<form id="myForm1" class="navbar-form navbar-left" onsubmit="return false">
       
                <div>
                    <b>Actor</b>
            <input type="text" id="nome" autofocus style="width: 300px;" placeholder="Inserisci attore in minuscolo o imdbid" name="input_nome" required />
                       
                        <input type="submit" class="button1" id="invia" name="Cerca un nome" value="Cerca Attore"  />
                       
                        <input type="button" class="button4" id="btn1"  value="Reset" onClick="window.location.reload()">
</div>
</form>



<script>
        jQuery(document).ready(function() {               
                jQuery("#btn2").on('click', function(e)
                {       
          values= $('#fname').val();
            document.getElementById("myForm2").reset();
            $('#fname').attr("placeholder", values);
        });
        });
        </script>

<form id="myForm2" class="navbar-form navbar-left" onsubmit="return false">                       
                        <b>Movie</b>
                        <input type="text" id="movie" style="width: 300px;" placeholder="Inserisci titolo, imdbid, regista " name="input_movie" required />
                       
                        <!-- <input type="button" class="button2" id="invia2" onclick="move()" name="Cerca film titolo originale" value="Cerca Movie"/> -->
                       
                        <input type="submit" class="button2" id="invia2" name="Cerca un film" value="Cerca Movie"/>
                       
                                <input type="button" class="button4" id="btn2"  value="Reset" onClick="window.location.reload()">
                       
</div>
</form>                       
                       
                       
                </td>
        </tr> 
       
               
               
        </table>
                </div>
               
                <div id="risultato">

---

da qui in poi viene eseguito Ajax, adesso provo il tuo codice

Alternativamente, puoi spostare i tuoi eventi sul <form>, invece che sugli <input type=button>*. Se reagisci all'evento submit, puoi sfruttare la validazione del form per controllare i campi. Al momento hai messo required, ma lo aggiri con il tuo stesso codice.

[*] In questo caso, <button> sarebbe meglio di <input type=button ...>, visto che il loro scopo è inviare i dati del form.

perfetto, funziona :=):

grazie alemoppo

un'altra cosa, quando faccio la richiesta la pagina esegue la ricerca dei dati, e siccome sono prelevati da un database di 4 milioni a volte ci vuole un po di tempo per l'esecuzione, mi chiedevo se e' possibile caricare un loader o countdown che mi avverte del tempo finale

Nemmeno il tuo database o tu conosci il tempo che impiega e quindi se non noto impossibile countdown a limite puoi mostrare un loader https://www.w3schools.com/howto/howto_css_loader.asp e magari effettuare la sotttrazione delle due richieste (quella che riceve i dati) - l'evento del click del tuo input del form
Sebbene il metodo POST supporti una vastità di caratteri è meglio impostare i caratteri codificati nella chiamata Ajax jquery poiché se stringa e.x. a=testo+ciao invece del tuo input attuale a=testo ciao
Un oggetto jquery internamente è memorizzato come array quindi $("form") dopo il caricamento della pagina e dopo il click del tuo utente possiede proprietà $("form")[0].name (dovrebbe leggere la proprietà name, non restituisce valori) e poi usi .serialize di jquery

o trovato questo, funziona, abbinato con css e div :=):

Codice HTML:

---

<script>

    $body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
    ajaxStop: function() { $body.removeClass("loading"); }   
});
 
 </script>

---

grazie a tutti

il codice funziona, ma dopo aver effettuato la richiesta non mi permette di reinviare tramite submit, sembra che ci sia impostato un tempo limite dall'ultima richiesta :roll:

o forse no


codice completo

Codice HTML:

---

<style>
       
        /* Start by setting display:none to make this hidden.
  Then we position it in relation to the viewport window
  with position:fixed. Width, height, top and left speak
  for themselves. Background we set to 80% white with
  our animation centered, and no-repeating */
.modal {
    display:    none;
    position:  fixed;
    z-index:    1000;
    top:        0;
    left:      0;
    height:    100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('FhHRx.gif')
                50% 50%
                no-repeat;
}

/* When the body has the loading class, we turn
  the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden; 
}

/* Anytime the body has the loading class, our
  modal element will be visible */
body.loading .modal {
    display: block;
}
       
</style>
       
       
<div class="modal"><h1>Please Wait, Loading...</h1></div>
       
       
<script>

    $body = $("body");

$(document).on({
    ajaxStart: function() {
        $body.addClass("loading");   
        },
    ajaxStop: function() {
        $body.removeClass("loading");
        }   
});
 
 </script>

---

Citazione:

---

Originalmente inviato da darbula

Nemmeno il tuo database o tu conosci il tempo che impiega e quindi se non noto impossibile countdown a limite puoi mostrare un loader https://www.w3schools.com/howto/howto_css_loader.asp e magari effettuare la sotttrazione delle due richieste (quella che riceve i dati) - l'evento del click del tuo input del form
Sebbene il metodo POST supporti una vastità di caratteri è meglio impostare i caratteri codificati nella chiamata Ajax jquery poiché se stringa e.x. a=testo+ciao invece del tuo input attuale a=testo ciao
Un oggetto jquery internamente è memorizzato come array quindi $("form") dopo il caricamento della pagina e dopo il click del tuo utente possiede proprietà $("form")[0].name (dovrebbe leggere la proprietà name, non restituisce valori) e poi usi .serialize di jquery

---

veramente uso Postgresql, la query e' diversa :=):

Codice PHP:

---

(movies.title @@ plainto_tsquery('%" . $value . "%'))


---

Sto parlando di Javascript Jquery. Se necessiti di terminare il loading prova $body.ajaxStop dentro il tuo evento (il tuo id del submit in Jquery inizia con il simbolo cancelletto $("#invia") o $("invia2") che a sua volta si trova all'interno di jQuery(document).ready(function() {).

Citazione:

---

Originalmente inviato da darbula

Sto parlando di Javascript Jquery. Se necessiti di terminare il loading prova $body.ajaxStop dentro il tuo evento (il tuo id del submit in Jquery inizia con il simbolo cancelletto $("#invia") o $("invia2") che a sua volta si trova all'interno di jQuery(document).ready(function() {).

---

ciao darbula,
in effetti adesso lo script viene caricato in tutta la pagina,

mi potresti fare un esempio in quale parte del codice $("#invia").click(function(){ inserirlo? :roll:

in realta' sono 2, uno per gli attori e l'altro per i film :mrgreen:

Codice HTML:

---

<script>

    $body = $("body");

$(document).on({
    ajaxStart: function() {
        $body.addClass("loading");   
        },
    ajaxStop: function() {
        $body.removeClass("loading");
        }   
});
 
 </script>

---

Codice HTML:

---

<script type="text/javascript">
        $("#invia").click(function(){   
            if($("#nome").val().length > 0)
    {           
                $.ajax({   
                    type: "POST", 
                    url: "results_actor.php",
                    data: "input_nome=" + $("#nome").val(),
                    success: function(response){
                        $("#risultato").html(response);
                    }
                });
        }
            });         
        </script>

---

Codice HTML:

---

<script type="text/javascript">
    $("#invia2").click(function(){ 
            if($("#movie").val().length > 0)
    {                                 
                $.ajax({   
                    type: "POST", 
                    url: "results_movie.php",
                    data: "input_movie=" + $("#movie").val(),
                                        success: function(response){
                        $("#risultato").html(response);
                    }
                });
        }                       
            });         
        </script>

---