• ベストアンサー

テキスト入力フォームの値を画面遷移なしで関数に渡す。

<form>によるテキスト入力フォームに入力されている値を、javascript関数に渡したいと思います。 ページ遷移させずに渡す方法はありますでしょうか? onclickで関数を呼び出しても、ページが再読込されてしまいます。 <a href="javascript:xxxxxx">で関数を呼び出して、ページ遷移なしで、値を渡すことはできました。 これと同様の効果を、テキスト入力フォームでも行いたいと思っています。 お分かりの方がいらっしゃいましたら、お教え願いたいと思います。 よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

どのタイミングでわたしたいのかによります。 なにかボタンを押したときであれば以下のような感じで・・・ <form> <p> <input type="text" name="hoge"> <input type="button" value="hoge" onclick="alert(this.form.elements['hoge'].value)"> </p> </form>

yamaps
質問者

お礼

>yambejp様 今回も御回答ありがとうございます。 以前も回答頂きお世話になったことを記憶しております。 form.elementsで入力フォームの内容を取得できるというのは良いことを聞きました。 問題は解決しそうです。 ありがとうございました。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

>テキスト入力フォームでも行いたいと思っています テキストフィールドにonclickを設定すると大変使いにくくなります。(やってみればわかりますが) submitをキャンセルしたければ、false値を返せばキャンセルできます。 <html> <script language="JavaScript"> function hoge(el){alert("入力値=" + el.value);} function fuga(){ if (confirm("送信する?")) {return true;} else {return false;} } </script> <body > <form method="POST" action="xxx" onsubmit="return fuga()"> <input type="text" name="n1" onclick="hoge(this)"> <p> <input type="submit" value="送信" > <input type="reset" value="取消"> </form> </body> </html>

yamaps
質問者

お礼

>fujillin様 御回答ありがとうございました。 onsubmitでreturnを返せば送信されないことは初めて知りました。 ありがとうございます。 これでなんとか解決しそうです。

