I'm trying to submit my form so that when submitted, Jquery will send the submitted data to my API. Unfortunately, when I clicked the submit Button, the page just reloaded and nothing showed. I put console.log inside Jquery .submit but nothing got printed.
My form in Django
<form id="popup-form" method="post">
{% csrf_token %}
<p>
<label class="form-label" for="address">Address</label>
<input type="text" name="address" id="address"/>
</p>
<p>
<label class="form-label" for="latitude">Latitude</label>
<input type="text" name="latitude" id="latitude"/>
</p>
<p>
<label class="form-label" for="longitude">Longitude</label>
<input type="text" name="longitude" id="longitude"/>
</p>
<p>
<label class="form-label" for="direction">Direction</label>
<input type="text" name="direction" id="direction"/>
</p>
<p>
<label class="form-label" for="paper">Paper</label>
<input type="text" name="paper" id="paper"/>
</p>
<!-- Submit button -->
<p>
<input type="submit" value="Submit"/>
</p>
</form>
My submit function
$(document).ready(function(){
$("#popup-form").submit(function(e){
e.preventDefault();
console.log("Submitted!");
var address = $("#address").val();
var latitude = $("#latitude").val();
var longitude = $("#longitude").val();
var direction = $("#direction").val();
var paper = $("#paper").val();
console.log(address);
console.log(latitude);
console.log(longitude);
console.log(direction);
console.log(paper);
axios.get('http://127.0.0.1:8000/api/real-estate/apartment-sale-hanoi-price/predict', {
"latitude": latitude,
"longitude": longitude
})
.then(response => {
predict_price = response.data.predicted_price;
console.log("predicted_price: " + predict_price);
})
.catch(error => console.log(error));
});
});
My API returns a JSON object containing predicted_price, which worked when I tested on Thunder client. I tried putting the submit function inside document.ready and check my submit button with type "submit". I don't know what went wrong on the client side. Could you show me a way to solve this?
