【问题标题】:Duplicate similar fields of the form on checked选中时重复表单的类似字段
【发布时间】:2013-05-29 07:07:52
【问题描述】:

我有一个表格,其中我有一个永久地址和通信地址。
我希望用户先输入永久地址,然后给出一个复选框,说明通信地址是否与永久地址相同。我能够用 javascript 填充文本框,但无法在选择中完成,即下拉。我怎样才能做到这一点?

我的表单代码是:

<form action="" name="form1" >
    <fieldset>
        PERMANENT ADDRESS:<br />
        <br/> 
        HOUSE/DOOR<input type="text" name="hno1" placeholder="HOUSE/DOOR NUM" required><br/>
        STREET<input type="text" name="street1" placeholder="STREET" required><br/>
        CITY<input type="text" name="city1" placeholder="CITY" required><br/>
        DISTRICT<input type="text" name="district1" placeholder="DISTRICT" required>    <br/>
        STATE<select required name="state1">
                <option>ANDHRA PRADESH</option>
                <option>KARNATAKA</option>
            </select><br />
        COUNTRY<select name="country1" required>
                    <option>INDIA</option>
                    <option>USA</option>
                </select><br />
        PIN<input type="text" name="pin1" placeholder="PIN" required><br/><br />
        CORRESPONDENT ADDRESS:<br />
        <label for="adress same">Same as PERMANENT ADDRESS </label>
        <input name="copy" type="checkbox" onclick="data_copy()"> <br />
        <!--<select required>
        <option>PERMANENT & CORRESPONDENT</option>
        <option>RESPECTIVELY</option>
        </select>-->
        <br/> 
        HOUSE/DOOR <input type="text" name="hno11" placeholder="HOUSE/DOOR NUM"     required><br/>
        STREET<input type="text" name="street11" placeholder="STREET" required><br/>
        CITY<input type="text" name="city11" placeholder="CITY" required><br/>
        DISTRICT<input type="text" name="district11" placeholder="DISTRICT" required>    <br/>
        STATE<select name="state11" required>
                <option>ANDHRA PRADESH</option>
                <option>KARNATAKA</option>
            </select><br/>
        COUNTRY<select name="country11" required>
                    <option>INDIA</option>
                    <option>USA</option>
                </select><br/>
        PIN<input type="text" name="pin11" placeholder="PIN" required><br/><br />
    </fieldset>
</form>

有没有更好的方法可以在选中复选框时在表单中分配这种重复的类似字段,并且我还希望在取消选中复选框时清除这些字段。

【问题讨论】:

    标签: javascript forms select duplication


    【解决方案1】:
    <select required>
    <option>PERMANENT & CORRESPONDENT</option>
    <option>RESPECTIVELY</option>
    </select>
    

    使用 onchange 事件进行下拉,像这样,

    <select required onChange="data_copy(this.value)">
    <option value="1">PERMANENT & CORRESPONDENT</option>
    <option value="2">RESPECTIVELY</option>
    </select>
    

    然后获取所选选项的值并执行相应的操作。

    【讨论】:

    • 这个不同的东西我希望两个地址都出现并被填满
    • 应该从哪里填写地址?
    • @Aashray 如果第一个用户填写了永久地址,那么在勾选复选框时,对应地址将从永久地址中填充
    • 你有获取替换值的功能吗?
    【解决方案2】:

    这里是填充值的函数,

    <script type="text/javascript">
    function data_copy(str){
    if(str=='1'){   // if this the case where both the addresses will be same
       document.form1.hno11.value = document.form1.hno1.value;
       document.form1.street11.value = document.form1.street1.value;
       //.....
       //... so on.. add fields this ways
    
    }
    

    }

    【讨论】:

    • 很好,但问题是文本字段已填充,而下拉选择无效!我想在下拉选择中做同样的事情,就好像选择了印度然后在第二个地址印度应该来等等......
    猜你喜欢
    • 2021-02-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-23
    • 2011-08-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多