按下提交按钮时，根据所选选项更改HTML表单操作

Question

HTML

<select class="form-control input-lg" id="r" name="r">
    <option data-action="/test1">Test1</option>
    <option data-action="/test2">Test2</option>
    <option data-action="/test3">Test3</option>
    <option data-action="/test4">Test4</option>
</select>

的jQuery

$("form").submit(function( event ) {
  event.preventDefault();
  $("form").attr("action", $(this).children(':selected').attr("data-action")); 
  $(this).submit();
});

问题

表单操作未更新且表单未提交？

Answer 1

创建一个单独的按钮，如下所示：

HTML：

<!-- form html -->

<button type="button" id ="submit-btn" class="my-class">Submit!</button>

JS / jQuery的：

$(document).ready(function()
{
    $('#submit-btn').on('click', function()
    {
        var action = $('form select option:selected').data('action');

        $.ajax({
            url: action,
            //rest of ajax code
        })
    })
});

而不是在表单提交上运行事件，我们通过按钮执行操作，该按钮根据所选的选项数据操作值获取操作。

Answer 2

我假设你有一个表单和一个提交按钮（因为你的代码中缺少它），你的计划也可以通过这种方式完成：

由于您正在使用属性data-，因此您可以使用data(nameOfData)

获取其值

使用提交按钮

＆＃13;

＆＃13;

$("form").submit(function(e){
  var newMethod = $(this).find(':selected').data('action');
  $(this).attr('action', newMethod);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
  <select class="form-control input-lg" id="r" name="r">
    <option data-action="/test1">Test1</option>
    <option data-action="/test2">Test2</option>
    <option data-action="/test3">Test3</option>
    <option data-action="/test4">Test4</option>
  </select>
  <button type="submit" id="btnSubmit">Submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;

使用简单的按钮

＆＃13;

＆＃13;

$("#btnSubmit").click(function(){
  var newMethod = $("#selectElement :selected").data('action');
  $(this).closest('form').attr('action', newMethod);
  $(this).closest('form').submit();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
  <select id="selectElement" class="form-control input-lg" id="r" name="r">
    <option data-action="/test1">Test1</option>
    <option data-action="/test2">Test2</option>
    <option data-action="/test3">Test3</option>
    <option data-action="/test4">Test4</option>
  </select>
  <button type="button" id="btnSubmit">Submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用按钮而不是提交按钮，并在按钮的单击事件处理程序内提交表单。在单击处理程序内部，在提交表单之前，请更改表单的操作。

我希望您可以将输入类型=“提交”更改为type =“button”。