如何填充此表单数据并用jquery发布

Question

I have a html form as follows:-

<form class="form-horizontal" role="form" method="post" action="" id="scheduler_form">{%csrf_token%}
    <div class="form-group">
        <label for="url" class="col-sm-3 control-label">URL</label>
        <div class="col-sm-6">
            <input type="url" name="url" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="reporttemplate" class="col-sm-3 control-label">SELECT REPORT TEMPLATE</label>
        <div class="col-sm-4">
            <select name="report_template_id" id="report_list_sel" class="form-control" data-placeholder="Choose a Template" required="required"></select>
        </div>
    </div>
    <div class="form-group">
        <label for="frequency" class="col-sm-3 control-label">FREQUENCY</label>
        <div class="col-sm-9">
            <label class="radio-inline" for="inlineRadio1">
                <input type="radio" name="frequency" id="inlineRadio1" value="hourly" checked="checked">Hourly</label>
            <label class="radio-inline">
                <input type="radio" name="frequency" id="inlineRadio2" value="Daily">Daily</label>
            <label class="radio-inline">
                <input type="radio" name="frequency" id="inlineRadio3" value="Weekly">Weekly</label>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-3 control-label">EMAIL</label>
        <div class="col-sm-6">
            <input type="email" name="email" class="form-control">
        </div>
    </div>
    <label for="alerts" class="col-sm-3 control-label" style="padding-right:23px">ALERTS</label>
    <div class="form-group">
        <div class="checkbox col-sm-offset-3" id="alert_list" style="height:100px;overflow-y:auto"></div>
    </div>
    <button type="submit" class="btn btn-warning pull-right" id="create_schedule">CREATE</button>
    <button type="button" class="btn btn-default pull-right closediv" data-dismiss="setup_blk" aria-label="Close">CANCEL</button>
</form>

I have a generic method to make an Ajax call.

function makeAJAXRequest(_uri, _method, _data, _contenttype, _datatype, _context, _processdata, _successHandler, _errorHandler){
  var _jqXHR = $.ajax({
    url: _uri,
    type: _method,
    data: _data,
    contentType: _contenttype,
    dataType: _datatype,
    context: _context,
    processData: _processdata,
    cache: true
  });
  _jqXHR.done( _successHandler );
  _jqXHR.fail( _errorHandler );
}

Now I am binding create_schedule button as follows.

 $('#create_schedule').on('click', function (event) {
     // Call a function createScheduler to build json data for AJAX - POST call and get response.
     createScheduler();
 });

 function createScheduler() {
     var _schedulerData = {};
     $.each($('#scheduler_form'), function () {
         _schedulerData[this.name] = this.value;
         console.log(_schedulerData);
     });

     makeAJAXRequest(
     API_SCHEDULE,
         'post', _schedulerData,
         '',

         'json', {},

     true,
     createUserScheduleSuccessHandler,
     createUserScheduleErrorHandler);

     function createUserScheduleSuccessHandler(_data) {
         console.log(_data);
     }

     function createUserScheduleErrorHandler(jqXHR, textStatus, errorThrown) {
         console.log('Error')
     }

 }

Now I am getting confused as how to populate the form data and make the post request. Any help here.

Answer 1

Change

<button type="submit" class="btn btn-warning pull-right" .... >

To

<button type="button" class="btn btn-warning pull-right" .....>

OR:

you can call the prevenDefault method when button click fired.

event.preventDefault();
console.log( $( '.form-horizontal' ).serialize() );

serializing the form will get all the data from form controls.