Question

我需要每次点击按钮，表单操作正确更改

但如果我点击其他按钮，它会累积表格动作，例如

 <form action="http://localhost:8000/3/approved/4/approved" method="POST" id="form-request">

 <button type="button" class="clr-empty" data-id="3">Prestar ambiente</button>
 <button type="button" class="clr-empty" data-id="4">Prestar ambiente</button>
 <button type="button" class="clr-empty" data-id="5">Prestar ambiente</button>

我希望像这样的表单操作，每次单击按钮

都能正确更改

<form action="http://localhost:8000/3/approved" method="POST" id="form-request">

JQuery的

 $('.big-content').on('click', '.clr-empty', function(e){
    e.preventDefault();
        $form   = $('#form-request');
        $faction = $('#form-request').attr('action');
        $fid     = $(this).attr('data-id');

        //This set form action
        $('#form-request').attr('action', $faction+'/'+$fid+'/approved');
    $('#confirm').modal({ backdrop: 'static', keyboard: false })
        .on('click', '#asd', function() {
            $form.submit();
    });
});

Answer 1

你要求积累，所以积累了。如果您对第一部分有所了解，可以像这样硬编码：

$('.big-content').on('click', '.clr-empty', function (e) {
  e.preventDefault();
  $form = $('#form-request');
  $fid = $(this).attr('data-id');

  // This set form action
  $('#form-request').attr('action', "http://localhost:8000/" + $fid + '/approved');
  $('#confirm').modal({
    backdrop: 'static',
    keyboard: false
  })
  .on('click', '#asd', function() {
    $form.submit();
  });
});

如果您希望网址是动态的，可以使用：

$('.big-content').on('click', '.clr-empty', function (e) {
  e.preventDefault();
  $form = $('#form-request');
  $fid = $(this).attr('data-id');

  // Construct the URL dynamically.
  var url = window.location.href.split("/");
  url = url[0] + "//" + url[2] + "/";

  // This set form action
  $('#form-request').attr('action', url + $fid + '/approved');
  $('#confirm').modal({
    backdrop: 'static',
    keyboard: false
  })
  .on('click', '#asd', function() {
    $form.submit();
  });
});

仅当URL与提供页面的域相同时，上述两种方法才适用。如果没有，您可以从表单action。

构建网址

$('.big-content').on('click', '.clr-empty', function (e) {
  e.preventDefault();
  $form = $('#form-request');
  $fid = $(this).attr('data-id');

  // Construct the URL dynamically.
  var url = $form.attr("action").split("/");
  url = url[0] + "//" + url[2] + "/";

  // This set form action
  $('#form-request').attr('action', url + $fid + '/approved');
  $('#confirm').modal({
    backdrop: 'static',
    keyboard: false
  })
  .on('click', '#asd', function() {
    $form.submit();
  });
});

另外，只是注意到你不需要再次选择表格。所以你的最终代码将是：

$('.big-content').on('click', '.clr-empty', function (e) {
  e.preventDefault();
  $form = $('#form-request');
  $fid = $(this).attr('data-id');

  // Construct the URL dynamically.
  var url = $form.attr("action").split("/");
  url = url[0] + "//" + url[2] + "/";

  // This set form action
  $form.attr('action', url + $fid + '/approved');
  $('#confirm').modal({
    backdrop: 'static',
    keyboard: false
  })
  .on('click', '#asd', function() {
    $form.submit();
  });
});

使用JQuery更改表单操作

1 个答案: