Bdtjtk

I am running a simple Embedded web-server where a form needs to be filled and the data can be submitted in 3 different ways for a Truck weighing operation. As i am having 3 different buttons to submit the data through an ajax call to a lua webserver i don't want the form gets submitted in default way.

<form id="formTruck" class="form-group">

   <label class="form-label" for="reg-num">Rego:</label>

   <input class="form-input" type="text" id="rego">       

   <label class="form-label" for="product">Product:</label>

   <input class="form-input" type="text" id="product">

   <label class="form-label" for="valuePT">Preset Tare</label>

   <input class="form-input" type="text" id="valuePT">

   <input id="dump-submit" style="display:none" value="Submit_Dump" type="submit"> 

   </form>

<div id="weighInOutGroup">

    <button id="weighIn" onclick="weigh(this.id);">WEIGH IN</button>

    <button id="weighOut" onclick="weigh(this.id);">WEIGH OUT</button>

    <button id="weighInPt" onclick="weigh(this.id);">WEIGH IN (PT)</button>             

</div>

I have JS function to do the ajax request depends on the button clicked

function weigh(type) {

    var weighData = {};     

    if (type == "weighIn") {            

        $.ajax({

            //ajax request

        },

    });         

    } else if (type == "weighInPt") {           

        //ajax request

    } else if (type == "weighOut") {

        //ajax

    }

};

Also i have used following jquery function to prevent pressing enter navigating to default action

$("#formTruck").submit(function(e){     

    e.preventDefault();

    console.log("weighIn submit prevented")

});

but by doing this i couldn't get the recent inputs prompted on text input fields, as the form is not actually submitted in default action.

Can anyone suggest me a way to achieve this without doing any posts or navigating to any pages?

i don't understand why you use 3 send buttons, use instead a radio buttons, in the jquery submit add your if's and for catch the form data use $("#formTruck").serialize()

$("#formTruck").submit(function(e){     



    console.log("weighIn submit prevented");



    let data = $("#formTruck").serialize() ;



    if ($("#rdWeighIn").prop("checked")) {

        $.ajax({ data: data, ...

    } else if ($("#rdWeighOut").prop("checked")) {

        $.ajax({ data: data, ...

    } else if ($("#rdWeighInPt").prop("checked")) {

        $.ajax({ data: data, ...

    } else {

    // 

    }

return false;

});