Question

我想创建一个表单，我将输入一个数字，生成如下链接：http://domain.com/edit/ {{number}}

当我输入77时，
{{number}}会改变，提交将带我到http://domain.com/edit/77

<div class="form-group">
    <form action="/edit/[[number]]" method="get">
        <input class="form-control" type="text" name="number" ">
        <br>
        <input type="submit" name="save" value="save" class="btn btn-success">
    </form>
</div>

我该怎么做？

Answer 1

因此，您需要能够更改表单的操作属性的值。

<div class="form-group">
    <form action="/edit/[[number]]" method="get" id="form">
        <input class="form-control" type="text" name="number">
        <br>
        <input type="submit" name="save" value="save" class="btn btn-success">
    </form>
</div>

首先，我们需要给它一个id，在这种情况下form。

然后我们需要使用jquery来改变动作的值，就像这样;

$('form#form').attr('action', '/edit/' + $('form#form input[name="number"]').val());

但这只会更改一次表单值，因此我们需要添加一个事件监听器，在本例中为onchange。

$( 'form#form input[name="number"]').on('input', function() {});

将它们加在一起应该创建这样的东西;

$( 'form#form input[name="number"]').on('input', function() {
    $('form#form').attr('action', '/edit/' + $('form#form input[name="number"]').val());
});

＆＃13;

$( 'form#form input[name="number"]').on('input', function() {
    $('form#form').attr('action', '/edit/' + $('form#form input[name="number"]').val());
  console.log($('form#form').attr('action'));
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
        <form action="/edit/[[number]]" method="get" id="form">
            <input class="form-control" type="text" name="number">
            <br>
            <input type="submit" name="save" value="save" class="btn btn-success">
        </form>
    </div>

＆＃13;

Answer 2

您必须在attr框中的用户input时使用input表单的操作属性。我刚刚在id和form代码中添加了input。

$form.attr('action', $form.data('action')+$(this).val());

＆＃13;

var $form = $('#url-form');
$('#number').on('input', function() {
    $form.attr('action', $form.data('action') + $(this).val());
    console.log($form.attr('action'))
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <form action="/edit/[[number]]" data-action="/edit/" method="get" id="url-form">
        <input class="form-control" type="text" name="number" id="number">
        <br>
        <input type="submit" name="save " value="save " class="btn btn-success ">
    </form>
</div>

＆＃13;

Answer 3

＆＃13;

function generateLink(){
 var link="http://domain.com/edit/"+document.getElementById("numberId").value;
alert(link);
  
}

＆＃13;

<div class="form-group">
<form action="/edit/[[number]]" method="get">
  <input id="numberId" class="form-control" type="text" name="number">
  <br>
  <input onclick="generateLink()" type="submit" name="save" value="save" class="btn btn-success">
</form>
</div>

＆＃13;

并使用此网址将ajex转换为表单的parform操作。

javascript生成表单提交链接

3 个答案: