javascript - Onchange submit of a form with ajax and without the form id -

javascript - Onchange submit of a form with ajax and without the form id -

my page composed of table in each cell form. want forms submit when alter value of input (onchange) don't want whole page refresh when it.

for example, want user able come in value in 1 cell , tab next cell whithout losing focus when first form (the first cell filled) submitted.

i have read quite few pages on web this, none fit needs since have 1 more constraint. forms table made of, generated via django have same id. can't utilize id select form within (java)script.

i have been trying utilize this.form or event.form or $(this).form no avail.

here forms :

<form action="" method="post" id="progress_form"> {% csrf_token %} <input type="number" id="percent_cell" name="percentdone" min="0" max="100" onchange="progresschange(event)" placeholder={{ d|prog:task.id }}>%&nbsp; <input type="hidden" id="percent_cell2" name="task" value={{ task.id }}> <input type="hidden" id="percent_cell3" name="date" value={{ d|date:"d/m/y" }}> <input type="hidden" id="percent_cell4" name="update_progress" value=true> <input type="hidden" id="percent_cell5" name="tab" value="track"> </form>

and here script looks :

function progresschange(e) { var form = e.form; var datastring = form.serialize(); alert(datastring); $.ajax({ type: "post", url: $(form).attr( 'action' ), data: datastring, success: function() { alert("prout"); }, }); }

change same id's several fields , pass object function progresschange()

<form action="" method="post" id="progress_form"> {% csrf_token %} <input type="number" id="percent_cell0" name="percentdone" min="0" max="100" onchange="progresschange(this)" placeholder={{ d|prog:task.id }}>%&nbsp; <input type="hidden" id="percent_cell1" name="task" value={{ task.id }}> <input type="hidden" id="percent_cell2" name="date" value={{ d|date:"d/m/y" }}> <input type="hidden" id="percent_cell3" name="update_progress" value=true> <input type="hidden" id="percent_cell4" name="tab" value="track"> </form>

get current object parent element i.e. form , serialize it:

function progresschange(obj) { var $form = $(obj).closest('form'); // or var form = obj.from; var datastring = $form.serialize(); alert(datastring); $.ajax({ type: "post", url: $(form).attr( 'action' ), data: datastring, success: function() { alert("prout"); }, }); }

javascript jquery ajax django forms