Question

我有一个带有一个文本字段的表单：

<form class="navbar-form navbar-left">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

当用户输入文字，例如“Hello”并点击Submit时，我想加载网址/search-results/hello。有什么想法吗？

Answer 1

看看这个，看看你是否可以根据自己的规格进行编辑。

<form>
 <div class="form-group">
    <input type="text" id="var1" class="form-control" placeholder="Search">
  </div>
<input type="button" id="URLGenerate" value="Generate" />
</form>

//assign the button event handler
document.getElementById( 'URLGenerate' ).addEventListener( 'click', onGenerate );

//given the name of a radio button group, it returns the value of the selected radio button or null if none of them are selected
function getRadioButtonValue ( name ) {
  var allRadios = document.getElementsByName( name );
  for ( var i = 0; i < allRadios.length; i++ ) {
    if ( allRadios[i].checked ) {
      return allRadios[ i ].value;
    }
  }
  return null;//or any other value when nothing is selected
}

function onGenerate() {
  //the base url
  var url = 'http://domain.com/file.php';
  //an array of all the parameters
  var params = [];
  //get the value from the edit box with id=var1
  params.push( 'var1=' + document.getElementById( 'var1' ).value );
  //get the value from the edit box with id=var2
//   params.push( 'var2=' + document.getElementById( 'var2' ).value );

  //get the value of the radio box
  params.push( 'var3=' + getRadioButtonValue( 'var3' ) );

  //join all the parameters together and add to the url
  url += '?' + params.join( '&' );
  alert( url );
}

代码：

http://jsbin.com/itovat/22/edit?html,js,output

住：

http://jsbin.com/itovat/22/

Answer 2

试试这个jQuery脚本

$("button[type=submit]").click(function(e){
    e.preventDefault();
    var searchItem = $("#form-control").val();
    $("form").attr('action','search-results/'+searchItem);
    $("form").submit();
});

提交到URL的HTML表单取决于其中一个字段

2 个答案: