show values entered in form as a table before getting submitted

Question

First, I do not have much talent in ajax so please consider that while answering. Here I want to get all the values which I inserted into the form in a table before getting submitted but unfortunately am not getting the results I want. So far I have done this. Please have a look.

 <script>
 var form_data={ agent_name: $('#agent_name').val(),
                    type: $('input[name="type"]').val(),
                    number: $('#number').val(),
                    quantity: $('#quantity').val()
                  }

    $.ajax({
    type: 'POST',
    url: '<?php echo base_url();?>admin_control/ajax_data',
    data: form_data,
    dataType:"json", //to parse string into JSON object,
    success: function(data){ 
        if(data){
            var len = data.length;
            alert(len);
            var txt = "";
            if(len > 0){
                for(var i=0;i<len;i++){
                    if(data[i].agent_name && data[i].type){
                        txt += $('#table').append('<tr class="item-row"><td><input type="hidden" id="add_type" name="add_type[]" value="super">Super</td><td><input type="hidden" id="add_amount" name="add_amount[]" value="10">745</td><td><input type="hidden" class="add_quantity" id="add_quantity" name="add_quantity[]" value="10">10</td><td name="add_amount" id="add_amount">100</td><td><input type="checkbox" class="add_checkbox" name="layout" id="add_checkbox" value="1" checked></td></tr>');

                    }
                }
                if(txt != ""){

                    $("#table").append(txt).removeClass("hidden");
                }
            }
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('error: ' + textStatus + ': ' + errorThrown);
    }
});
return false;
</script>  

Here I want to pass the values of form_data in to the table I had written and how can we pass that and did it compulsory to use the url in ajax while using this am getting an error like error: parsererror: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data .

Here is my controller

public function ajax_data()
{
  $array = array("agent_name" => "admin","number"=>"785","type"=>"super","quantity"=>"10");
  $data['json'] = $array;
  echo json_encode($data);
}

Answer 1

The Ajax post will call the controller method for post values. The ajax code usually correct but you have not defined url.

 url: '',

Firstly define a method (ex: HomeController) then set ajax url parameter like

url: '@Url.Action("Save","Home")' or url: 'Save/Home'

  [HttpPost]
  public JsonResult Save(string agent_name, string type , int number,int quantity)
  {
    // return json
  }

Note :

The data types you send from the form with the method types must be the same.

Answer 2

Well, just to give you some hints to work on: The Ajax call could look like this:

$.ajax({
  type: 'POST',
  url: 'echodata.php',
  data: form_data,
  dataType:"json", 
  success: function(data){
    $('#table').append('<tr><td>'+data.agent_name+'</td>' // + more columns ...
        +'</tr>');}
);

The php script should really be something that processes the incoming information (passed as the $_POST array) into some other data that will ultimately be echoed as JSON string.

This is just a trivial version of echodata.php for testing:

<?php
echo json_encode($_POST);
?>

EDIT :

While you have fixed your URL attribute and have added a "controller" on the server your Ajax success function still expects something it will not get. Your PHP script delivers a JSON string that will be parsed into as a JavaScript object and not an array . The object will not have the length property your success function tries to use. Instead you should be looking for the json property.

So, there is no point for the for loop, instead you can use data.json.agent_name, data.json.number and data.json.type (etc.) properties directly. Your current .append() also only adds a static string to your table. This should of course be changed to use the freshly received values.