Ajax Php non eseguire se il campo input e vuoto

[blackskyisback]

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?

<!-- 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>

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

[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:

$("#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!

[blackskyisback]

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:

$("#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)

	<!-- 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

[dreadnaut]

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.

[blackskyisback]

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

[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

[blackskyisback]

o trovato questo, funziona, abbinato con css e div

<script>

    $body = $("body");

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

grazie a tutti

[blackskyisback]

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

o forse no


codice completo

<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>

[blackskyisback]

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

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

[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() {).

[blackskyisback]

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?

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

<script>

    $body = $("body");

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

<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>

<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>