How to pass user input data in jquery/ script? i am using codeigniter php framework

Question

I am making a system that search only ONE data (tracking_no) if tracking_no exist show tracking number details but if not run form validation show error. but my problem is how can i pass the input of the user to jquery/script like if the user input a tracking_no == "123-123-ABC" and if success

window.location.href= baseurl()/index.php/main/show_tracking_details/"123-123-ABC";

(see MYSCRIPT line 16)

Input using modal:

<div class="header-line"></div>
<div class="modal fade" id="modal_form_tracking" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="titolo">
            <h3 class="titolo" style="margin-top: 35px; color:orange;">Search Delivery<br>by Tracking No.</h3>
        </div>
        <div class="modal-body form">
            <form action="#" id="form_tracking" class="form-horizontal">
                <div class="form-body"><br><br>
                    <div class="form-group">
                        <label class="control-label col-md-3">Tracking No.</label>
                        <div class="col-md-9">
                            <input name="tracking_no" placeholder="Enter Tracking no." class="form-control" type="text">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        </div>
        <div class="modal-footer">
            <button type="button" id="btnTracking" onclick="search_tracking()" class="btn btn-primary"
            style="background-color: orange; border-color: orange;">Submit</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal"
            style="background-color: gray; border-color: gray;">Cancel</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

MYSCRIPT

function search_tracking()
{
$('#btnTracking').text('Searching...'); //change button text
$('#btnTracking').attr('disabled',true); //set button disable 
var url = "<?php echo base_url('index.php/main/customer_delivery_details')?>";
$.ajax({
    url : url,
    type: "POST",
    data: $('#form_tracking').serialize(),
    dataType: "JSON",
    success: function(data)
    {
        if(data.status) //if success close modal and reload ajax table
        {
            $('#modal_form_tracking').modal('hide');
            window.location.href= "<?php echo base_url('index.php/main/show_tracking_details')?>"
            alert("Track number exist ");
        }
        else
        {
            for (var i = 0; i < data.inputerror.length; i++) 
            {
                $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
            }
        }
        $('#btnTracking').text('Search'); //change button text
        $('#btnTracking').attr('disabled',false); //set button enable 


    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error searching data.');
        $('#btnTracking').text('Search'); //change button text
        $('#btnTracking').attr('disabled',false); //set button enable 

    }
});
}

mycontroller.php

public function customer_delivery_details(){
    $this->_validate_trackingno();
    $data = $this->input->post('tracking_no');
    $this->model_main->find_by_tracking_no($data);
    echo json_encode(array("status" => TRUE));
}

private function _validate_trackingno()
{
    $data = array();
    $data['error_string'] = array();
    $data['inputerror'] = array();
    $data['status'] = TRUE;
    $isTrackingExist = $this->model_main->isTrackingExist();

    if($isTrackingExist)
    {
        $data['inputerror'][] = 'tracking_no';
        $data['error_string'][] = 'Enter a valid tracking number.';
        $data['status'] = FALSE;
    }

    if($this->input->post('tracking_no') == '')
    {
        $data['inputerror'][] = 'tracking_no';
        $data['error_string'][] = 'Input tracking no.';
        $data['status'] = FALSE;
    }

    if($data['status'] == FALSE)
    {
        echo json_encode($data);
        exit();
    }
}

Answer 1

Just get the value from your input field and add to url

Like this

  if(data.status) //if success close modal and reload ajax table
    {
        tracking_no = $('input[name="tracking_no"]').val();
        $('#modal_form_tracking').modal('hide');
        window.location.href= "<?php echo base_url('index.php/main/show_tracking_details')?>"+"/"+tracking_no;
        alert("Track number exist ");
    }

Answer 2

There are a lot of options to do this here. One of which is having a submit button that calls a function that will determine if search tracking is set or now.

button type="button" id="btnTracking" onclick="search_tracking()" class="btn btn-primary"

This is correct so now you are able to access the field

<input name="tracking_no" placeholder="Enter Tracking no." class="form-control" type="text">

In Javascript via

$trackingno = $('#tracking_no').val();

Now pass this value to PHP using Ajax like you are. In your PHP, assert if the trackingno is valid. If it is return a json of the details that you want to return from the server. If it isn't then send back the validation details.

A simple

if(!empty($_POST))

should be enough to validate whether or not the tracking number is set since you only have one field, It will be null otherwise.