can't get value from input fields in bootstrap modal on a jquery post call

Question

I was trying to get the value of a couple of fields in a bootstrap modal and then have them sent via $.post call to a php script that sends an email and responds true if the email has been correctly sent or false otherwise.

I can't get those values...fields are always sent empty (or with the default value in case of a "select". I do not understand why. I ahve also tried to have the fields and the $.post call instantiated on modal show (sho.bs.modal), but nothing changes.

Here is my code...any hint?

HTML

SELECTOR

<select name="stato" data-recordid="1469" data-recordcustomername="John Snow" data-recordcustomerid="416" data-recordmailuser="info@ccustmeremail.com" class="statuschanger form-control" required="">
    <option value="">Choose...</option>
    <option value="1">Working on</option>
    <option value="2">Ready</option>
    <option value="3" selected="">Shipped with courier</option>
    <option value="4">Delivered</option>
</select>

MODAL

    <div class="modal fade" id="modaleSent" tabindex="10" role="dialog" data-focus-on="input:first" style="display: none;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Invio messaggio di Tracking</h3>
                </div>
                <div class="modal-body">    
                    <div id="modaleSentContent">    
                        <div id="nomeCliente" class="blocchiModale"></div>
                        <div id="emailCliente" class="blocchiModale"></div>
                        <div id="ordineCliente" class="blocchiModale"></div>
                        <div id="formTracking" class="blocchiModale">
                            <form id="sendtrack">
                                <div class="form-group">
                                    <label for="track">Tracking number:</label>
                                    <input type="text" class="form-control" id="track" name="track">
                                </div>
                                <div class="form-group">
                                    <label for="corrieri">Choose courier:</label>
                                    <select class="form-control" id="corrieri" name="corrieri">
                                        <option value="brt">BRT</option>
                                        <option value="dhl">DHL</option>
                                        <option value="sda">SDA</option>
                                        <option value="tnt">TNT</option>
                                        <option value="ups">UPS</option>

                                    </select>
                                </div>
                                <input type="hidden" value="" name="cliente" id="hcliente">
                                <input type="hidden" value="" name="ordine" id="hordine">
                                <input type="hidden" value="" name="emailcliente" id="hemailcliente">
                                <button type="submit" class="btn btn-default" id="sendtrackbtn">Invia ora</button>
                            </form>                                 
                        </div>

                        <div id="sentmsg" class="blocchiModale"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info iscriviti" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

JS

                $('#tblOrders').on('change', '.statuschanger', function(){

                var record = $(this).attr('data-recordid');
                var cliente = $(this).attr('data-recordcustomername');
                var email = $(this).attr('data-recordmailuser');
                var clienteid = $(this).attr('data-recordcustomerid');
                var ostatus = $(this).val();
                var cella = $(this).parent().parent();

                console.log('Updated record: '+record);

                $.post(
                "order_status.php",
                {
                    id:record,
                    stato:ostatus
                },
                function(data,status)
                {
                    if(data)
                    {   
                        console.log(data);
                        if(data.esito == 1)
                        {
                            // $("#msgcontainer").html('<div class="alert alert-success">Operazione correttamente eseguita!</div><hr>');

                            console.log('Record aggiornato corretamente! ID: '+record);

                            var originalcolor = cella.css("background");
                            cella.css("background", "#449D44");
                            setTimeout(function(){
                                cella.css("background", originalcolor);
                            }, 1000);
                            //console.log(cella.attr('class'));


                            if(ostatus == 3)
                            {
                                console.log('dovrebbe aprire una modale');

                                $("#modaleSentContent").find("#nomeCliente").html('<strong>Cliente</strong>: '+cliente);
                                $("#modaleSentContent").find("#hcliente").val(cliente);
                                $("#modaleSentContent").find("#emailCliente").html('<strong>Email</strong>: '+email);
                                $("#modaleSentContent").find("#hemailcliente").val(email);
                                $("#modaleSentContent").find("#ordineCliente").html('<strong>Ordine</strong>: '+record);
                                $("#modaleSentContent").find("#hordine").val(record);

                                $("#modaleSentContent").find("#sentmsg").html();
                                //$('#modaleSent').modal('show');


                                $('#modaleSent').on("shown.bs.modal", function (e) {

                                var trackno = $("#modaleSent #track").val().trim();
                                var courier = $("#modaleSent #corrieri").val();




                                $("#sendtrackbtn").on('click',function(e){
                                    e.preventDefault();

                                    $.post(
                                    "send_track.php",
                                    {
                                        oemail:email,
                                        oname:cliente,
                                        orecord:record,
                                        ocourier:courier,
                                        oclienteid:clienteid,
                                        otrack:trackno
                                    },
                                    function(data,status)
                                    {
                                        if(data.esito !== false)
                                        {
                                            $("#modaleSentContent").find("#sentmsg").html('Messaggio inviato correttamente');
                                        }
                                        else{
                                            $("#modaleSentContent").find("#sentmsg").html('Si è verificato un problema con l\'invio');
                                        }

                                        //$("#modaleSentContent").find("#sentmsg").html(data.msg);
                                    },
                                    "json");

                                });

                                }).modal();

                            }
                        }
                        else 
                        {
                            $("#msgcontainer").html('<div class="alert alert-danger">Operazione non eseguita!</div><hr>');
                            alert('Record NON aggiornato. ID: '+record);

                        }
                    }
                },
                "json");

            });     

I have prepared a fiddle, even though the $.post calls to the php files have been changed to the echo/json/ path shown on Jsfiddle documentation.

Here is the link

Thank you

Answer 1

It looks like you have missed to add id in your table id="tblOrders" . So add id for your table and try. Here is the working jsfiddle .

UPDATE:

You are assigning values for trackno and courier on modal shown itself. This means after modal shown values remains empty before clicking modal submit button.

So to get updated value assign your courier and trackno number values inside $("#sendtrackbtn").on('click',function(e){}); like below

 $('#modaleSent').on("shown.bs.modal", function (e) {
    $("#sendtrackbtn").on('click',function(e){
        e.preventDefault();
        var trackno = $("#modaleSent #track").val().trim();
        var courier = $("#modaleSent #corrieri").val();
        $.post("/echo/json/", {
            oemail:email,
            oname:cliente,
            orecord:record,
            ocourier:courier,
            oclienteid:clienteid,
            otrack:trackno
        },
        function(data,status)
        {
            if(data.esito !== false)
            {
                $("#modaleSentContent").find("#sentmsg").html('Messaggio inviato correttamente');
            }
            else{
                $("#modaleSentContent").find("#sentmsg").html('Si è verificato un problema con l\'invio');
            }

            //$("#modaleSentContent").find("#sentmsg").html(data.msg);
        }, "json");
    });
}).modal('show');

Here is the updated working jsfiddle . Hope this will helps you!