JQuery AJAX формы отправить с редактировать значения

Question

У меня есть дата, где у меня есть столбец сведений с кнопкой редактирования.Когда пользователь нажимает на изменение, я передаю идентификатор в качестве параметра.Я получаю все значения для этого идентификатора и отображается в форме.Теперь, когда я редактирую значения и отправляю форму, используя метод PUT, она вставляется в таблицу, значения передаются как параметр, и она показывает пустую форму.Как решить эту проблему.

HTML:

<form class="container" id="myform" name="myform" novalidate>
  <div class="form-group row">
     <label for="position" class="col-sm-2 col-form-label fw-6">Position</label>
    <div class="col-sm-10">
     <input type="text" class="form-control" id="position" name="position" placeholder="Position" required>
     </div>
   </div>
   <div class="form-group row">
      <label for="location" class="col-sm-2 col-form-label fw-6">Location</label>
      <div class="col-sm-10">
       <input type="text" class="form-control" id="location" name="location" placeholder="Location" required>
       </div>
   </div>
     <div class="form-group row">
       <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Submit</button>
       </div>
       </div>
 </form>

Сценарий метода PUT:

<script type='text/javascript'>
    $(document).ready(function(){
        $("#myform").submit(function(e) {
            var parms = {
                position : $("#position").val(),
                location : $("#location").val()
            };
            var par_val;
            var param_id = new window.URLSearchParams(window.location.search);
            par_val = param_id.get('id');
            console.log(par_val);
            var par_url = par_val;

            $.ajax({
                url: "http://localhost:3000/joblists/"+par_val,
                method: 'PUT',
                async: false,
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(parms),
                success: function(data){
                    console.log('Submission was successful.');
                    console.log(data);
                },
                error: function (data) {
                    console.log('An error occurred.');
                    console.log(data);
                },   
            })
        });
    });
</script>

Сценарий метода GET:

 <script type="text/javascript">
         $(document).ready(function(){
          var id_val;
          var params = new window.URLSearchParams(window.location.search);
           id_val = params.get('id');
          console.log(id_val);
         var url1=id_val;
          $.ajax({
        url: "http://localhost:3000/joblists/"+id_val,
        type: "GET",
        dataType: "json",

        success: function (data) {
    // alert(JSON.stringify(data));
          console.log(typeof(data));
            $("#position").val(data.position);
            $("#location").val(data.location);

        },
        error: function(data) {
            console.log(data);
        }
      });

    });
 </script>

Послепри отправке формы страница должна оставаться неизменной со значениями редактирования формы.должны быть вставлены только отредактированные значения.Как этого добиться.

Answer 1

Добавление предотвращения по умолчанию в дескриптор отправки формы достаточно.Вы обрабатываете почтовый запрос с помощью ajax call.

e.preventDefault();

Answer 2

Я проверил ваш код в моем редакторе.Есть некоторые изменения, которые я сделал в запросе ajax, и теперь он работает для меня.вот кодПопробуй

<script type='text/javascript'>
    $(document).ready(function(){
        $("#myform").submit(function(e) {
            e.preventDefault();
            var parms = {
                position : $("#position").val(),
                location : $("#location").val()
            };
            var par_val;
            var param_id = new window.URLSearchParams(window.location.search);
            par_val = param_id.get('id');
            console.log(par_val);
            var par_url = par_val;

            $.ajax({
                url: "http://localhost:3000/joblists/"+id_val,
                method: 'POST', //or you can use GET
                dataType : "json", //REMOVED CONTENT TYPE AND ASYNC
                data: {send_obj:JSON.stringify(parms)},  //ADDED OBJECT FOR DATA
                success: function(data){
                    console.log('Submission was successful.');
                    console.log(data);
                },
                error: function (data) {
                    console.log('An error occurred.');
                    console.log(data);
                },   
            })
        });
    });
</script>

Answer 3

В вашем коде 2 изменения.

Этот код предотвратит перезагрузку вашей страницы, а также вы не отправляете данные в правильном формате.

$("#myform").submit(function(e) {
      e.preventDefault(); // 1. Dont reload the page
        var parms = {
            position : $("#position").val(),
            location : $("#location").val()
        };
        var par_val;
        var param_id = new window.URLSearchParams(window.location.search);
        par_val = param_id.get('id');
        console.log(par_val);
        var par_url = par_val;

        $.ajax({
            url: "http://localhost:3000/joblists/"+par_val,
            method: 'PUT',
            async: false,
            dataType : "json",
            contentType: "application/json; charset=utf-8",
            data: parms, // 2. Just send the parms object bcoz you already defined the dataType as json so it will automatically convert it into string.
            success: function(data){
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        })
    });

Answer 4

$ ('# myform'). On ('submit', function (e) {
e.preventDefault ();
..........