選択肢を選んで、文章を作るアプリを作りたい

作文を作るWebアプリのようなものを作っています。

イメージとしては、ボタンを押して任意の数押して、文節を追加していく感じです。

|文章を作る|(送信ボタン)

|で区切った選択肢から、0個または1個選んでもらい、それを左からつなげて、できた文章を表示します。
もしも、□私は　□りんごを　□食べます　にチェックを入れ、送信ボタン「文章を作る」を押したら、
別のページに遷移して、「私はりんごを食べます」と表示します。

あと、ボックスにチェックを入れたり、外したりしたとき、リアルタイムで今の文章の状態が分かるようにしたいです。

JavaScriptとPHPを使って作りたいのですが、どのように実装したらいいのか見当がつきません。
アドバイスをいただけますと幸いです。

回答1でyambejpさんから頂いた回答をもとに、自分でコードを書いてみました。

index.php
1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9</head>
10<body>
11<h3>今の文章</h3>
12<span class="js"></span>
13
14
15<form method="post" action="index2.php">
16<div>
17<label><input type="radio" name="who" value="私は" class="bunsetu">私は</label>　　 |
18<label><input type="radio" name="what" value="りんごを" class="bunsetu">りんごを</label>   |
19<label><input type="radio" name="when" value="明日" class="bunsetu">明日</label>  |
20<label><input type="radio" name="do" value="食べます" class="bunsetu">食べます</label>
21</div>
22<div>
23<label><input type="radio" name="who" value="あなたは" class="bunsetu">あなたは</label> |
24<label><input type="radio" name="what" value="オレンジを" class="bunsetu">オレンジを</label>|
25<label><input type="radio" name="when" value="今日" class="bunsetu">今日</label>  |
26<label><input type="radio" name="do" value="買います" class="bunsetu">買います</label>
27</div>
28<div>
29<label><input type="radio" name="who" value="彼女は" class="bunsetu">彼女は</label>　 |
30<label><input type="radio" name="what" value="ぶどうを" class="bunsetu">ぶどうを</label>　 |
31<label><input type="radio" name="when" value="昨日" class="bunsetu">昨日</label>  |
32<label><input type="radio" name="do" value="売ります" class="bunsetu">売ります</label> 
33</div>
34<input type="submit" value="send">
35</form>
36</body>
37<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
38<script src="main.js"></script>
39</html>

index2.php
1<?php
2
3$who =filter_input(INPUT_POST,'who');
4$what=filter_input(INPUT_POST,'what');
5$when=filter_input(INPUT_POST,'when');
6$do  =filter_input(INPUT_POST,'do');
7print($who.$what.$when.$do);
8
9?>

main.js
1function show_bunsetu($key){
2    if(typeof($('input[name=$key]:checked').val()) !== 'undefined'){
3          return $('input[name=$key]:checked'.val());
4    };
5};
6
7$(function(){
8$('.bunsetu').click(function(){
9    
10    var who = show_bunsetu(who);
11    var when = show_bunsetu(whem);
12    var what = show_bunsetu(what);
13    var do_it = show_bunsetu(do_it);
14    $('.js').text(who+when+what+do_it);
15
16});
17});
18
19
20

特にJavaScriptの部分は、jQueryで作ろうと実装しようとしましたが、うまく動きません。
初めに書いたmian.jsのコードでは、「□私が」をクリックすると、今の文章として、「私がundefinedundefinedundefined」と表示されてしまいました。これを防ぐために、show_bunsetu関数で、クリックしていないwhen,what,do_itに関しては値を入れない、空文字？にして、「私が」だけを表示できる仕様を試みました。
しかし実行し、「□私が」にチェックを入れた結果、Uncaught Error: Syntax error, unrecognized expression: input[name=$key]:checkedと、jqeuryファイルにエラーが出てしまい、原因が特定できない状況です。

m.ts10806

2019/08/01 12:13

設計はすでに出ている文章の通りでは。

kingsma20576829

2019/08/01 12:15

確かにおっしゃる通りです。設計ではなく、実装でした。ご指摘ありがとうございます。

m.ts10806

2019/08/02 00:13

質問編集していただければと。あと、自分なりに組んでみたコードは質問段階であったほうが良いです。分からないなりにやってみたこと調べたことはあるはずなので。

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

回答1件

こんな感じで

PHP
1<script>
2window.addEventListener('DOMContentLoaded',()=>{
3  [].forEach.call(document.querySelectorAll('input[type=radio]'),x=>{
4    x.addEventListener('change',e=>{
5      var str="";
6      str+=(document.querySelector('input[type=radio][name=who]:checked')||{}).value||"";
7      str+=(document.querySelector('input[type=radio][name=what]:checked')||{}).value||"";
8      str+=(document.querySelector('input[type=radio][name=when]:checked')||{}).value||"";
9      str+=(document.querySelector('input[type=radio][name=do]:checked')||{}).value||"";
10      document.querySelector('#js').textContent=str;
11      console.log(str);
12    });
13  });
14});
15</script>
16PHP:<?PHP
17$who =filter_input(INPUT_POST,'who');
18$what=filter_input(INPUT_POST,'what');
19$when=filter_input(INPUT_POST,'when');
20$do  =filter_input(INPUT_POST,'do');
21print htmlspecialchars($who.$what.$when.$do);
22?><br>
23Javasccript:<span id="js"></span><br>
24<form method="post">
25<div>
26<label><input type="radio" name="who" value="私は">私は</label>　　 |
27<label><input type="radio" name="what" value="りんごを">りんごを</label>   |
28<label><input type="radio" name="when" value="明日">明日</label>  |
29<label><input type="radio" name="do" value="食べます">食べます</label>
30</div>
31<div>
32<label><input type="radio" name="who" value="あなたは">あなたは</label> |
33<label><input type="radio" name="what" value="オレンジを">オレンジを</label>|
34<label><input type="radio" name="when" value="今日">今日</label>  |
35<label><input type="radio" name="do" value="買います">買います</label>
36</div>
37<div>
38<label><input type="radio" name="who" value="彼女は">彼女は</label>　 |
39<label><input type="radio" name="what" value="ぶどうを">ぶどうを</label>　 |
40<label><input type="radio" name="when" value="昨日">昨日</label>  |
41<label><input type="radio" name="do" value="売ります">売ります</label> 
42</div>
43<input type="submit" value="send">
44</form>