2017-01-24 6 views
0

私は、「事件の証人がいましたか?」という質問に関連して、「はい」と「いいえ」の2つのオプションをドロップダウンしています。オプション 'yes'を選択すると、さらに2つの質問が表示され、オプション値はphp値に保存され、 'no'の場合は2つの質問が非表示になります。ページがリフレッシュされたとき、またはフォームが送信されたときに読み込みがうまくいくが、オプションが「はい」に設定されているときに2つの質問が非表示になり、ドロップダウンが「いいえ」に設定され、再び。私が探しているのは、「はい」に設定されていて、ページがドロップダウンをリロードしたときにフォームがサブミットされていて、「はい」(すでに動作しています)に設定されていて、オンロードはdivを表示に設定しますか?

ありがとう、 Matt。

$(window).on("load", function() { 
 
    $(function() { 
 
    $('select[name="a18"]').change(function(e) { 
 
     $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
 
    }); 
 
    }); 
 
    var witness = '<?php echo $A18 ?>'; 
 
});
p { 
 
    margin: 0; 
 
    font-size: 16px; 
 
} 
 
textarea { 
 
    overflow: hidden; 
 
    resize: none; 
 
    border: none; 
 
    overflow: auto; 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    height: 40px; 
 
    width: 98%; 
 
    margin: 0; 
 
    background: #fff; 
 
} 
 
.dropDown { 
 
    width: 99.5%; 
 
    height: 46px; 
 
    margin: 0; 
 
    border: none; 
 
    background: none; 
 
} 
 
#irMain { 
 
    background-color: #ddebf7; 
 
    border-top: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
#irMainWitness { 
 
    background-color: #ddebf7; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 30px; 
 
    display: none; 
 
} 
 
#irQMainWitness { 
 
    background-color: #FFF; 
 
    border-top: 2px solid #000; 
 
    border-bottom: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 50px; 
 
    display: none; 
 
} 
 
#irBottomWitness { 
 
    background-color: #FFF; 
 
    border: 2px solid #000; 
 
    height: 50px; 
 
    margin: 0; 
 
    display: none; 
 
} 
 
#irQMainDD { 
 
    background-color: #FFF; 
 
    border-top: 2px solid #000; 
 
    border-bottom: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 50px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="irMain"> 
 
    <p>Was there a Witness to the Incident?:</p> 
 
</div> 
 

 
<div id="irQMainDD"> 
 
    <select name="a18" class="dropDown"> 
 
    <option value="No">No</option> 
 
    <option value="Yes">Yes</option> 
 
    </select> 
 
</div> 
 

 
<div id="irMainWitness"> 
 
    <p>Name of Witness:</p> 
 
</div> 
 

 
<div id="irQMainWitness"> 
 
    <textarea name="a19" cols="1" rows="2"> 
 
    </textarea> 
 
</div> 
 

 
<div id="irMainWitness"> 
 
    <p>Contact Number of Witness:</p> 
 
</div> 
 

 
<div id="irBottomWitness"> 
 
    <textarea name="a20" cols="1" rows="2"> 
 
    </textarea> 
 
</div>

UPDATE 1:

変数 '証人は' 提出フォーム上のオプション値に設定されています。

コード(まだ動作していない):

<script> 
    $(window).on("load", function() { 
     $(function() { 
      $('select[name="a18"]').change(function(e) { 
      $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
      }); 
     }); 

     witness = "<?php echo $savedA18 ;?>"; 

     if (witness == "Yes"){ 
      $('select[name="a18"]').val("Yes"); 
      $('select[name="a18"]').triggerHandler("change"); 
     } 
    }); 
    </script> 

出力:

$(window).on("load", function() { 
     $(function() { 
      $('select[name="a18"]').change(function(e) { 
      $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
      }); 
     }); 

     witness = "Yes"; 

     if (witness == "Yes"){ 
      $('select[name="a18"]').val("Yes"); 
      $('select[name="a18"]').triggerHandler("change"); 
     } 
    }); 
+0

フォーム送信時に全面的に更新する必要がありますか?現代のほとんどのアプリケーションは、XHR経由で提出し、既存のページの内容を更新します。//あなたの関数* /})。change(); –

+0

