札幌Web制作のシンクグラフィカ

data属性の値を取得したい

Shinさん (2020-05-13 14:29:15) cell.coresv.com/order/

設置URLにてMailformPro 4を使わせていただいております。

設置URLは商品を選択した後の注文者情報などを入力するページへ移動しておりますが、

配送先が異なった場合のために配送先欄を設けており、便利機能として注文者情報を

コピーできるようにswitching.jsにてコピー処理をいれております。

これに、お届け先の都道府県が読み込ま羅多際に配送料をを【配送料金欄】に表示

させたいのですがうまくいきません。

data属性を各都道府県に設置して試みたのですがエラーになってしまいます。

苦肉の策として都道府県のvalueに配送料金を入れたのですが、その場合は当然

郵便番号による住所自動表示が使えません。

何か対処方法はありませんでしょうか。

宜しくお願いいたします。

こちらの環境からはうまく動いているっぽいですが

和田憲幸 (2020-05-13 22:24:26) www.synck.com

すでに問題は解決されましたでしょうか?

Re data属性の値を取得したい

Shinさん (2020-05-13 23:28:16) cell.coresv.com/order/

配送料金欄に金額が表示されないままです。
今は都道府県のvalueを表示しているだけで、一度は郵便番号からの住所自動表示を諦め、都道府県のvalueに送料を入れた際のなごりです。
valueに、東京都:770円などとして配送料金を表示していたので、郵便番号の都道府県とマッチせずに自動表示がされない状態になりました。
そこで、郵便番号からの住所表示は通常のアドオンを使い、配送料金表示はdata属性を使うなどで実現できないものかと思い、ご相談させていただきました。

deliv_priceという関数が見つかりませんが

和田憲幸 (2020-05-13 23:48:30) www.synck.com

deliv_priceという関数はどちらに記述されておりますでしょうか?
また、都道府県のvalueを変更している場合は郵便番号からの辞書は正常に動作しません。
独自属性を利用してできなくはないと思いますが、結構難度は高いと思います。

Re2 data属性の値を取得したい

Shinさん (2020-05-14 08:21:57) cell.coresv.com/order/

すみません。

switching.jsの中に現状は苦肉の策として記述しております(誤って消してしまっていたのでアップしなおしました)。

if(mfp.$(’copyData’).checked){
document.getElementById(’deliv_price’).value=document.getElementById(’order_address1’).value;
}else{
document.getElementById(’deliv_price’).value=document.getElementById(’deliv_address1’).value;
}

本当は、
if(mfp.$(’’).selected){
document.getElementById(’deliv_price’).value=document.getElementById(’order_address1’).options.selected.data(’shipping’);
}else{
document.getElementById(’deliv_price’).value=document.getElementById(’deliv_address1’).options.selected.data(’shipping’);
}
こんな感じにしたいところです。

何度もすみません。
よろしくお願いいたします。

こういう感じだとどうでしょうか

和田憲幸 (2020-05-14 09:30:31) www.synck.com

var obj = document.getElementById(’order_address1’);
document.getElementById(’deliv_price’).value = obj.options[obj.selectedIndex].getAttribute(’data-shipping’);

Re3 data属性の値を取得したい

Shinさん (2020-05-14 10:16:40) cell.coresv.com/order/

ご回答いただきありがとうございます。
注文情報の住所をコピーした場合はOKでした。
しかし、配送先が異なった場合用に以下のように書いてみたのですが
ifの部分にてundefinedになってしまいます。

var obj1 = document.getElementById(’order_address1’);
var obj2 = document.getElementById(’deliv_address1’);
if(mfp.$(’copyData’).obj1.options.selectedIndex){
document.getElementById(’deliv_price’).value = obj1.options[obj1.selectedIndex].getAttribute(’data-shipping’);
}else{
document.getElementById(’deliv_price’).value = obj2.options[obj2.selectedIndex].getAttribute(’data-shipping’);
}

これ、注文者情報と配送先情報の順番を逆にして、data-shippngは先に書かれている配送先情報
しか使わないようにするしかないでしょうか。

何度もお手数をお掛け致します。
よろしくお願いいたします。

チェックボックスを利用するのはどうでしょうか

