0

我有一个带有两个纯整数文本框、一组单选按钮和一个提交按钮的表单。我希望它获取这三个输入的值，并使用它们生成具有三个变量的 URL，如下所示：

http://domain.com/file.php?var1=&var2=&var3=

编辑：为了澄清，输出在页面上，而不是在 URL 中。我创建了一个基于 URL 变量显示不同内容的 php 图像，并且该图像应该能够在用户认为合适的情况下在其他站点上使用。

EDIT2：我的基本 HTML：

<form>
<input type="text" id="var1" />
<br />
<input type="text" id="var2" />
<br />
<br />
<input type="radio" name="var3" value="1" />
<br />
<input type="radio" name="var3" value="2" />
<br />
<br />
<input type="button" id="URLGenerate" value="Generate" />
</form>
4

1 回答 1

1

好吧，这是解决此问题的方法：

1. 创建 HTML

您需要为id每个文本框分配一个（文本框<input type="text"/>在 html 中定义。然后您需要定义为的单选按钮<input type="radio"/>。确保所有单选按钮具有相同的name属性。这是一个简短的介绍。

2. 使用 Javascript 获取值

您可以通过其 id 访问每个元素。

3.更改当前网址

window.location制作 URL 后，您可以通过在 Javascript 中指定来更改它。

我想如果有人想让它更简单，他们必须为你输入代码！;)

更新

使用您添加到问题中的代码，我创建了一个解决问题的 javascript 程序：

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

这是一个可以现场试用的 JSBin，您可以在此处查看 HTML/JS：http: //jsbin.com/itovat/3/edit

于 2013-01-28T13:35:43.863 回答