関連するQ&A

  • テキストフォームの未入力チェック

    お世話になります。 Javascriptでテキストフォームの入力チェックを行っております。 テキストフォームにはDBから取得した値が入っており、その値を変更して更新できるプログラムを作ろうとしています。 テキストフォームが未入力だった場合に元の値を入れてPOSTリクエストを投げたいのですが方法が分かりません。 (よく見かける未入力だったらアラートを出すというのは出来るのですが・・・) 以下ソースの抜粋になります。 function check(){ for(i=0; i<document.iform1.length;i++){ if(document.form1.elements[i].value==""){ document.iform1.elements[i].valueに元の値を入れたい。 } } <form name="form1" action="updata.php" method="POST"> <input type="button" name ="save" value="更新" onClick="check()"> </form> 以上、ご教示よろしくお願いいたします。

  • strutsの画面遷移無しでtextの値をボタンで操作したいのですが・・・

    最近strutsを始めた者です。よろしくお願いします。 画面上でボタンを押すとtextに表示中の値に”さん”を付けて textに再表示(画面遷移ナシ)されるといった 動作をさせたいのですが上手くいきません。 javascriptの関数がおかしいとおもうのですが・・・ 以下にソースを付けますのでどなたかご教授願います。 <%@page contentType="text/html; charset=Shift_JIS" %> <%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %> <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %> <html:html locale="true" > <BODY> <html:form action="/HelloWorld" > <SCRIPT LANGUAGE=javascript> <!-- function addItem( obj1 ){ var txt = obj1; if ( txt.value == "" ) return; var test = txt.value + "さん"; obj1.value = test; } --> </SCRIPT> <bean:message key="greeting" /><BR> お名前をどうぞ。 <BR><html:text property="name" /><BR> <html:button property="button" value="textの値にさんをつける" onclick="addItem(this.form.name,);" /> </html:form> </BODY> </html:html>

  • テキスト入力フォームをクリックしなくてもアクティブに

    テキスト入力フォームをクリックしなくてもアクティブにするjavascriptを教えてください。 下のスクリプトの間違っている箇所がわかりません。 フォームタグの閉じる位置でしょうか。 <form name=frm> <input TYPE=TEXT SIZE=20> <input TYPE=Button VALUE="検索" onClick='alert("仮")'> </form> <script language=javascript> //<!-- document.frm.passch.focus(); //--> </script>

  • テキストエリアに入力したURLにアクセス

    タイトルのとおりなのですが、formタグ内のtextとbuttonを使った遷移をしたいのですがどうすればいいでしょうか。 例えば以下のサイトを考えます。 ​http://aaa.com​ そしてテキストフィールドにabcと入力すると​http://aaa.com/abc​に遷移 また、テキストフィールドにqweと入力すると​http://aaa.com/qwe​に遷移 こういった遷移は可能なのでしょうか? formのactionに指定してあげたいのですが、うまく想像ができません。 http://aaa.com/?word=abcのようなページではなく http://aaa.com/abc のように遷移したいのです。 JavaScriptを使うと思い調べているのですが、よいページが見つかりません。 どなたかご教授ください。。

  • テキストフィールドに入力した値の移動

    JavaScriptで、以下のことを実行したいのですが 初歩的なところでつまずいていて困っております。 --- フォーム[form1]内に、テキストフィールド[t1],[t2]と、 ボタン[btn]があります。 [t1]に文字を入力し、[btn]をクリックすると [t1]の値が[t2]に移動する --- *フレームは使っておりません。 簡単と思っていたのですが、 JavaScriptの基礎がわかっていないため 応用がきかなく固い頭のため困っています。 どうか宜しくお願いいたします。

  • フォームで送信ボタンを押した際に、Javascriptに入力した値が渡

    フォームで送信ボタンを押した際に、Javascriptに入力した値が渡せない タイトルそのままです。 ボタンを押したらJavascriptでフォームの値をとりたいのです 今は、 最初に取り込ませたいJavasprictをhead内に指定しておき、 <script language="JavaScript" src="/js/mc.js" type="text/javascript"></script> 本文中のformタグではは下文のようにしてあります。 <form id="form" name="ffform" action="#" method="post"> 送信用のボタンは画像で書き換えていて、ボタンを押すと、Javascriptの方で関数checkformを動かすようにしたいのです <input type="image" src="./img/submit.png" alt="送信" onclick="checkform()"> 実際に押してみても、ただ何も変化がなく、どうすればいいか困っています。どなたか教えてください actionのところにJavascriptを指定したら、Jsそのものを開いてしまいますし、cgiを置こうにも、今あるcgiは Javasprictからさらに値を渡す為にあるcgiだけなのです・・・・・・

    • ベストアンサー
    • HTML
  • テキストフォームのチェックについて

    テキストファームの内容チェックについて教えてください。 下記コードで取得したURLをテキストフォームに表示させ「onclick」でiframeに画面を表示させています。 これを、テキストファームが書き換わった段階で、実行することは できないでしょうか? (テキストフォーム内のURLが書き換わったら、その内容をチェック して、iframeにそのURLの画面を表示する) <html> <form name="f1"> URL:<input type="text" name="url" size="60" value="" /> <input type="button" value="このURLへ移動" onclick="target_name=***.location.href=this.form.url.value"> </form> <script type="text/javascript"> function set_latlng() { document.f1.url.value="http://***.***.****" /script> 以上、宜しくお願い致します。

  • 子ウィンドウ→親ウィンドウのテキストフォームでバックスラッシュは?

    子ウィンドウ内でリンクをクリックしたら、親ウィンドウのテキストフォームに値が入力される、というところで問題が起きました。 // *********子ウィンドウのソース********** // ---関数部分--- function fntext(val1){ if (window.opener){ // 引数のval1を親ウィンドウのテキストフォームに入れる window.opener.document.フォーム名.テキストフォーム名.value=val1; } } // ---リンク部分--- <a href="#" onclick="fntext('117680')">xxxx</a> で、fntext関数の引数に全角文字や数字や英字を入れた場合はまったく問題ないのですが '\\\\\'というバックスラッシュ(円マーク)を入れると、親ウィンドウのテキストフォームに 値が入力されません。(↓こんな感じだと入力されません) <a href="#" onclick="fntext('\\\\\')">xxxx</a> バックスラッシュを使用する場合は特別な方法があるのでしょうか? どうかお願いします。

  • フォームに入力された値をリンクに入れる

    ↓フォーム  ↓リンク |222-0033| 郵便番号検索 フォームに入力された値を郵便番号検索で http://www.benri.com/zipcode/ などのページに接続したいと考えております。 元のフォームに住所を入力するまでは不要です。 検索されたURLを検索してくれるだけでOKです。 リンクは <A HREF ="http://www.benri.com/zipcode/zipcode.cgi?keyword=???" onMouseOver="searchfor" > としました。 ???の部分をどうやって取得していいか困っています。 一応、マウスオーバーすると、下のjavascriptが起動するように作ってみました。 keyword = document.KIHON.post.value; が、ダメでした。 どうやったらリンクにフォームの値を渡すことができるでしょうか?

  • テキスト入力後、エンターを押すことで関数を実行するには

     formのtextエリアに値を入力し、その隣に配置したボタンでその値を利用した 関数を実行することはできます。しかし、誤ってtextエリアでエンターを押してしまうと、 入力値が消えて何かが実行されているようですが、何も起きません。  参考書などを見て、onchangeかonBlurでも使えばよいのかと思い試してみましたが、だめです。  textエリアでクリックすることで、その値を利用した関数を実行できる=隣のボタンを クリックすることと同様の動作を実現するにはどうしたらよいのでしょうか。 《サンプル》 <input type = "text" name="text"> <button onClick ="xxxx()"> 実行 </button>  ※上のtextのvalueを元に実行するのが下のボタンの"xxxx()"

専門家に質問してみよう