0
votes

Comment empêcher le chargement de la page lors de l'appel d'une fonction lors de la soumission d'un formulaire?

J'ai écrit une fonction que je peux réutiliser dans différentes pages pour rechercher des images. et je ne veux pas que la page soit actualisée lorsque vous appuyez sur Entrée.

Sans formulaire, cela fonctionne bien sur l'événement onclick.

Comment puis-je empêcher le rechargement de la page?

est le formulaire ci-dessous, Merci.

function searchImages()
{
    let keyword = jQuery("#image_keyword").val();
    let response = searchMedia('image',keyword);
    console.log(response);
    if(response.status === 'success')
    {
        // some code...
    }
}

Fonction JQuery.

<form method="post" action="#">
   <div class="input-group form-sm form-2 pl-0 m-b-20">
      <input class="form-control " id="image_keyword" type="text" >
      <div class="input-group-append">
         <button type="submit" class="input-group-text" onsubmit="searchImages()">search</button>
      </div>
   </div>
</form>

javascript jquery

0 commentaires

5 Réponses :

2
votes

Vous devez empêcher le comportement par défaut de l'événement onsubmit .

function searchImages(e)
{
    e.preventDefault();
    let keyword = jQuery("#image_keyword").val();
    let response = searchMedia('image',keyword);
    console.log(response);
    if(response.status === 'success')
    {
        let data = response.data;
        console.log(data);
    }
}

1 commentaires

voulez-vous dire comment e sera transmis à searchImages

0
votes

Si vous souhaitez restreindre le rechargement de la page: utilisation : event.preventDefault ();

0 commentaires

0
votes

Utilisez la fonction onsubmit dans la balise form au lieu du bouton submit Et passez le paramètre d'événement. )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" id="form_one">
  <div class="input-group form-sm form-2 pl-0 m-b-20">
    <input class="form-control " id="image_keyword" type="text">
    <div class="input-group-append">
      <button type="submit" class="input-group-text" >search</button>
    </div>
  </div>
</form>

$('#form_one').on('submit',function(e){
 e.preventDefault();
  console.log('ok')
})

Pour une approche Jquery simple .Définissez la soumission avec in dom

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" onsubmit="searchImages(event)">
  <div class="input-group form-sm form-2 pl-0 m-b-20">
    <input class="form-control " id="image_keyword" type="text">
    <div class="input-group-append">
      <button type="submit" class="input-group-text" >search</button>
    </div>
  </div>
</form>

function searchImages(e) {
 e.preventDefault();
  console.log('ok')
}

0 commentaires

1
votes

Vous devez utiliser e.preventDefault () et addEventListener

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" onsubmit="searchImages(event)">
   <div class="input-group form-sm form-2 pl-0 m-b-20">
      <input class="form-control " id="image_keyword" type="text" >
      <div class="input-group-append">
         <button type="submit" class="input-group-text" >search</button>
      </div>
   </div>
</form>

function searchImages(e)
{
    e = e || window.event 
    e.preventDefault();
    let keyword = jQuery("#image_keyword").val();
    let response = searchMedia('image',keyword);
    console.log(response);
    if(response.status === 'success')
    {
        
    }
}

3 commentaires

Merci, mais je veux utiliser ma propre fonction

Merci, cela a fonctionné, mais y a-t-il un autre moyen de faire de même sans utiliser document.querySelector?

@Javed Saifi Ok ne fonctionne pas avec querySelecotor () . Acceptez la réponse si cela a fonctionné

0
votes

Modifiez cette ligne:

Pas besoin de faire autre chose.

0 commentaires