javascript - HTML+JS/jQuery: 要素の値をフォームアクション文字列に追加する方法はありますか?

okwaves2024-01-25  11

私は JavaScript、HTML、jQuery の初心者です。バックエンド オブジェクトがフロントエンドに送信され、ループによってテーブルにオブジェクトが表示されます。これを実現するために、thymeleaf と Java を使用しています。

これが完了すると、各オブジェクトの更新フォームがモーダル/ポップアップとして作成され、リスト上のループによって入力されたフィールドに基づいて jQuery で入力フィールドが設定されます。それはコードを見ればわかります。モーダルのバックエンド オブジェクトにアクセスできないため、フロントエンドのデータにアクセスする必要があります。

オブジェクトの ID 値を正常に取得し、非表示の入力「thepostid」を正常に設定しました。その値に。私のジレンマは、アクション フィールドの update/ の後にこの要素の値を追加するにはどうすればよいでしょうか?

編集: これについて言及しなければなりません単純に非表示の入力フィールドを使用してバックエンドで取得できることはわかっていますが、これを行う新しい方法を学びたいと考えています。

<form class="forms-sample" id="formm" method="POST"
        enctype="multipart/form-data" action="/dashboard/showposts/update/"+ <-//HOW TO APPEND VALUE HERE?
          <input type="hidden" id="thepostid" name="thepostid">
     ////
function update(id) {

let _id=id.split("-").pop()
let rowid=`row-${_id}`;
let postid=`post-${_id}`;
let imageid=`image-${_id}`;

console.log(rowid);

let row=$("#"+rowid);
let postvalue=$("#"+postid).val();
let image=$("#"+imageid).val();

const title=row.find("td:eq(1)").text();
const tags=row.find("td:eq(4)").text();
const thepostid=row.find("td:eq(0)").text();

$("#title").val(title);
$("#tags").val(tags);
$("#content").val(postvalue);
$("#filename").val(image);
$("#thepostid").val(thepostid);

$("#mysimpleModal").css("display","block")
}

2

これであなたの質問は解決しましたか?属性 jquery

– カルロス1232

2020 年 9 月 4 日 19:00

そうではありません。属性ではなく値を追加したいのです。

– helloApp

2020 年 9 月 4 日 19:01



------------------------

Carlos1232 がコメントで提案したように、jQuery の属性取得/設定メソッド .attr() を使用します。これが機能するのは、フォームのアクションが属性であるためです。

たとえば、文字列「foo」をフォームのアクションに追加するには、次のようにします。

// <form action="example.com/">
const newPartToAdd = 'foo';
const originalUrl = $('form').attr('action');
$('form').attr('action', originalUrl + newPartToAdd);
// <form action="example.com/foo">

フォームが送信されると、その文字列内の新しいデータが URL の一部として渡されます。おそらく、ページから抽出したデータを含む実際の文字列を使用したいと思われますが、どちらの場合でも原則は同じです。

ただし、ここで実際に探しているのは、組み込みブラウザー メソッド (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)。あるいは、jQuery を使い続けるには、ajax、get、post などのメソッドをチェックしてください。

これらを使用すると、任意のデータを使用してリクエストを行うことができます。そのためにフォームを使用する必要はありません。

2

非常に素晴らしい回答です。ありがとうございます。Carlos1232 の回答がこれを示しているとは知りませんでした。前述したように、私はフロントエンドに慣れていません。ID を追加した後、すべてが期待どおりに機能するようになりました。私の回答にも賛成票を投じていただけますか?質問?

– helloApp

2020 年 9 月 4 日 19:14

へえ、お役に立ててうれしいです。でも、ここで賛成票を求めるのが良いエチケットかどうかわかりません :) 当然の質問だったので、質問させていただきました .. .しかし、将来的には、それが自然に起こるようにするかもしれません。

– マシンゴースト

2020 年 9 月 4 日 19:34

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。