0

整数のみのテキスト ボックスが 2 つ、ラジオ ボタンのグループが 1 つ、送信ボタンが 1 つあるフォームがあります。これら 3 つの入力の値を取得し、それらを使用して、次のように 3 つの変数を持つ 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. 現在の URL を変更する

window.locationURLを作った後、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 に答える