Tessnim
Tessnim

Reputation: 453

javascript continue refreshing page after api load

I'm trying to send a request and get answer from my own synonyms api. The api works very well. And the javascript is getting the answer, but it keeps refreshing the page and in the end there's no output in my html. This is my html script:

<form method="POST">
    <input type="text" class="question" />
    <button class="gen-syn">Generate synonyms</button>
    <input type="submit" value="Save"/>
</form>

And this is my javascript:

$(document).on('click','.gen-syn',function(){
 var questionVal = $(".question").val();
 if (questionVal == ''){
    $(".question").focus();
 }
 else {
   $.ajax({
       type :'POST',
       url : "http://192.168.1.9:5000/synonyme_word/"+questionVal,
       success : function(response){
           var divSynonymes = $(document.createElement('div'));
           $(".question").after(divSynonymes);
           for (var a in response){
               $(divSynonymes).append('<h1 class="titre-textareal-question-icona-go " value=>'+a+'</h1>'+
               '<div class="form-group row" >'+
                   '<div class="col-sm-12 listeSyn">'+
                   '</div>'+
               '</div>'
               );
               for (syn in response[a]){
                 var synonyme = response[a][syn]
                 $(".listeSyn").append(
                     '<input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-100" autocomplete="off" />'+
                     '<div class="btn-group">'+
                         '<label for="frm-test-elm-110-100" class="btn btn-primary">'+
                             '<span class="fa fa-check-square-o fa-lg"></span>'+
                             '<span class="fa fa-square-o fa-lg"></span>'+
                             '<span class="content">'+synonyme+'</span>'+
                         '</label>'+
                     '</div>');
               }
           }
       },
    });
    return False;
 }
});

I didn't make any reload, but the navigator keeps reloading after calling the api (when I click on Generate synonyms button)

Upvotes: 0

Views: 701

Answers (2)

Abhinaw Kaushik
Abhinaw Kaushik

Reputation: 627

This should fix your issue.

<input type="text" class="question" />
<button class="gen-syn">Generate synonyms</button>
<input type="submit" value="Save"/>

you need only one button to make a API call and then your JS code is creating dynamic div and other elements to show the synonyms.

Hope this helps.

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26380

Get rid of the <form> altogether. Its behaviour messes with your code. Just use a <div>.

Upvotes: 2

Related Questions