jquery to take textbox value and pass to controller action

Question

I have two textbox in form.

when i type some value inside textbox and click the button then i want to echo this value in my function.

I want to take value of my textbox and pass this in my controler function on button click using javascript and ajax.

but my script is not working and not showing any value..

 <script>
    $(document).ready(function() {
        $("#subvessels").on('click', function() {
            var shipment_title = $("#shipment_title").val(); //textbox value 
            var shipment_point = $("#shipment_point").val(); //textbox value  
            if (shipment_point) {
                var dataString = 'shipment_title=' + shipment_title;
                var dataString = 'shipment_point=' + shipment_point;
                var values = $(this).serialize();
                ajaxRequest = $.ajax({
                    url: '<?php echo Router::url(array("controller" => "DispatchedJobs", "action" => "approxBudget")); ?>',
                    type: 'POST',
                    data: dataString,
                    dataType: "html",
                    beforeSend: function() {
                        $('.spinicon').show();
                    },
                    success: function(response) {
                        $("#vessels_table").html(response);
                    },
                    complete: function() {
                        $('.spinicon').hide();
                    }
                });
            }
        });
    });
</script>

//controller function
 public function approxBudget($shipment_point,$shipment_title)
    {
        echo $shipment_title;
        echo $shipment_point; exit();

    }

Answer 1

Give the parameters as an object to data . This is everything you need.

$("#subvessels").on('click', function() {
    ajaxRequest = $.ajax({
        url: '<?php echo Router::url(array("controller" => "DispatchedJobs", "action" => "approxBudget")); ?>',
        type: 'POST',
        data: {
            shipment_title: $("#shipment_title").val(),
            shipment_point: $("#shipment_point").val()
        },
        dataType: "html",
        beforeSend: function() {
            $('.spinicon').show();
        },
        success: function(response) {
            $("#vessels_table").html(response);
        },
        complete: function() {
            $('.spinicon').hide();
        }
    });
});

In php you get the values with $_POST["shipment_title"] and $_POST["shipment_point"] by default. If you use a framework, there could be other ways to access the values. But the request is correct like above.