在单选按钮选择不同的表单上更改输入文本

时间:2017-05-25 13:34:58

标签: javascript jquery html forms

我在按下单选按钮

时尝试更改输入文本

它自带的表单有5个选项,带有多个单选按钮和输入文本

我想要更改的输入文本是以不同的形式,因为当更改主窗体中的输入文本时,它应该在另一个上更改

我现在得到这个

 $(document).ready(function () {
 $("input[type=radio]").click(function () {
   $(this).closest('form').find("input[type=text]").val(this.value);
});
});

但这会更改当前表单中的输入文本

如何更改第二个表单输入文本

main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">



<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">

<div class="selector">
    <div class="selector">
      ccc
    </div>
    <p>
      <label>
      <input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
      TYPE : p </label>
      <br>
      <label>
        <input type="radio" name="selector1" value="K" id="selector1_1">
        TYPE : l </label>
        </p>
    <div class="selector">j</div>
    
    <p>
      <label>
      <input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
        aaa</label>
      <br>
      <label>
      <input type="radio" name="selector2" value="U" id="selector2_1">
        u</label>
    </p>
    <input name="selector2hyphen" type="hidden" value="-">
    <div class="selector">bbb</div>
    <p>
      <label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
    inches. Please use 3 digit</label></p>
        <input name="selector3hyphen" type="hidden" value="-">

<div class="selector">      wd</div>
    <p>
      <label>
      <input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
      <br>
      <label>
      <input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
      <br>
      <label>
      <input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
      <br>
      <label>
      <input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
    </p>
    <div class="selector">t Type</div>
    <p>
      <label>
      <input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
    </p>
    <div class="selector">acc</div>
    <p>
      <label>
      <input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
      <br>
      <label>
      <input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
      <br>
      <label>
      <input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
      <br>
      <br>
    </p>
   	<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
	</p>
    
      </div>
      

second form where input should change


<tbody>
			<tr>

		        <th>Model </th>
        <td style="width:100%;">
A<input name="selector1" type="text" value="_"   maxlength="3">
<input name="selector2" type="text" value="_"  maxlength="3">
<input name="selector3" type="text" value="000"  maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_"  maxlength="3">
<input name="selector6" type="text" value="_"  maxlength="3">

</td></tr>




	    </tbody>

所以现在,如果我按下单选按钮,它会以相同的形式更改输入

我需要更改第二个表单上的输入文本

例如我按下类型p它会改变第二种形式的第一个输入文本

谢谢

5 个答案:

答案 0 :(得分:1)

您更改输入的表单是第一个表单, 通过添加下一个方法(最近(形式))选择下一个表格 不要忘记表格标签加上他们必须彼此相邻。

$(document).ready(function () {
    $("input[type=radio]").click(function () {
    $(this).closest('form').next() .find("input[type=text]").val(this.value);
        });
    });

答案 1 :(得分:1)

代码中的问题:

find("input[type=text]").val(this.value);将为您提供所有输入类型=文本,并使用this.value更新所有内容,您真正想要的是定位特定元素,因此应该是{{1} }

解决方案:

使用.find("input[name=" + this.name + "][type=text]") 查找名称为&#34; xxxx&#34;的最后一个元素和type = text,这将只返回一个结果,因为组合是唯一的

我们的目标是定位您想要更新的单个输入元素,还应该清理代码,属性命令等,如果您不使用它,请删除ID。

更新:更改输入更新单选按钮。

.find("input[name=" + this.name + "][type=text]")

更新文字输入时,您可以将.find("input[type=radio][name=" + this.name + "][value=" + this.value + "]")type=radiosame name的输入定位,然后使用same value进行检查。

&#13;
&#13;
.prop("checked", true)
&#13;
$(document).ready(function() {
  $("input[type=radio]").click(function() {
    $(this).closest('body').find("input[name=" + this.name + "][type=text]").val(this.value);
  });

  $("input[type=text]").on('input', function() {
    $(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
  });

  //init
  $("input[type=radio]:checked").click();
});
&#13;
&#13;
&#13;

答案 2 :(得分:0)

$(this).closest()用于查找最接近的父元素。它只会选择作为$(this)元素父元素的元素。

您应该为文本输入唯一ID,以便轻松识别它们。

改变这个 -

<input name="selector1" type="text" value="_"   maxlength="3">

对此 -

<input name="selector1" id="selector1" type="text" value="_"   maxlength="3">

然后在jquery中,

$("input[type=radio]").click(function () {
    $("#selector1").val(this.value);
});

答案 3 :(得分:0)

为所有表单上的所有单选按钮创建一个onchange函数。传递函数上单选按钮的值,并从函数中获取值。

例如:

Function myChange(myRadioVal)
{
$("#inputTextBoxId").val(myRadioVal);
 //code here
}

答案 4 :(得分:0)

试试此代码

为每个单选按钮添加一个公共类

$(document).ready(function() {
    $('.class_name_of_radio').change(function() {
        $("input[type=text][name="+this.name+"]").val(this.value);
    });
});