htmlで作成された配列をcgiに送信したい

前提・実現したいこと

クイズの結果を表示するページを作成しています。
配列ansにクイズの結果が保存され、
その結果をcgiに送信して結果画面を表示したいです。

発生している問題

クイズの解答終了後に送信ボタンが表示され、そのボタンを押すことで
解答の結果をcgiに送信したいのですが、配列形式になっているのでどのようにして送ればいいのかわからず困っています。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8"/>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
6<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">
7<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.js" integrity="sha384-31El76TwmbHj4rF9DyLsygbq6xoIobG0W+jqXim+a3dU9W53tdH3A/ngRPxOzzaB" crossorigin="anonymous"></script>
8<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
9<link rel="stylesheet" href="quiz1.css">
10</head>
11<body>
12<div class="timerzone">
13        <p id="timer">00:10</p>
14</div>
15<div class="quiz_area">
16    <div class="quiz_set">
17        第<span class="quiz_no">0</span>問
18        <div class="quiz_question"></div>
19        <div class="quiz_ans_area">
20            <ul></ul>
21        </div>
22        <div class="quiz_area_bg"></div>
23        <div class="quiz_area_icon"></div>
24    </div>
25    <div class="quiz_result">
26        <script src="./main.js"></script>
27    </div>
28</div>
29<script>
30var qA = $('.quiz_area');
31var quiz_success_cnt = 0; //問題の正解数
32var qC = 0; //現在の問題数を管理
33var ans = [[1,0],[3,1],[5,0]] #これは解答後の予想される配列です。
34ans.sort(function(a,b){return(a[0] - b[0]);});
35        var text = qC + '問中' + quiz_success_cnt + '問正解！';
36        if(qC === quiz_success_cnt){
37            text += '<br>全問正解おめでとう！';
38        }
39        text += '<form action="/formtest2.cgi" method="POST"><input type="submit"name="submit" value="送信"></form>';
40        qA.find('.quiz_result').html(text);
41        qA.find('.quiz_result').show();
42</script>
43

試したこと

<input type =text>で配列を書き込み送信しましたが、うまくいかず、配列ごと受け渡したいです。
追記しました。

text += '<form action="/formtest2.cgi" method="GET"><input type="text"name="submit" id="ans" value="送信"></form>';
documentgetElementById('ans').value=ans;

m.ts10806

2021/10/09 00:52

><input type =text>で配列を書き込み送信しましたがどのように書いたのでしょう。

pyamathon

2021/10/09 01:43

ご返信ありがとうございます。 text += '<form action="/formtest2.cgi" method="GET"><input type="text"name="submit" id="ans" value="送信"></form>'; documentgetElementById('ans').value=ans; と書きましたがエラーが出て動作していません。よろしくお願いします。

m.ts10806

2021/10/09 01:57

扱えるのは文字列なのでとりあえずJSON.Stringify すればとりあえず「そういう感じの文字列」は送信できますが、そういうことではなく？ ※あくまで文字列なので取得した先でパースしないといけないですが

pyamathon

2021/10/09 02:02

ご返信ありがとうございます。 postしている.cgiの変数に配列ansを送信することを目標にしているのでできれば文字列ではなく配列を送信できる方法を探しています。よろしくお願いします。

m.ts10806

2021/10/09 03:55

あのですから、valueにセットできるのはあくまで文字列です。 JSON文字列なら配列に戻せます。

pyamathon

2021/10/09 04:19

ご返信ありがとうございます。 JSON文字列なら配列に戻せます。とのことですが、どのようにJSON文字列に加工すればよいのでしょうか。ご教示いただけますと幸いです。よろしくお願いします。

m.ts10806

2021/10/09 05:45

JSON.Stringify と先に書いてます。

pyamathon

2021/10/13 01:55

ご返信ありがとうございました。自分ではどうしようもなかったですがほかの方にご助言いただき完成しました。ありがとうございました。

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

回答1件

ベストアンサー

フォームで送信したい値があるが、ユーザには表示する必要がないときは、<input type="hidden">が使えます。

例えば次のような感じのコードになるかと思います。

JavaScript
1var ans = [[1,0],[3,1],[5,0]];
2var ans_text = JSON.stringify(ans)
3text = '<form action="formtest2.cgi" method="POST">';
4text += '<input id="answer" name="answer" type="hidden" value="' + ans_text + '">';
5text += '<input type="submit" name="submit" value="送信"></form>';
6