CODEWITHSUNDEEP
javascriptjqueryformsdatatables
Mark Evans
Mark Evans

Reputation: 37

How to submit jQuery form from two different methods

I have a jQuery form POST method that I need to submit based on the 3 values retrieved from commented in code below as PostData.

How can I pass these three variables into form submit method? They iterate through an each function and I am not sure how to pass this as an array and how this data will be posted.

$(document).ready(function () {
    var table = $('#example').DataTable();

    $('#example tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });

    $('#button').click(function () {
        //var i = 0;                                                
        //Commented out = increment and return whole row
        $('.selected').each(function () {
            alert($(this).find(":selected").text()); //Post Data
            alert($(this).find('input:text').val()); //Post Data
            alert($(this).attr('value')); //PostData

           // alert(table.rows('.selected').data()[i]);
           //i++;
        });
    });

    $("form").submit(function (e) {

        e.preventDefault();
        var postData = val
        var postData2= val2
        var postData3=val3
        $.ajax({
            type: "POST",
            url: "/Home/Index",
            data: JSON.stringify({ pd: postData, ta: val2, tb: val3 }),
            success: function (data) {
                alert("Success");
                submit();
            },
            error: function () {
                alert("error");
            }
        });
    })
})

function submit() {
    $("form").unbind('submit').submit();
}

Upvotes: 0

Views: 77

Answers (1)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

Your example is over-complicated and cluttered. What you are trying to achieve is actually very simple. You don't have to pass anything in to get your values. You can do the same thing you are already doing in the button click listener callback method.

I would start by separating concerns. Isolate the AJAX call and the unbind methods:

function postTheData(postData) {
  $.ajax({
    type: "POST",
    url: "/Home/Index",
    data: JSON.stringify(postData), 
    success: function (data) {
      alert("Success");
      unbind();
    },
    error: function () {
      alert("error");
    }
  });
}

function unbind() {
  $("form").unbind('submit').submit();
}

Then, try to realize that these are listener registers. You are attaching an action to a DOM event. When the button is pressed, or the form is submitted one of these two functions will be called. You get the data for each in the same way. Submitting a form does not add any special params to the method. You still have to extract the form data yourself.

Also, it's not really clear from your question what the purpose of the .each method. Without a good look at you markup, it's hard to tell what you are going for. But, suffice it to say, you would extract the values from the inputs in the same way for each case:

// this is called when the button is clicked
$('#button').click(function () {
  var val1, val2, val3;
  $('.selected').each(function () {
    val1 = $(this).find(":selected").text(); //Post Data
    val2 = $(this).find('input:text').val(); //Post Data
    val3 = $(this).attr('value'); //PostData
  });

  postTheData({pd: val1, ta: val2, tb: val3});
});

// this is called when the form is submitted (by pressing enter inside an input, or pressing the "submit" button)
$("form").submit(function (e) {
  var val1, val2, val3;
  e.preventDefault();
  //just get the values the same way
  $('.selected').each(function () {
    val1 = $(this).find(":selected").text(); //Post Data
    val2 = $(this).find('input:text').val(); //Post Data
    val3 = $(this).attr('value'); //PostData
  });
  postTheData({pd: val1, ta: val2, tb: val2});
});

Upvotes: 1

Related Questions