$( 'select [name = "a18"]')。 – epascarello

答えて

0

が手動で[はい]に値を設定したコードの後に​​変更イベントをトリガすることができます。

$('select[name="a18"]').triggerHandler("change"); 

$(window).on("load", function() { 
 
    
 
    $('select[name="a18"]').val("Yes"); 
 
    $(function() { 
 
    $('select[name="a18"]').change(function(e) { 
 
     $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
 
    }); 
 
    }); 
 
    var witness = '<?php echo $A18 ?>'; 
 
    
 
    // set the value on onload 
 
    
 
    $('select[name="a18"]').val("Yes"); 
 
    
 
    $('select[name="a18"]').triggerHandler("change"); 
 
    
 
    
 
    
 
});
p { 
 
    margin: 0; 
 
    font-size: 16px; 
 
} 
 
textarea { 
 
    overflow: hidden; 
 
    resize: none; 
 
    border: none; 
 
    overflow: auto; 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    height: 40px; 
 
    width: 98%; 
 
    margin: 0; 
 
    background: #fff; 
 
} 
 
.dropDown { 
 
    width: 99.5%; 
 
    height: 46px; 
 
    margin: 0; 
 
    border: none; 
 
    background: none; 
 
} 
 
#irMain { 
 
    background-color: #ddebf7; 
 
    border-top: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
#irMainWitness { 
 
    background-color: #ddebf7; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 30px; 
 
    display: none; 
 
} 
 
#irQMainWitness { 
 
    background-color: #FFF; 
 
    border-top: 2px solid #000; 
 
    border-bottom: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 50px; 
 
    display: none; 
 
} 
 
#irBottomWitness { 
 
    background-color: #FFF; 
 
    border: 2px solid #000; 
 
    height: 50px; 
 
    margin: 0; 
 
    display: none; 
 
} 
 
#irQMainDD { 
 
    background-color: #FFF; 
 
    border-top: 2px solid #000; 
 
    border-bottom: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 50px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="irMain"> 
 
    <p>Was there a Witness to the Incident?:</p> 
 
</div> 
 

 
<div id="irQMainDD"> 
 
    <select name="a18" class="dropDown"> 
 
    <option value="No">No</option> 
 
    <option value="Yes">Yes</option> 
 
    </select> 
 
</div> 
 

 
<div id="irMainWitness"> 
 
    <p>Name of Witness:</p> 
 
</div> 
 

 
<div id="irQMainWitness"> 
 
    <textarea name="a19" cols="1" rows="2"> 
 
    </textarea> 
 
</div> 
 

 
<div id="irMainWitness"> 
 
    <p>Contact Number of Witness:</p> 
 
</div> 
 

 
<div id="irBottomWitness"> 
 
    <textarea name="a20" cols="1" rows="2"> 
 
    </textarea> 
 
</div>

+0

こんにちは、私はちょうどオプションはいが選択されているときだけでなく、私は多分私の保存された値を使用し、それを設定すると思ったが、私はしなかった私がまだ計画していたように機能していないので、エラーメッセージも表示されません。何か案が? –

+0

@MattHutchページを保存して更新するときに、ページの読み込み時に値をYesに設定する方法はありますか? – Deep

+0

SQLデータベースを使用して、私はPHPエコーを使用してチェックし、完璧に出力していたので、これは問題ではないと確信しています。 –

0

以下のような何かをし、質問のdivを切り替えると、ページの読み込みにそれを呼び出すと、いつでも変更をドロップダウン、それを呼び出す関数を作成します。

$(document).ready(function(){ 
    var witness = '<?php echo $A18 ?>'; 
    $.toggleQuestions = function(drpDown){  
    $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle(drpDown.val() == 'Yes'); 
    }; 

    $('select[name="a18"]').on("change", function(e) { 
    $.toggleQuestions($(this)); 
    }); 

    $(window).on("load", function() { 
    $.toggleQuestions($('select[name="a18"]')); 
    }); 

}); 
0

あなたはこの変更することができます:最初の1だけ隠し、これらのバックは表示されませんので

$('select[name="a18"]').change(function(e) { 
    $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle(); 
}); 

:これまで

$('select[name="a18"]').change(function(e) { 
    $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
}); 

を。

関連する問題