2

私はこのようなフォームを持っています

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

私がやりたいのはaction='http://www.mysite.com/<cars_value>.html'>、入力フィールドに入力されたもの (オートコンプリートによって入力されたもの) に基づいて、フォーム アクションを変更することです。

これを行う簡単な方法はありますか？で十分簡単に​​できます<select>が、顧客は代わりに入力フィールドを求めています!

4

4 に答える 4

11

これを行うには、アイテムに ID を追加する必要があります。やりたいことの 1 つは、ユーザーの入力を検証することです。

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

編集: ページの下部に JavaScript を使用することをお勧めします。

満杯

<!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>
于 2012-09-24T15:24:47.233 に答える
2

次のように実行できます。

$('#myForm').submit(function() {
    this.action = 'http://mysite.com/<xyz>.html';
    return true;
}
于 2012-09-24T15:18:39.973 に答える
1

入力フィールドから値を取得し、xyz 値を設定する必要があります。これを試してください。

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

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

    this.action = 'http://mysite.com/' + value + '.html';
    return true;
}
于 2012-09-24T15:23:21.637 に答える
0

最初に入力を取得してから、アクションを更新します。値を変更した後にフォームを送信する場合は true を返し、これらが別のボタンである場合は false を返します。

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

このようなことを行う場合は注意してください。このソリューションを使用すると、JavaScript インジェクション攻撃にさらされることになります。入力をフォームに挿入する前に、入力を「スクラブ」する必要があります。

于 2012-09-24T15:27:42.980 に答える