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形式的行動。