submit button is not working in simple html form

My Submit Button in HTML/CSS/JS is not working. Here I attached HTML code However, I tested my flask server in postman but in simple HTML form submit button is not working! is it something that is I missed in HTML or in JS ? Please help me with this problem.

<!DOCTYPE html>
    <html>
    <head>
        <title>Banglore Home Price Prediction</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="app.js"></script>
        <link rel="stylesheet" href="app.css">
    </head>
    <body>
    <div ></div>
    <form >
        <h2>Area (Square Feet)</h2>
        <input   type="text" id="uiSqft"  name="Squareft" value="1000">
        <h2>BHK</h2>
        <div >
            <input type="radio" id="radio-bhk-1" name="uiBHK" value="1"/>
            <label for="radio-bhk-1">1</label>
            <input type="radio" id="radio-bhk-2" name="uiBHK" value="2" checked/>
            <label for="radio-bhk-2">2</label>
            <input type="radio" id="radio-bhk-3" name="uiBHK" value="3"/>
            <label for="radio-bhk-3">3</label>
            <input type="radio" id="radio-bhk-4" name="uiBHK" value="4"/>
            <label for="radio-bhk-4">4</label>
            <input type="radio" id="radio-bhk-5" name="uiBHK" value="5"/>
            <label for="radio-bhk-5">5</label>
        </div>
    </form>
    <form >
        <h2>Bath</h2>
        <div >
            <input type="radio" id="radio-bath-1" name="uiBathrooms" value="1"/>
            <label for="radio-bath-1">1</label>
            <input type="radio" id="radio-bath-2" name="uiBathrooms" value="2" checked/>
            <label for="radio-bath-2">2</label>
            <input type="radio" id="radio-bath-3" name="uiBathrooms" value="3"/>
            <label for="radio-bath-3">3</label>
            <input type="radio" id="radio-bath-4" name="uiBathrooms" value="4"/>
            <label for="radio-bath-4">4</label>
            <input type="radio" id="radio-bath-5" name="uiBathrooms" value="5"/>
            <label for="radio-bath-5">5</label>
        </div>
            <h2>Location</h2>
        <div>
      <select  name="" id="uiLocations">
        <option value="" disabled="disabled" selected="selected">Choose a Location</option>
            <option>Electronic City</option>
            <option>Rajaji Nagar</option>
      </select>
    </div>
        <button  onclick="onClickedEstimatePrice()" type="button">Estimate Price</button>
        <div 
            id="uiEstimatedPrice" >   <h2></h2> 
        </div>
    </body>
    </html>

CodePudding user response：

you need to add action and method to your form tag like:

<form  method="get" action="/your_url/">
....
</form>

CodePudding user response：

If you want to you the default handling of form submitting, you would need to add the method (check your postman call to see the method) and action (the URL you used to test the call in postman) attributes to your form, as well as changing the type of button to submit rather than button.

But since you passed on onclick handler to your button, I assume you want to do a custom submit handler. Your best bet is to add an onsubmit handler to your form and do the logic there. No need for method and action here.

<form  onsubmit="onFormSubmit(event)">
...
function onFormSubmit(event) {
    event.preventDefault(); // disable default behavior of submitting
    // access form element values
    // replace elementName with the actual value of the "name" attribute
    // remember to assign unique names to the elements
    console.log(event.target.elements.[elementName].value);
}