ソースコードからではなくホーページ上からボタンの配列を組みたい。（現在、ソースコードを直接書き換えることで行っている操作を、いちいちテキストを開くことなくホームページ上で直接行いたい）

Question

前提・実現したいこと

ボタンの配列を組むプログラミングを作成しています。
現在、横列と縦列を設定して値を入力することでその値をもとにボタンが配列されるプログラムを組みました。※↓ソースコード

現状エディターでソースコードを直接いじればボタンの配列を組み替えることはできています。

しかし、今回製作するにあたって上記の工程を、ホームページ上で行えるようにしたいと考えています。（いちいちテキストを開かなくても配列を組み替えられるようにしたい）

該当ページ

つまりホームページ上で入力した変数を同ページのボタンの配列に反映させたいということです。

お力添えを頂ければと思います。
よろしくお願いいたします。

発生している問題

どうしてもホームページ上で入力した値を反映させることができません。

該当のソースコード

現状完成しているボタンの配列を組むプログラム　※エディターを開いて変数を入力する必要あり

<?php
foreach(range("A","C") as $r){
  foreach(range(1,5) as $c){
    print "<input type='checkbox' name='c[]' id='c{$r}-{$c}' value='{$r}-{$c}'><input type='button' value='{$r}-{$c}' class='cx'>";
  }
  print "<br>";
}
	?>

試したこと

ソースコードの(range("A","C") as $r)(range(1,5) as $c)のアルファベットと数字の値を変更すれば、それに応じて横列、縦列の個数が変化するようになっています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[tanat]

[つまりホームページ上で入力した変数を同ページのボタンの配列に反映させたいということです。]というのは、ホームページ上から編集した結果を他の人と共有したいという事という認識であっていますか？

[paras]

わざわざありがとうございます。まさしくその認識で間違いありません。

Answer 1

ざっくりやるとこう

• mypage.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#go').on('click',function(){
    $.ajax({
    url:"get.php",
    data:{r1:$('#r1').val(),r2:$('#r2').val(),c1:$('#c1').val(),c2:$('#c2').val(),},
    }).done(function(data){
      $('#view').html(data);
    });
  }).trigger('click');
});
</script>
<form>
<input type="text" name="r1" id="r1" value="a">
<input type="text" name="r2" id="r2" value="c"><br>
<input type="text" name="c1" id="c1" value="1">
<input type="text" name="c2" id="c2" value="5"><br>
<input type="button" value="go" id="go">
</form>
<hr>
<div id="view"></div>

• get.php

<?php
$r1=filter_input(INPUT_GET,"r1");
$r2=filter_input(INPUT_GET,"r2");
$c1=filter_input(INPUT_GET,"c1");
$c2=filter_input(INPUT_GET,"c2");
foreach(range($r1,$r2) as $r){
  foreach(range($c1,$c2) as $c){
    print "<input type='checkbox' name='c[]' id='c{$r}-{$c}' value='{$r}-{$c}'><input type='button' value='{$r}-{$c}' class='cx'>";
  }
  print "<br>";
}

※ただし、実用にはそうとう処理の追加が必要

Answer 2

phpでやってる組み替え部分をJavaScriptに置き換えて、状態が変わる度にAjaxでphpから状態を保存しておく方法ではいかがでしょうか。