javascript - 表单：根据电台选择将字段值发布到不同的字段

Question

我正在建立一个注册表单，注册人必须提供他们的电话号码。由于我将固定电话和移动电话存储在不同的联系字段中，因此我需要知道他们提交的是哪一个。我知道我可以提供 2 个表单字段，但希望表单前端尽可能简单。

因此，我只有一个用于选择固定电话或移动电话的数字和单选按钮的文本字段。根据单选选择，文本字段的值应发布在 2 个隐藏字段之一中。

我也可以在输入字段弹出正确的联系人字段之前询问，但这看起来不太好。

电话号码

<label>Is this a cell phone or a land line?</label><br>
<input type="radio"  class="radio1" name="question" value="1">Land Line</input><br>
<input type="radio"  class="radio1" name="question" value="0">Cell Phone</input>

<input type="hidden"  class="text" name="land line"></input><br>
<input type="hidden"  class="text" name="cell phone"></input><br>

标签： javascript

Answer 1

您将为第一个输入提供的输入将在选择单选按钮时提供给隐藏字段。如果任何先前的值被赋予隐藏字段也将被设为空

$(document).ready(function(){
$('.radio1').change(function(){
if($(this).val()==1)
{$('#landline').val($(number).val());$('#phone').val('')}
else
{$('#phone').val($(number).val());$('#landline').val('')}

})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="number"/><br>
<label>Is this a cell phone or a land line?</label><br>
<input type="radio"  class="radio1" name="question" value="1">Land Line</input><br>
<input type="radio"  class="radio1" name="question" value="0">Cell Phone</input>

<input type="hidden"  id="landline" value='' class="text" name="land line"></input><br>
<input type="hidden" value='' id="phone"  class="text" name="cell phone"></input><br>