Question

我有一个包含两个仅整数文本框，一组单选按钮和一个提交按钮的表单。我希望它采用这三个输入的值，并使用它们生成一个包含三个变量的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>

Answer 1

嗯，以下是解决这个问题的方法：

1。创建HTML

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

2。使用Javascript

获取值

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

3。更改当前网址

制作网址后，您可以通过在Javascript中分配window.location来更改网址。

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

<强>更新

使用您添加到问题中的代码，我创建了一个解决问题的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 to try it live，你可以在这里看到HTML / JS：http://jsbin.com/itovat/3/edit

Javascript：从两个文本输入和一个单选按钮输入生成一个URL

1 个答案: