ajaxForm(malsup) submitting only csrf_token while ignoring rest of the input fields in the form

StackOverflow https://stackoverflow.com/questions/14775948

  •  07-03-2022
  •  | 
  •  

Question

I am trying to use ajaxForm plugin to submit a form to django web server application.

The problem

On clicking addProductBtn, only the following is sent to the server: csrfmiddlewaretoken=cbREYGKpMgjBDyTvQ5GcB6xYbLZFhHH2

All the other input fields are ignored. What am I missing?

// easy_add_product.js

function getAjaxFormOptions(){
var options = {
        target: '#result',
        beforeSubmit: showRequest,
        success: showResponse,
        dataType: 'json'
};
return options;
}

function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('query string: ' + queryString);
return true;
}

function showResponse(...){...}

$( function() {
  var options = getAjaxFormOptions();
  $('#add-product-form').ajaxForm(options);
} );

easy_add_product.html

<head>
     <script src="http://code.jquery.com/jquery-1.8.3.js" > </script>
     <script src="{{STATIC_URL}}js/plugins/jquery.form.js"></script>
     <script src="{{STATIC_URL}}js/easy_add_product.js"> </script>
  </head>
<form id="add-product-form" method="post" action='/pi/product/add_ajax' enctype="multipart/form-data">
  {% csrf_token %}
  <fieldset id="add-product-fs"> 
  <legend> Product Information </legend>
  <ul>   
<li>
     <label for='name'>Product Name <span class='required'>*</span> </label>
 <input type='text' required title='Product name is required' id='name' />
    </li>
     <li>
<label for='category'> Product Category</label>
    <input type='text' id='category' placeholder='dts_4ch' />
    </li> </ul>
   <input type='submit' id="addProductBtn" class="yui3-button formSubmitBtn"  value="Submit" />
 </form>
Was it helpful?

Solution

inputs must have names to be submitted.

E.g.:

<input type='text' required title='Product name is required' id='name' name="name" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top