phpで値を取得する方法

HTML.PHP
1<?PHP
2?>
3<html>
4<head>
5    <title>TERMINAL</title>
6    <script src="js/jquery-2.0.3.min.js"></script>
7    <script src="js/javascript.js"></script>
8    <link href="css/style.css" rel="stylesheet" type="text/css"/>
9</head>
10<body>
11    <div id="SignIn">
12        <div id="SIG">
13            <p>TERMINAL</p>
14        </div>
15
16        <!--ID-->
17        <div id="BOX1">
18            <input type="text" class="TEXTBOX" placeholder="USERID" id="User_ID"/>
19        </div>
20        <!--PASSWORD-->
21        <div id="BOX2">
22            <input type="password" class="TEXTBOX" placeholder="PASSWORD" id="User_Pass"/>
23        </div>
24
25        <div id="bottn">
26            <p>Go</p>
27        </div>
28
29    </div>
30</body>
31</html>

PHPで id = buttnのclickに反応して
id="User_ID"とid="User_Pass"の値を取得したいです。
どうすれば取得ができるでしょうか、教えてほしいです。

行動規範の内容に同意します

回答2件

PHPを使う方法

PHPはクライアントサイドスクリプトではないため「クリックしたら」などというような処理はできません。
ページが変わってしまいますが、このようにしたらできると思います。

php
1<?php
2$id = (!empty($_POST['user_id']) ? $_POST['user_id'] : '';
3$password = (!empty($_POST['password']) ? $_POST['password'] : '';
4?>
5<html>
6<head>
7    <title>TERMINAL</title>
8    <script src="js/jquery-2.0.3.min.js"></script>
9    <script src="js/javascript.js"></script>
10    <link href="css/style.css" rel="stylesheet" type="text/css"/>
11</head>
12<body>
13    <?php
14    echo 'id: ' . $id . '<br>';
15    echo 'password: ' . $password . '<br>';
16    ?>
17    <div id="SignIn">
18        <div id="SIG">
19            <p>TERMINAL</p>
20        </div>
21
22       <form method="POST" action="">
23               <!--ID-->
24               <div id="BOX1">
25                   <input type="text" class="TEXTBOX" placeholder="USERID" id="User_ID" name="user_id"/>
26               </div>
27               <!--PASSWORD-->
28               <div id="BOX2">
29                   <input type="password" class="TEXTBOX" placeholder="PASSWORD" id="User_Pass" name="password"/>
30               </div>
31
32               <div id="bottn">
33                   <input type="submit" value="Go">
34               </div>
35       </form>
36
37    </div>
38</body>
39</html>

Ajaxを使う方法

もしどうしてもやりたいのでしたら、Ajaxを使用してこのような方法でできるかと思います。

html
1<html>
2<head>
3    <title>TERMINAL</title>
4    <script src="js/jquery-2.0.3.min.js"></script>
5    <script src="js/javascript.js"></script>
6    <link href="css/style.css" rel="stylesheet" type="text/css"/>
7</head>
8<body>
9    <div id="SignIn">
10        <div id="SIG">
11            <p>TERMINAL</p>
12        </div>
13
14        <!--ID-->
15        <div id="BOX1">
16            <input type="text" class="TEXTBOX" placeholder="USERID" id="User_ID"/>
17        </div>
18        <!--PASSWORD-->
19        <div id="BOX2">
20            <input type="password" class="TEXTBOX" placeholder="PASSWORD" id="User_Pass"/>
21        </div>
22
23        <div id="bottn">
24            <p>Go</p>
25        </div>
26
27        <hr>
28
29        <div class="result"></div>
30
31    </div>
32</body>
33</html>

javascript
1$(function(){
2        $('#bottn p').click(function(){
3                var id = $('#User_ID').val();
4                var pass = $('#User_Pass').val();
5                $.ajax({
6                        url: 'api.php',
7                        type: 'post',
8                        dataType: 'html',
9                        data: 'id=' + id + '&pass=' + pass,
10                           success: function(html){
11                                    $('.result').html(html);
12                           }
13                });
14                return false;
15        });
16});

php
1<?php
2$id = (!empty($_POST['id']) ? $_POST['id'] : '';
3$password = (!empty($_POST['pass']) ? $_POST['pass'] : '';
4if(!empty($id) && !empty($password)) {
5        echo 'idは' . $id . '、passwordは' . $password;
6}

確認していませんがこれでできると思います。

取得するだけだったら

何らかの処理をしないのであれば、取得するだけならjQueryで可能です。

html
1<html>
2<head>
3    <title>TERMINAL</title>
4    <script src="js/jquery-2.0.3.min.js"></script>
5    <script src="js/javascript.js"></script>
6    <link href="css/style.css" rel="stylesheet" type="text/css"/>
7</head>
8<body>
9    <div id="SignIn">
10        <div id="SIG">
11            <p>TERMINAL</p>
12        </div>
13
14        <!--ID-->
15        <div id="BOX1">
16            <input type="text" class="TEXTBOX" placeholder="USERID" id="User_ID"/>
17        </div>
18        <!--PASSWORD-->
19        <div id="BOX2">
20            <input type="password" class="TEXTBOX" placeholder="PASSWORD" id="User_Pass"/>
21        </div>
22
23        <div id="bottn">
24            <p>Go</p>
25        </div>
26
27        <hr>
28
29        <div class="result"></div>
30
31    </div>
32</body>
33</html>

javascript
1$(function(){
2        $('#bottn p').click(function(){
3                var id = $('#User_ID').val();
4                var pass = $('#User_Pass').val();
5                $('.result').html('idは' + id + '、passwordは' + pass + 'ですね！');
6                return false;
7        });
8});

投稿2015/11/18 23:42

ckaposndbbba

総合スコア210

TaruOrder

2015/11/19 09:32

解答ありがとうございます！詳細な情報とソースコードまで書いてくださりありがとうございます！参考にさせていただきます！

行動規範の内容に同意します

PHPはサーバーサイドの言語なので、「クリック」など、ブラウザ上でのユーザーの操作などはPHPでは監視できません。formで操作されたものを受け取るのみ可能です。

html
1<?php
2if (null != filter_input_array(INPUT_POST)) {
3	$user_id = filter_input(INPUT_POST, 'user_id');
4	$password = filter_input(INPUT_POST, 'password');
5	if ('' != $user_id && '' != $password) {
6		var_dump($user_id);
7		var_dump($password);
8	}
9}
10?>
11<html>
12	<head>
13		<title>TERMINAL</title>
14		<script src="js/jquery-2.0.3.min.js"></script>
15		<script src="js/javascript.js"></script>
16		<link href="css/style.css" rel="stylesheet" type="text/css"/>
17	</head>
18	<body>
19		<div id="SignIn">
20			<div id="SIG">
21				<p>TERMINAL</p>
22			</div>
23
24			<form method="post">
25				<!-- ID -->
26				<div id="BOX1">
27					<input name="user_id" type="text" class="TEXTBOX" placeholder="USERID" />
28				</div>
29				<!-- PASSWORD -->
30				<div id="BOX2">
31					<input name="password" type="password" class="TEXTBOX" placeholder="PASSWORD" />
32				</div>
33				<div id="button">
34					<button>Login</button>
35				</div>
36			</form>
37		</div>
38	</body>
39</html>