javascript to generate form submit link

Question

I want to make a form where i will input a number which will generate a link like this: http://domain.com/edit/{{number}}

{{number}} will change when i will input 77, submit will take me to 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>

How can i do that?

Possible duplicate of [How to use JavaScript to change the form action](http://stackoverflow.com/questions/5361751/how-to-use-javascript-to-change-the-form-action) — bejado, Feb 15 '17 at 06:09

score 2 · Accepted Answer · 2017-02-15T06:59:26.240

2

So, you need to be able to change the value of the form's action attribute.

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

So, first, we need to give it an id, in this case form.

Then we need can use jquery to change the value of the action, like this;

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

But this only changes the form value once, so we need to add an event listener, in this case, onchange.

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

Adding both of them together should create something like this;

$( '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>

edited Feb 15 '17 at 06:59

answered Feb 15 '17 at 06:17

I wanted to get http://domain.com/edit/11 when putting 11. But i get http://domain.com/edit/[[number]]?number=11&save=save – Fahad Ahammed Feb 15 '17 at 06:52
have you updated the html code to the one I have provided? – Feb 15 '17 at 06:54
Yes i did. Exactly what you gave me. – Fahad Ahammed Feb 15 '17 at 06:55
The problem is that you are using a `GET` request, which will give that output type back. Also, you need to load Jquery. – Feb 15 '17 at 06:57
How can i remove ?number=11&save=save – Fahad Ahammed Feb 15 '17 at 06:59
Change `GET` to `POST`. They are **very** different types of requests. – Feb 15 '17 at 06:59
The page i want it to forward i mean /edit/11 is built as GET. Can i somehow remove parameters ? :( – Fahad Ahammed Feb 15 '17 at 07:05
1

Removing the paramaters would not send the the information to the server. It also cannot be done. I suggest you look into an AJAX solution if you would like to send a GET request without any params. – Feb 15 '17 at 07:08

score 1 · Answer 2 · edited Feb 15 '17 at 06:21

You have to use attr the action attribute of the form when user input in the input box. I just have added an id in form and in input tag.

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

score 1 · Answer 3 · answered Feb 15 '17 at 06:18

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>

and go for the ajex to parform action of the form using this url.

javascript to generate form submit link

3 Answers3