和田憲幸 (2020-05-14 10:21:31) www.synck.com

if(mfp.$(’copyData’).obj1.options.selectedIndex)
の部分をコピーのチェックボックスのcheckedで判定するというのはどうでしょうか。コピーという形ではなく、配送先と購入者が異なる場合はチェックしてください。的なチェックボックスにすることでスマートになると思うのですが。

Re3 data属性の値を取得したい(お礼)

Shinさん (2020-05-14 11:39:11) cell.coresv.com/order/

おっしゃる通り、異なる場合のみご入力いただく方が圧倒的にシンプルですが、

そうなると注文者情報へのdata-price(支払い合計への加算用)と配送情報へのdata-price(同加算用)
が2つとも加算されてしまいますので、それに合わせた他のカスタマイズが必要になりそうです。

結果的に現状、先にお届け先情報を入力してもらい、そこで選択された都道府県のdata-shippingを
使って配送料金を表示し、その後でご請求先情報を入力してもらう方法にしました。

これであれば郵便番号から自動は使え、配送料金はお届け先にあるdata-priceから加算され、data-shippingを使って表示をさせることがかないました。

いろいろお世話をお掛け致しました。
ありがとうございます。


大したお役に立てずすいません・・・

和田憲幸 (2020-05-14 12:28:37) www.synck.com

無事解決したようでなによりです。また何かあればご相談ください。

先日はありがとうございました。もう1つ。。。

Shinさん (2020-05-16 19:53:50) cell.coresv.com/order/

結果的に、こんなふうにしてやりたいことはできたのですが。。。
function shipping(){
var obj = document.getElementById(’shipping_address1’);
document.getElementById(’shipping_price’).value = obj.options[obj.selectedIndex].getAttribute(’data-shipping’);
}

function displayOn(){
if(mfp.$(’separate’).checked){
document.getElementById(’billing’).style.display = "block";
}else{
document.getElementById(’billing’).style.display = "none";
}
}

function sw(){
if(mfp.$(’same’).checked){
document.getElementById(’billing_name’).removeAttribute(’data-required’,’required’);
document.getElementById(’billing_kana’).removeAttribute(’data-required’,’required’);
document.getElementById(’billing_post’).removeAttribute(’data-required’,’required’);
document.getElementById(’billing_address1’).removeAttribute(’data-required’,’required’);
document.getElementById(’billing_address2’).removeAttribute(’data-required’,’required’);
document.getElementById(’billing_address3’).removeAttribute(’data-required’,’required’);
document.getElementById(’billing_tel’).removeAttribute(’data-required’,’required’);
}else if(mfp.$(’separate’).checked){
document.getElementById(’billing_name’).setAttribute(’data-required’,’required’);
document.getElementById(’billing_kana’).setAttribute(’data-required’,’required’);
document.getElementById(’billing_post’).setAttribute(’data-required’,’required’);
document.getElementById(’billing_address1’).setAttribute(’data-required’,’required’);
document.getElementById(’billing_address2’).setAttribute(’data-required’,’required’);
document.getElementById(’billing_address3’).setAttribute(’data-required’,’required’);
document.getElementById(’billing_tel’).setAttribute(’data-required’,’required’);
}
}

ラジオボタンの選択によっては請求情報の入力を隠し、逆では表示する。
そして表示された際には必須項目が必須になる。

これ、請求者情報の表示、非表示の切り替えは何度行っても問題は生じないのですが、
表示状態から先頭の名前の欄で何か入力をした後、それを消して非表示状態にすると
必須を認識したまま先に進めなくなります。

これって解消方法とかあるのでしょうか?

いろいろすみません。
よろしくお願いいたします。

入れ子の状態で必須が矛盾してしまうということですね

和田憲幸 (2020-05-17 10:20:23) www.synck.com

解決策はあると思うのですが、ややこしいので私も自分でつくってみないとなんとも言えません・・・。
toggle.js機能ではエレメントを下から評価していく仕組みになっているのでtoggle.jsの利用をお試しいただけるとうまく動作するかもしれません。

ありがとうございます。

Shinさん (2020-05-17 13:27:14) cell.coresv.com/order/

そうなのですね。
ありがとうございました。
一度見てみます。