0

私はこの多目的スクリプトを持っています:

<script>
$( document ).bind( "pageinit", function( event, data ) {
    $("#ppreg").hide();
    $("#smsreg").hide();
    $("#UserName").hide();
    $(".group1").hide();
    $(".group2").hide();
    $(".group0").hide();

$('#selectcode').change(function() {
      var regtype = $("#selectcode option:selected").val();
        if (regtype == "@") {
          $("#ppreg").show();
          $("#smsreg").hide();
          $("#UserName").show();
          $(".group1").show();
          $(".group2").hide();
          $(".group0").show();          
        } else {
          $("#ppreg").hide();
          $("#smsreg").show();
          $("#UserName").show();
      $(".group2").show();
          $(".group1").hide();
          $(".group0").show();  
       }
 });
});
    </script>

スコープ 1: 選択した値に基づいて 2 つの異なるラベルを表示します スコープ 2: 国コードの選択後に他のすべてのフィールドを表示します

この形式では問題なく動作します:

 <label for="selectcode" class="select">LABEL"; 
 <select name="countrycode" id="selectcode" data-native-menu=\"true">
<option value="@">email (email field)</option>
    <option value="+39" >SMS:(+39)</option>
    </select>
<fieldset data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="false">"
    <legend>"._LOGIN."</legend>"

<div class="group0>"

<label for="UserName" id="smsreg" >Username1</label>
     <label for="UserName" id="ppreg" >Username 2</label>
     ---- A
    <input title="TITLE" type="text" name="UserName" value="" class="required"  id="UserName" data-clear-btn="true"  />"
     ----- //A
   <div class="group0">
   <label class="group0" for="Password">Password:</label>
   <input class="group0" type="password" name="Password"   value="" id="Password" data-clear-btn="true"  placeholder="Password" /> 
.. MORE FIELDS ..
<button id="login" type="submit" value="validate!" data-theme="b">LOGIN</button> 
   </div>

しかし、UserName の 2 つの異なる入力タイプ フィールド (tel または email) を取得するために上記の html (A) を変更すると、レイアウトは問題ないように見えますが、最初のオプション (tel) を選択すると、フォームは UserName に null 値を送信します。

     ----- A1
    <div class="group2">
    <input title="TITLE1" type="tel" name="UserName" value="" class="required group2"  id="UserName" data-clear-btn="true"  />"
    </div>
    <div class="group1">
    <input title="TITLE2" type="email" name="UserName" value="" class="required group1"  id="UserName" data-clear-btn="true"  />
   </div>
   ------- // A1

理由は明らかです。問題は次のとおりです。この問題を回避する方法を誰かが教えてくれますか?

4

1 に答える 1