0

オンボタンで別の部屋に入りたい。これはJavascriptでどのように可能ですか。たとえば、「キッチン、トイレ、寝室」の3つの部屋があります。選択に応じて、JSを使用してこれらの部屋のいずれかに入るにはどうすればよいですか。したがって、入力ボックスに「kitchen」と入力すると、kitchen.phpに移動します。トイレに入ると、同じボタンでtoilet.phpなどに移動します。

これはHTML入力です。

<form method="post">
<input style=""name="Text1" type="text"><br>
<input name="move" style="height: 23px" type="submit" value="Move">
</form>
4

1 に答える 1

1

選択フィールドjsfiddleデモを使用するだけです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<script type="text/javascript"> 
function submitForm() {
    var myform = document.getElementById('myform');
    var mytext = document.getElementById('room');
    myroom = mytext.value.toLowerCase();
    if (myroom == 'kitchen') {
        myform.action = 'kitchen.php';
        myform.submit();
    } else if (myroom == 'toilet') {
        myform.action = 'toilet.php';
        myform.submit();
    } else if (myroom == 'bedroom') {
        myform.action = 'bedroom.php';
        myform.submit();
    } else return false;
}

window.onload = function(){
     document.getElementById('move').onclick = submitForm;
}
</script> 
</head> 

<body> 
<form id="myform" name="myform" method="post"> 
    <input type="text" id="room" name="room" />
     <button id="move" name="move" style="height: 23px">Move</button> 
</form> 
</body> 
</html>

php側で、これが機能するかどうかをテストする3つのファイル、toilet.php、kitchen.php、bedroom.phpを作成し、3つのファイルすべてに次のコードを含めます。ファイル名が小文字であることを確認してください。

<?php
echo $_POST['room'];
?>

基本的に、選択されたオプションに基づいて、JavaScriptはフォームのアクションURLを変更して送信します。何も選択されていない場合、falseが返され、送信されません。submitForm関数は、onclickイベントで移動ボタンにアタッチされます。

于 2011-03-05T23:20:49.773 に答える