Question

我想根据哪个国家/地区创建注册表单。默认地址表单是默认的可见输入当客户点击非英国单选按钮然后自动隐藏英国表格并选择非英国地址表格

我想我需要使用javascript或JQuery来实现这个功能。

任何人都可以给我一个关于这个功能的建议。如果您认为我的问题不可接受，请不要降低我的费率。如果你不喜欢，我可以删除我的问题。

这是我的表单代码

<form action="sent.php" name="form1" method="post">
  Name
  <input type="text" name="name" />
  <br />UK
  <input type="radio" name="from" value="UK">
  <br />Address Line 1
  <input type="text" name="ad1" />
  <br />Address Line 2
  <input type="text" name="ad2" />
  <br />Town
  <input type="text" name="town" />
  <br />Post Code
  <input type="text" name="post_code" />
  <br />EU
  <input type="radio" name="from" value="UK">
  <br />Address Line 1
  <input type="text" name="ad1" />
  <br />Address Line 2
  <input type="text" name="ad2" />
  <br />Town
  <input type="text" name="town" />
  <br />Post Code
  <input type="text" name="post_code" />
  <br />Country
  <input type="text" name="post_code" />
  <br />
</form>

Answer 1

您可以将除单选按钮之外的所有输入元素包装在两个不同的div中，这样您就可以捕获单选按钮的更改事件，并相应地显示和隐藏两个div。

Answer 2

我认为您不需要显示或隐藏元素，因为表单元素在两个“表单”上看起来都是相同的，请考虑：

<form action="sent.php" name="form1" method="post">

Name <input type="text" name="name" /><br/>
UK <input type="radio" name="from" value="UK" > / EU <input type="radio" name="from" value="EU" ><br />

Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />

</form>

然后当您请求“来自”参数时，您将知道他们来自哪个国家/地区？

Answer 3

你可以添加一个类来表示哪些元素是英国地址元素，哪些是欧盟，或者像ÉlodiePetit一样回答将它们包装在div中，然后根据选择的辐射按钮显示或隐藏它们。 /> 这是使用后一种选项的JSFiddle。

Answer 4

我用JQuery找到了简单的解决方案

使用JQuery支持

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

这是javascript代码

$(document).ready(function() {
    $("input[name$='from']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#c" + test).show();
    });
});
</script>

这是用div

取代的html代码

<form action="sent.php" name="form1" method="post">
<label>UK <input type="radio" name="from" value="1" ></label><br />
<label>EU <input type="radio" name="from" value="2" ></label><br />
<div id="c1" class="desc">
Name <input type="text" name="name" /> <br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</div>
<div id="c2" class="desc" style="display:none;">
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
Country <input type="text" name="post_code" /> <br />
</div>
</form>

单选按钮隐藏并显示表单内容

4 个答案: