db inserting with script help. (Mvc )

Question

I'm a bit lost and getting real short in time.
I need to create something like this script

   $(function () {
            var i = 0;
            $('#addButton').click(function () {
                $('#form1').append
                
                ('<div  class="clearfix">Ingredient Item <div id="editor2"><input style="float:left;"  type="text" name="Ingredient[' + i + '].IngredientItem"/></div><div id="editor3"> Item Amount<input style="float:left;" type="text" name="Ingredient[' + i + '].ItemAmount"/></div>');
                //Dif table..
                ('<div  class="clearfix1">Instructions <div id="editor3"><input style="float:left;"  type="text" name="Instructions[' + i + '].IntrusionStep"/></div><div id="editor4"> Cooking Time<input style="float:left;" type="text" name="Instructions[' + i + '].CookingTime"/></div>');
           //& one more diff table here 
                i++;
            });
        });

I know this is not a good approach and far from best practice I didn’t find any example of using any better way to do it ( I'm complete novice as far as JavaScript or any scripting for this matter).

Answer 1

What i have understood is that you need to post your form from java-script code. You can make use of a jQuery post or an ajax post method here.

$.ajax({
  url: '<%=Url.Action("Create","YourController") %>',
  type: 'post',
  data: $(form).serialize(),
  datatype: 'json',
  success: function (result) {
    // Handle code for success post
   },
  error : function (result) {
   // Error condition
   }
});

Now make your controller action accordingly to return json value back to your java-script code in the view