textareaのformに入力した文章をPOSTできない

Question

htmlファイルのformに文章を入力後、送信ボタンを押下してからポップアップで「ご意見ありがとうございました」と表示してから、insert_opinion();を実行し、opinion.phpに渡された入力内容をDBに格納するようなコードを書いています。

main.php

・
・
・
・

<script>
        function insert_opinion() {
            got_opinion = document.form.opinion.value;
            console.log(got_opinion);
                       
            $.ajax({
                url: "opinion.php",
                type: "POST",
                //processData: false,//Uncaught TypeError: Illegal invocation が出ないようにするために
                dataType: "text",
                data: {
                    "opinion" : got_opinion
                },
            }).done(function(data){
                console.log("opinion_DB通信完了_PUT");
                console.log(data);
            }).fail(function(data){
                console.log("opinion_DB通信失敗_PUT");
                console.log(data);
            });
            
        };
    </script>
・
・
・
・

<form　method="POST" action="opinion.php">
    
    <textarea name="opinion" cols="30" rows="5"></textarea>
    <p><input type="submit" value="送信する" onclick="alert('ご意見ありがとうございました');insert_opinion();"></p>
    </form>
・
・
・
・

chromeの開発ツールのコンソールには
main.php?opinion=にし:25 Uncaught TypeError: Cannot read property 'opinion' of undefined
at insert_opinion (main.php?opinion=:25)
at HTMLInputElement.onclick (main.php?opinion=:124)
と表示されます。
(main.php?opinion=***:25)は、

got_opinion = document.form.opinion.value;

で
(main.php?opinion=***:124)は、

<p><input type="submit" value="送信する" onclick="alert('ご意見ありがとうございました');insert_opinion();"></p>

の箇所です。

無事にエラーが出ないようにする方法がお分かりになりましたら、ご教示の程よろしくお願いいたします。

opinion.phpを追加しました

<?php
ini_set('display_errors',1);
session_start();

require 'database.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $login_user_info = $_SESSION['login_user'];
    $login_user = $login_user_info['user_name'];
    $opinion = $_POST['opinion'];
    
    try{
        $pdo = connect();
        $stmt2 = $pdo->prepare("UPDATE User3 SET opinion = '$opinion' WHERE user_name = '$login_user'");
        $stmt2->execute();
    }catch(PDOException $e){
        echo $e->getMessage()." - ".$e->getLine().PHP_EOL;
    }
}
sleep(3);
header( "Location: https://*******/main.php" ) ;
exit ;
?>

Comments

[yoorwm]

formは1つだけと決まっていないので、document.form.opinionという事はopinionという名前のformを指す事になると思いますが用意してありますか？

[hiro-chan]

回答ありがとうございます。
用意しておりません。<form>にname="opinion"を加えても、エラーのままです。
textereaの入力内容をPOSTしたいので、document.textarea.opinion.valueにしてもエラーのままです。。。

[yoorwm]

document.textareaというのは無いでしょうね
ドキュメント読むのが一番ではありますが、開発者ツールを開いて、Consoleなんかでdocument.formとか打ちこんでみるのが手軽ですね

[yoorwm]

あぁ。その前にjQuery使ってるのなら、jQuery使う方がいいでしょう。
（混ぜると理解が半端になります）

[m.ts10806]

opinion.php のコードはどこでしょうか。

[hiro-chan]

opinion.phpを追加しました

[m.ts10806]

なぜ、Ajaxでheader()によるリダイレクトを入れているのでしょうか。

[hiro-chan]

opinion.phpに遷移してしまうので、そこから元のページに戻るために入れました。
本当は、ページ遷移はしたくないのですが、どういうコードがスマートかわからず。。。

[m.ts10806]

Ajaxは非同期通信なのでそもそも「画面遷移」という考え方はないです。
呼び出された元に出力を返すだけです。
type="submit"にしているのにsubmitイベント自身を止めてないのが問題なので。

[hiro-chan]

回答ありがとうございます。
下のベストアンサーにさせてもらいましたユーザ様の回答に追記した内容のとおり、無事にポップアップ後にform内容をpostできました。
助けていただき大変感謝いたします。
またご縁がございましたらよろしくお願いいたします

[m.ts10806]

type=button にしたらいい話ではと。

Answer 1

「processData: false」は指定しないということでよろしいですか？
postなら普通は、processData:false,contentType: false,を指定して
formDataで送ります

Comments

[yambejp]

あと、submitにonclick処理するのはやめたほうがよいでしょう
バックグラウンドで処理するならイベントを殺してから
$ajaxを実行してください

[yambejp]

あー、もしかして
formタグのformの後ろの全角スペースが悪さしているかも

[hiro-chan]

スペース等見直すとうまくいきました。ありがとうございます。
「バックグラウンドで処理するならイベントを殺してから」→この部分はどのようなコーディングになりますでしょうか？よろしくお願いいたします

[hiro-chan]

追記です。
main.phpで
<form name="opinion" action="#">
<textarea id="opinion_contents" name="opinion" cols="30" rows="5"></textarea>
</form>
<button id="opinion">アイデアを送信</button>
に変更し、javascriptのほうで、
$('#opinion').click(function(){
function insert_opinion() {
alert('ご意見ありがとうございました');
got_opinion = document.forms.opinion.opinion_contents.value;
$.ajax({
url: "opinion.php",
type: "POST",
dataType: "text",
data: {
"opinion" : got_opinion
},
}).done(function(data){
console.log("opinion_DB通信完了_PUT");
console.log(data);
}).fail(function(data){
console.log("opinion_DB通信失敗_PUT");
console.log(data);
});
};
insert_opinion();
});
に変更することで、ボタンクリック後にpoppup表示とajaxでpostができました。
尚、opinion.phpに元々書いていた
sleep(3);
header( "Location: https://*****/main.php" ) ;
exit ;
も消しました。
これで問題なくポップアップ後にデータform入力内容をpostできました。