Passing a date parameter from HTML to Javascript function that uses AJAX

Question

The function I'm trying to build will get a date that is selected by the user (using a Bootstrap datepicker object). Once the Submit button is clicked, it will call the Javascript function that reads data from a .csv file and builds a table based on the date that the user selected.

Right now everything works, but I can't figure out how to pass the selected date into the function. (I'm still new to HTML/JavaScript)

Here is my HTML:

    <div class="bootstrap-iso">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3 col-sm-2 col-xs-3">

                <!-- Form code begins -->
                <form method="post">
                <div class="form-group"> <!-- Date input -->
                    <label class="control-label" for="date">Select Schedule Date:</label><br>
                    <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/><br>


                <div class="form-group"> <!-- Submit button -->
                    <div class="container">
                        <div class="table-responsive">
                            <div>
                                <input type="button" name="load_data" id="load_data" class="btn btn-info" value="Submit">
                            </div><br>
                            <div id="aspera_val"></div>                    
                        </div>
                    </div>        
                </div>
                </div>
                </form>
                 <!-- Form code ends --> 

                </div>
            </div>    
        </div>
    </div>

And here is the Javascript that I built:

$(document).ready(function(){
$('#load_data').click(function (){
    $.ajax({
        type:"GET",
        url:"aspera_validation.csv",
        datatype:"text",
        success:function(data)
        {
            // new row for each endline 
            var aspera_data=data.split(/\r?\n|\r/);                
            // set table type
            var table_data = '<table class="table table-bordered table-striped table-hover">';                
            for (var count = 0; count < aspera_data.length; count++)
            {
                // new column for each ","
                var cell_data = aspera_data[count].split(",");

                // 
                table_data += '<tr>';
                for (var cell_count = 0; cell_count < cell_data.length; cell_count++)
                {
                    // create header cells for first row
                    if (count === 0)
                    {
                        table_data += '<th>' + cell_data[cell_count] + '</th>';
                    }
                    // cell data for every other row
                    else
                    {    
                            table_data += '<td>' + cell_data[cell_count] + '</td>';
                    }
                }
                table_data += '</tr>';
            }
            table_data += '</table>';
            $('#aspera_val').html(table_data);
        }
    });
});

});

Right now when I click the submit button it simply generates the entire table from the csv file, essentially disregarding the date. I've tried a bunch of different configurations for placing the date parameter but haven't come up with anything that works. Thanks for any help provided!!

Faust · Accepted Answer · 2017-11-02 17:09:42Z

1

The simplest way would be to obtain the value of the date field within your success function. jQuery is good for that ("reaching into the dom").

var myDate = $('[name="date"]').val()

answered Nov 2, 2017 at 17:09

Faust

15.5k10 gold badges58 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Skye MacMaster Over a year ago

Be careful with this approach. Depending on what browser you use and it's support of the date input type, you'll get a string formatted in different ways.

Skye MacMaster · Accepted Answer · 2017-11-02 17:12:01Z

0

From looking at the documentation, https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#getdate, you just need to do this.

var theDate = $("#date").datepicker("getDate");

answered Nov 2, 2017 at 17:12

Skye MacMaster

9341 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

Passing a date parameter from HTML to Javascript function that uses AJAX

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related