いつもお世話になっております。
###前提・実現したいこと
block
内に2つのselectbox
があり、
セレクトボックスでoption
を選択→「入力」ボタンを押すと
セレクトボックス下の「URL」テキスト部分に、選択したoption
のvalue
が入力される
###問題
下記ソースコードにて実装しようとしたのですが、
ページを読み込んで【URL01】のselectbox
のoption
を変え、
「入力」を押す選択したoptionも初期に戻り、URL欄に入力もされません。(ページが更新されてしまう?)
1度上記の動作をし、初期化されてから、【URL01】を変更すれば、希望の動作をいたします。
しかし、一度【URL01】で希望の動作をし、その後【URL02】で同様の動作をしようとすると、初めと同じように初期化されてしまいます。
http://wp2.trojanbear.net/1780.html
おそらく上記サイト様の件が原因で、inputにすると動くのですが、
buttonタグでの実装方法はないでしょうか。。。
###該当のソースコード
javascript
1$(function() { 2 $('[name=inputBtn01]').click(function () { 3 var linkselect01 = $('[name=item01_url]').val(); 4 if(linkselect01 == ""){ 5 alert('自動入力する内容を選択してください。'); 6 }else if(linkselect01 !== ""){ 7 alert('【' + linkselect01 + '】 のURLを入力しました') 8 $("#url").val(linkselect01); 9 } 10 }); 11 $('[name=inputBtn02]').click(function () { 12 var linkselect02 = $('[name=item02_url]').val(); 13 if(linkselect02 == ""){ 14 alert('自動入力する内容を選択してください。'); 15 }else if(linkselect02 !== ""){ 16 alert('【' + linkselect02 + '】 のURLを入力しました') 17 $("#url").val(linkselect02); 18 } 19 }); 20});
html
1<div> 2<select name="item01_url" id="item01_url" class=""> 3 <option value=""> 【URL01】 </option> 4 <option value="http://www.google.co.jp"> Google-1 </option> 5 <option value="http://www.yahoo.co.jp"> yahoo-1 </option> 6 <option value="https://teratail.com"> teratail-1 </option> 7</select> 8<form action="#"> 9 <button type="submit" class="btn btn_primary" id="" value="" name="inputBtn01">入力</button> 10</form> 11<br> 12<select name="item02_url" id="item02_url" class=""> 13 <option value=""> 【URL02】 </option> 14 <option value="http://www.google.co.jp"> Google-2 </option> 15 <option value="http://www.yahoo.co.jp"> yahoo-2 </option> 16 <option value="https://teratail.com"> teratail-2 </option> 17</select> 18<form action="#"> 19 <button type="submit" class="btn btn_primary" id="" value="" name="inputBtn02">入力</button> 20</form> 21<br> 22 23<strong>URL</strong> 24<input type="text" class="form-parts" name="url" id="url" value=""> 25</div> 26
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/16 04:21