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：显示国家代码选择后的所有其他字段

在这种形式下，它运行良好：

 <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>

但是如果我更改上面的 html (A) 以便为 UserName（电话或电子邮件）获取两个不同的输入类型字段，布局看起来不错，但是当我选择第一个选项（电话）时，表单会为 UserName 发送一个空值：

     ----- 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

0

您不能在同一页面中拥有相同的 id。对这两种类型使用具有不同 id 的同一类。

例如

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

并在 jquery 脚本中选择不同的选择器。

于 2013-09-21T10:40:38.960 回答