jQuery Ajax表单提交编辑值 [英] jquery ajax form submit with edit values

问题描述

我有一个数据表，其中有带有编辑按钮的详细信息列.当用户单击编辑时，会将id作为参数传递.我正在获取该ID的所有值并显示在表单中.现在，当我编辑值并使用PUT方法提交表单时，它将被插入表中，这些值将作为参数传递，并且显示为空表单.如何解决这个问题.

I have a datatable where I have the detail column with an edit button. When the user clicks on the edit am passing the id as a parameter. I am fetching all the values for that id and displaying in the form. Now when I edit the values and submit the form using PUT method it is getting inserted in the table, the values are passing as a parameter and it shows the empty form. How to solve this issue.

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>

提交表单后，页面应与编辑表单值保持不变.仅应插入已编辑的值.如何做到这一点.

After submitting the form the page should remain the same with edit form values. only the edited values should be inserted. How to achieve this.

推荐答案

在表单提交句柄中添加阻止默认值就足够了.您正在通过ajax调用来处理发布请求.

Adding prevent default in form submit handle is enough. You're handling the post request by ajax call.

e.preventDefault();

这篇关于jQuery Ajax表单提交编辑值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！