質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

MW WP FORM 土日だけ受付時間を変更したい

higashi
higashi

総合スコア10

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

1クリップ

272閲覧

投稿2022/11/18 05:35

編集2022/11/19 15:11

前提

歯医者のHPの予約フォームがあるのですが、土日だけ受付時間が異なります。
土日は平日より二時間、受付時間が短いです。
平日:9:00-13:00 14:30-20:00
土日:9:00-13:00 14:30-18:00

【MW WP FORM】内でDatepickerを使用して、土日だけは
受付時間を二時間短くするコードをjsで書いてみたのですが、結果は平日しか表示されず困っています。

実現したいこと

平日は
9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30,18:00,18:30,19:00,19:30 を表示させて

土日は
9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30 を表示させたいです。(,18:00,18:30,19:00,19:30が選択肢にない)

該当のソースコード

php

1<dt class="b_g"><span class="nini">任意</span>1希望日時</dt> 2<dd class="d_flex"> 3希望日 [mwform_text name="第1希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ] 4 時間 5[mwform_select name="第1希望日時間" class="form-child1" children=":希望時間を選択して下さい,9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30,18:00,18:30,19:00,19:30" post_raw="true"] 6</dd>

js

1jQuery(function($){ 2 3$("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい 4var fDate1 = $("input[name='第1希望日']").datepicker('getDate'); 5if (fDate1 !== null) { 6 fDate1 instanceof Date; 7 var youbi1 = fDate1.getDay(); /**********曜日を0から6の整数で取得**************/ 8} 9 if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/ 10 $('.form-child1').children.remove(":contains(',18:00,18:30,19:00,19:30')"); 11 } 12});

試したこと

.removeをつかえば、文字列から土日の時刻を削除できる!と思ってやってみたのですが、なかなか反映されずだめでした。


$('.form-child1').remove(":contains(,18:00,18:30,19:00,19:30)");

2
$('.form-child1').children.remove(":contains(',18:00,18:30,19:00,19:30')");

3
$('.form-child1')$('.children').remove(":contains(',18:00,18:30,19:00,19:30')");

補足情報(FW/ツールのバージョンなど)

WPバージョン 6.1.1

よろしくおねがいいたします

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

スマートではないと思うのですが、いただいたアドバイスも参考にして
曜日によって変動する時刻を .hide と .show をつかってなんとか実現できました。

wp

1<dt><span class="nini">任意</span>第1希望日時</dt> 2<dd class="d_flex"> 3希望日 [mwform_text name="第1希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ] 4 時間 5[mwform_select name="第1希望日時間" class="form-child1" children=":希望時間を選択して下さい,9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30,18:00,18:30,19:00,19:30" post_raw="true"] 6</dd> 7

js

1<script> 2 3jQuery(function($){ 4 5$("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい 6var fDate1 = $("input[name='第1希望日']").datepicker('getDate'); 7if (fDate1 !== null) { 8 fDate1 instanceof Date; 9 var youbi1 = fDate1.getDay(); /**********曜日を0から6の整数で取得**************/ 10} 11 if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/ 12 $('select.form-child1').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').hide(); 13 }else{ 14   $('select.form-child1').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').show(); 15 } 16}); 17});/****終了*****/ 18 19</script> 20 21

投稿2022/11/19 15:08

編集2022/11/19 15:11
higashi

総合スコア10

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

ベストアンサー

JavaScript や jQuery で操作する場合は、Webブラウザで HTMLがどのように表示されているのかを考えましょう。

おそらく

PHP

1<select name="第1希望日時間" class="form-child1"> 2<option value="" selected='selected'>希望時間を選択して下さい</option> 3<option value="9:00" >900</option> 4(以下略) 5</select>

のような感じではないでしょうか


上記のフォーム項目を jQuery で削除するなら select の option を削除することになるので、

$('select.form-child1').children('option[value=19:30]').remove();

のような感じでどうでしょうか。


コメントへの返信

追加する項目がすでにあるかを判断して追加処理するのが良いのではないでしょうか。
例:

if(!($('select.form-child1 option[value=19:30]').length())){ 項目がない場合の追加処理を書く }

投稿2022/11/18 13:36

編集2022/11/18 23:00
CHERRY

総合スコア24701

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

higashi

2022/11/18 15:17

CHERRY様 ご回答ありがとうございました。 まさに、私が思っていた形になりました。 PHP <dt class="b_g"><span class="nini">任意</span>第1希望日時</dt> <dd class="d_flex"> 希望日 <input type="text" name="第1希望日" size="15" value="" placeholder="希望日を選択して下さい" /> 時間 <select name="第1希望日時間" class="form-child1"> <option value="" selected='selected'>希望時間を選択して下さい</option> <option value="9:00" >9:00</option> <option value="9:30" >9:30</option> <option value="10:00" >10:00</option> <option value="10:30" >10:30</option> <option value="11:00" >11:00</option> <option value="11:30" >11:30</option> <option value="12:00" >12:00</option> <option value="12:30" >12:30</option> <option value="14:30" >14:30</option> <option value="15:00" >15:00</option> <option value="15:30" >15:30</option> <option value="16:00" >16:00</option> <option value="16:30" >16:30</option> <option value="17:00" >17:00</option> <option value="17:30" >17:30</option> <option value="18:00" >18:00</option> <option value="18:30" >18:30</option> <option value="19:00" >19:00</option> <option value="19:30" >19:30</option> </select> </dd> js jQuery(function($){ $("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい var fDate1 = $("input[name='第1希望日']").datepicker('getDate'); if (fDate1 !== null) { fDate1 instanceof Date; var youbi1 = fDate1.getDay(); } if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/ $('select.form-child1').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').remove(); } }); }); ただ、いざ設定してみたところヌケがありまして、 土曜か日曜を選択したあとに、平日を選択しなおすとremoveで取り除いた時間が出てこない という私的(jsをあまり分かっていない)には想定外の結果でした。 .append というのをつかって時刻を付け加える というのを考えたのですが、平日を何回もクリックすると無限に増えてしまうし、どうしようかと思っています。 それなら、removeはやめて 平日はこの時刻のセット(9:00~19:30) 土日はこの時刻のセット(9:00~17:30) という形で表示するのがベストなのかと思ったのですが、phpへの挿入(表示)方法が探しきれませんでした。 なにか上記以外でも良い方法があったらご教授いただけたら助かります。 よろしくおねがいいたします
higashi

2022/11/19 15:04

CHERRYさま 貴重なアドバイスとヒントをありがとうございました。 ただ、私にはいただいたアドバイスが理解できず、違う方法を探して自分なりに見つけて無事解決することができました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。