Jquery / Javascript change form action based on input field

Question

I have a form like this

<html>
    <body>
    <form action='' name='myform' method='POST'>
    <input type='text' name='cars'>
    <button action='submit'>Search Cars</button>
    </body>
</html>

What I want to do is change the form action to be something like action='http://www.mysite.com/<cars_value>.html'> based on whatever is filled into the input field (which is populated by autocomplete).

Is there an easy way of doing this? I can do it with a <select> easily enough but the customer wants an input field instead!

jsweazy · Accepted Answer · 2012-10-01 14:19:42Z

11

You can do this, you will need to add ids to items. One thing you might want to do is validate the users input.

HTML

<form action='' name='myform' id="myform" method='POST'>
  <input type='text' name='cars' id="cars">
  <button action='submit'>Search Cars</button>
</form>

jQuery

$('#myform').submit(function(){
  var car = $('#cars').val();
  $(this).attr('action', "http://www.mysite.com/" + car + ".html");
});

EDIT: It is best to be javascript at bottom of page;

FULL

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form action='' name='myform' id="myform" method='POST'>
    <input type='text' name='cars' id="cars">
    <button action='submit'>Search Cars</button>
  </form>
  <script src="path-to-jquery"></script>
  <script>
  // Shorthand for $(document).ready();
  $(function() {
   $('#myform').submit(function(){
     var car = $('#cars').val();
     $(this).attr('action', "http://www.mysite.com/" + car + ".html");
   });
  });
 </script>
</body>
</html>

edited Oct 1, 2012 at 14:19

answered Sep 24, 2012 at 15:24

jsweazy

1,6319 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bertster Over a year ago

Cheers for that, that looks like what I was thinking of. Sorry bit new to jquery / js - where does that go in the code (the jquery bit) and does it need to go inside a <script></script> at all?

markus · Accepted Answer · 2012-09-24 15:19:38Z

2

You can do it as follows:

$('#myForm').submit(function() {
    this.action = 'http://mysite.com/<xyz>.html';
    return true;
}

edited Sep 24, 2012 at 15:19

markus

40.8k23 gold badges100 silver badges143 bronze badges

answered Sep 24, 2012 at 15:18

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

2 Comments

bertster Over a year ago

Thanks - How would <xyx> be gathered from the form though? i.e. if the user types in Ferrari or Aston Martin or Jaguar for instance?

techfoobar Over a year ago

In that case, replace <xyz> with $('#myInputField').val() - where myInputField is the ID of the field whose value you need in the URL.

Sushanth -- · Accepted Answer · 2012-09-24 15:23:21Z

1

You need to get the value from the input field and populate the xyz value.. Try this

$('#myForm').submit(function() {

    var value = $('input[type="text"]').val(); 

    this.action = 'http://mysite.com/' + value + '.html';
    return true;
}

answered Sep 24, 2012 at 15:23

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

MaxPRafferty · Accepted Answer · 2012-09-24 15:27:42Z

0

First get your input, and then update the action. Return true if you want to form to submit after changing the value, or false if these are separate buttons.

<button onclick="changeVal($('input').val()">change value</button>
<script>
    function changeVal(value){
    $("form").attr("action",'http://mysite.com/'+value+'.html');
    return true;
    }
</script>

Be careful doing things like this, as if you use this solution you will be opening yourself up to javascript injection attacks. You'll want to "scrub" your input before injecting it into your form.

answered Sep 24, 2012 at 15:27

MaxPRafferty

5,0375 gold badges35 silver badges40 bronze badges

1 Comment

bertster Over a year ago

thanks, for the advice on security, I'd thought of that for all my php inputs - so will do the same for the JS side. Cheers

Collectives™ on Stack Overflow

Jquery / Javascript change form action based on input field

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related