How to use AJAX to send data in controller after converting array to string ?

This is my Form. I have put student_name and roll no in add or remove rows inside a table dynamically using jQuery.So In here student_name and roll no must be sent through AJAX after stringified the array in the same controller after I clicked Submit Button

<form action="{{route('classes.update',$user->id)}}" method="POST" id="classes-form" >
	<input type="text" name="class_name" >
	 <input type="number" name="class_teacher">
	<table>
    	<tr>
	     <td>
		<input type="text" name="student_name[]" id="student_name">
            </td>
	     <td>
		<input type="text" name="roll_no[]" id="roll_no">
	    </td>
	</tr>
    </table>
   <button type="submit" id="classForm">Submit</button>
</form>

This is my AJAX. I want to convert array to string and so after converting I need to send that string to controller though AJAX and decoded that string to array again in Controller.SO how should I do it

student_name = ["Akash","Shyam","Bishnu"]
roll_no = ["1","2","3"]
 <script>
        $(document).ready(function(e) {
            $('#classForm').click(function(e) {
                var student_name[]=('input[id=student_name[]]');
                var roll_no=('input[id=roll_no_no]');
                
                
                $.ajax({
                    url: $('form[id="classes-form"]').attr('action'),
                    type: "POST",
                     success: function(data) {
                        console.log(data)
                    }
                })
            });

            return false;
        })
    </script>

in javascript ,There is something like this

JSON.stringify(totalResults);

tykus

5 years ago

Level 104

jQuery has a serialize method for that https://api.jquery.com/serialize/

var form = $('form[id="classes-form"]');
$.ajax({
    url: form.attr('action'),
    type: "POST",
    data: form.serialize(),
    success: function(data) {
        console.log(data)
    }
})

saurav77

5 years ago

Best Answer

Level 2

I solved like this.

 
 <script>
        $(document).ready(function(e) {
            $('#classForm').click(function(e) {
              var student_nameArr=$("input[id='student_name']")
        	  .map(function(){return $(this).val();}).get();
  	      var roll_noArr= $("input[id='roll_no']")
         	.map(function(){return $(this).val();}).get();
              var student = {
                     '_token' : $('meta[name=csrf-token]').attr('content'),
                     student_name : JSON.stringify(Object.assign({},  student_nameArr)),
                    roll_no : JSON.stringify(Object.assign({},  roll_noArr)),
                }
                $.ajax({
                    url: student,
                    type: "POST",
                     success: function(data) {
                        console.log(data)
                    }
                })
            });

            return false;
        })
    </script>

Please or to participate in this conversation.