javascriptで、送信ボタンの切り替えと部品の入力可能・付加の設定

javascriptで実現できるか教えてください。

イメージとしては、
検索項目をテキストボックスとラジオボタンで設定し「検索」ボタンを押すと、
「検索」ボタンが消えて、同じ場所に「再設定」というボタンが表示され
更に、テキストボックスとラジオボタンを入力・選択出来ないようにし、
「再設定」ボタンが押されると、同じ場所に「検索」ボタンが表示され
テキストボックスやラジオボタンの入力・選択も可能になるようにしたいです。

<form action="" method="post">
検索文字<input type="text" name="keyword"><br>
<input type="radio" name="disp_mode" value="1">表示モード1<br>
<input type="radio" name="disp_mode" value="2">表示モード2<br>
<input type="radio" name="disp_mode" value="3">表示モード3<br>
<input type="submit" value="検索">
</form>

ラジオボタンを入力出来なくするのは、何とかできそうなのですが、
「検索」ボタンと「再設定」ボタンを、同じ場所で切り替えるのがわかりません。
よろしくお願いいたします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2020/09/29 16:10

こんにちは

具体的な方法として思いつくのは、
・表示状態の異なるものを両方用意しておいて、それの表示/非表示を切替える
・それぞれの要素の状態を書き換える
あたりでしょうか。

＞ラジオボタンを入力出来なくするのは、何とかできそうなのですが、
＞「検索」ボタンと「再設定」ボタンを、同じ場所で切替えるのがわかりません。
ボタンだけでも同様です。
両方用意しておいて、表示/非表示を切替えても良いですし、「検索」と「再設定」の表示を変えるだけなら、input要素のvalue属性を書換えても済みますね。

以下一例です。
入力欄はdisableに、submitボタンは表示文字を書き換えるという方法です。

window.addEventListener('DOMContentLoaded', ()=>{
document.forms[0].addEventListener('submit', (e)=>{

const v = ['検索','再設定'], f = e.target;
let btn = f.querySelector('input[type="submit"]');
let n = (1 - v.indexOf(btn.value)) % 2;
e.preventDefault();
btn.value = v[n];
f.querySelectorAll('input').forEach((t)=>{
t.disabled = t!=btn && !!n;
});

});
});

この回答へのお礼

ありがとうございます!!
やりたいことが実現できました。
javascriptは難しくて、まだまだ勉強しなければ。
感謝いたします!

お礼日時：2020/09/30 22:01

No.1 回答者： lv4u 回答日時： 2020/09/29 06:23

JavaScriptで、ボタンとか入力欄を見せたり、隠したりと制御したいことありますね。

基本的には、見せたいとおもうボタンや入力欄をすべて記述しておき、その時の状態によって、それぞれを表示したり、隠したりする処理をJavaScriptで制御してあげるようにすれば可能です。以上。

この回答へのお礼

ありがとうございました。
javascriptは難しいですが、もっと勉強したいと思います。

お礼日時：2020/09/30 22:01