フォーム外からボタン操作をしたい。

解決済

質問者：なごやんやん
質問日時：2017/03/27 14:58
回答数：2件

いつもお世話になっております。
フォーム外に設置したボタンでフォーム内容を送信したいです。

まず、以下の環境で作成しています。
VisualStudio2015
MVC5

そして以下のような画面を作成しております。

<input type=”submit” id=”sample” name=”sample” value=”送信” />

//他のフォーム等を設置

@using (Html.BeginForm(”アクション名”,”コントローラー名”))
{
　　　//一覧等表示
　　　｝

上記のような状況で、上のボタンを押すことで下のフォームの内容を送信したいです。
ID指定やFormsetを試しましたが、望んだ挙動になりませんでした。

お手数お掛けしますが、ご教授のほど、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2017/03/27 16:10

全てのブラウザがjavascriptを利用できるとは限りません。

またテキストブラウザもありますから、あくまで
<form action="">
<input type="submit">
</form>
の構造は変えません。変えてはなりません。
　そして、スタイルシートでのプレゼンテーションを変えればよい。
文書構造とプレゼンテーションは分けて考えましょう。

★サンプル
　タブは＿に置換してあるので戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<form action="./" >
＿＿＿<table border="1">
＿＿＿＿<tr>
＿＿＿＿＿<th>名前</th><td><input type="text" size="10" name="name"></td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>住所</th><td><input type="text" size="20" name="address"></td>
＿＿＿＿<tr>
＿＿＿</table>
＿＿＿<input type="submit" value="送信">
＿＿</form>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

望む動作が出来ました。
スタイルシートによる配置の操作が苦手な為、もっと勉強していきたいと思います。

通報する

お礼日時：2017/03/28 09:49

No.1

回答者： t_fumiaki
回答日時：2017/03/27 15:52

1案ですが、JavaScriptとhtmlでやれば可能だと思います。

ボタンが押されたら、JavaScriptを実行する。
(onclickでJavaScriptを実行)

例えば以下（適当なフォームですが）

<form id = "test">
<button onclick = "load1();">実行</button>←form釦は無くて良いと思う。
<p>
名前：<input type="text" name="name" size="40">
</p>
<p>
性別：<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</p>
<p>
ご感想：<br>
<textarea name="kanso" rows="4" cols="40"></textarea>
</p>
</form>
<br />
<br />
<br />
<button onclick = "load1();" form = "test">実行</button>←form外ボタン

load1()はJavaScript
function load1(){・・・・・・}