Reputation: 453
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
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
Reputation: 26380
Get rid of the <form>
altogether. Its behaviour messes with your code. Just use a <div>
.
Upvotes: 2