переключатель скрывать и показывать содержимое формы

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

Вы можете обернуть все элементы ввода, кроме радиокнопок, в два разных элемента деления, чтобы можно было зафиксировать событие изменения для переключателей, а также отобразить и скрыть два элемента деления соответствующим образом.

Answer 2

Я нашел простое решение для этого с 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>

вот HTML-код, насыщенный div

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

Answer 3

Вы можете либо добавить класс, чтобы представить, какие элементы являются элементами адреса Великобритании, а какие - ЕС, или, как ответила Элоди Пети, обернуть их в div и затем показать или скрыть их в зависимости от того, какая кнопка радиона была выбрана.* Вот JSFiddle с использованием последней опции.

Answer 4

Я не думаю, что вам нужно обязательно показывать или скрывать элементы, так как элементы формы кажутся одинаковыми в обеих «формах», рассмотрим:

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

А потом, когда вы запросите параметр "from", вы узнаете, из какой они страны?