JavaScript来生成表单提交链接

Question

我想要一种形式，我会输入一个号码，这将产生一个像这样的链接：http://domain.com/edit/ {{数}}

{{number}}将改变的时候我会输入77，提交会带我去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

所以，你需要能够改变表单的action属性的值。

<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()); 
}); 

$('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')); 
 
    });

<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>

Answer 2

当input框中的用户input用户必须使用attr表单的action属性。我只是在form和input标记中添加了id。

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

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

<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>

Answer 3

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

<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>

，去了来AJEX使用parform此URL形式的行动。