railsアプリでフォーム画面の中に、コピーボタンを用意したい

Question

前提

rails6を使用し、アプリを作成しています。
フォームを使い、ユーザからの入力をDBに保存する機能を作成しました(new.html.erb)。フォーム内にWEBページのURLを入力してもらうフォーム領域(f.label :urlの部分です)があるのですが、初めて見た方にも利用しやすいように、URLの例を記載し、それをボタンひとつでコピーし貼り付けられるようにすることで、フォームへの入力をスムーズに行えるようにしたいです。

知りたいこと

フォーム内に作成したクリップボードへのコピーボタンを用意しクリックしても、HTTPリクエストが発行されない方法が知りたいです。

疑問点

以下のソースでは、ボタンをクリックすることでクリップボードに値をコピーする機能の実現に成功したのですが、ここで1つ大きな問題が発生しました。クリップボードへのコピーがボタンであり、HTTPメソッドと認識されるため、フォームが不完全である場合に、コピーボタンを押すと、Postコントローラーに記載したcreateアクションが呼ばれてしまい、エラーが発生します。
私はクリップボードへのコピーを行いたいだけなので、クリップボードへのコピーを押しただけで、HTTPリクエストが発行されるのは、困ります。

• new.html.erb

<%= form_for(@post) do |f| %>
<%= render "shared/error_messages_posts" %>

<div class="form-group">
  <%= f.label :content, "content" %>
  <p><%= f.text_field :content, class: "form-control" %></p>
</div>

<div class="form-group">
<%= f.label :url, "URL" %>
<%= f.text_field :youtube_url, class: "form-control" %>
</div>

<!-- コピー対象要素とコピーボタン -->
<input id="copyTarget" type="text" style="width:100%; box-sizing:border-box" value="https://www.example.com" readonly>
<button onclick="copyToClipboard()">コピー</button>

<!-- bodyタグ内の下部に以下を入力する -->
<script>
function copyToClipboard() {
// コピー対象をJavaScript上で変数として定義する
var copyTarget = document.getElementById("copyTarget");

// コピー対象のテキストを選択する
copyTarget.select();

// 選択しているテキストをクリップボードにコピーする
document.execCommand("Copy");

}
</script>

<div class="form-group">
<p><%= f.submit "作成完了", class: "btn btn-primary" %></p>
</div>
<% end %>

</div>
</div>
</div>

• schema.rb

  create_table "posts", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t|
    t.text "content"
    t.text "url"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

バージョン情報

• Rails 6.0.2.2
• Ruby 6.2.3

Answer 1

以下のように button から input に変えても同様でしょうか？

<input type="button" value="コピー" onclick="copyToClipboard()">

Comments

[T.Adams]

大変助かりました。ありがとうございます。