Question

我有一个两难的境地我希望用户在点击下一个按钮时填写一个设置了Owner信息字段的表单，这些按钮会显示一个带有复选框的Sales信息字段集标记为Same as Owner因此，当用户单击该复选框时，将使用“所有者”字段集中的信息自动填写“销售”字段集中的值。我相信这在jQuery中很容易，但我是新手，无法确定它是如何完成的。下面我已经包含了我的代码。

销售信息：

<fieldset>
    <legend>Sales Information</legend>
        <p><label for="SalesFirstName">First Name</label> <input type="text" id="SalesFirstName" /></p>
        <p><label for="SalesLastName">Last Name</label> <input type="text" id="SalesLastName" /></p>
        <p><label for="SalesEmail">Email</label> <input type="text" id="SalesEmail" /><br /></p>
        <p><label for="SalesPhone">Phone</label> <input type="text" id="SalesPhone" /></p>
        <p><label for="SameAsOwner">Same as Owner</label><input id="SameAsOwner" name="SameAsOwner" type="checkbox" value="Yes"/></p>

        <p class="navigation"><button class="button" type="button" onclick="prevForm('SalesInfo', 'OwnerInfo');">Previous</button>                                                                                              
                        <button class="button" type="button" onclick="nextForm('SalesInfo', 'DetailedInfo' );">Next</button></p>
    </fieldset>

<script>
    $('#SameAsOwner').on('change', function(){
        if($(this).is(':checked')){
            alert('checked');
        } else {
            alert('un-checked');
        }
    });
</script>

所有者信息：

<fieldset>
    <legend>Owner Information</legend>
        <p><label for="OwnerFirstName">First Name</label> <input type="text" id="OwnerFirstName" /></p>
        <p><label for="OwnerLastName">Last Name</label> <input type="text" id="OwnerLastName" /></p>
        <p><label for="OwnerEmail">Email</label> <input type="text" id="OwnerEmail" /><br /></p>
        <p><label for="OwnerPhone">Phone</label> <input type="text" id="OwnerPhone" /></p>


        <p class="navigation"><button class="button" type="button" onclick="prevForm('OwnerInfo', 'DealerInfo');">Previous</button>                                                                                             
                        <button class="button" type="button" onclick="nextForm('OwnerInfo', 'SalesInfo' );">Next</button></p>
    </fieldset>

这些都列在单独的div中，next and prev按钮只隐藏并显示包含fieldset的div。我有on更改功能复选框，但现在我只需要从Owner字段中获取数据并将其设置为Sales字段的值。

更新：我让代码按预期工作，我想知道是否有办法清理它。

$('#SameAsOwner').on('change', function(){
        if($(this).is(':checked')){
           var Blank = "";
           var FirstName = $( '#OwnerFirstName' ).val();
           var LastName = $( '#OwnerLastName' ).val();
           var Phone = $( '#OwnerPhone' ).val();
           var Email = $( '#OwnerEmail' ).val();
           $( "#SalesFirstName" ).val( FirstName );
           $( "#SalesLastName" ).val( LastName );
           $( "#SalesEmail" ).val( Email );
           $( "#SalesPhone" ).val( Phone );
        } else {
           $( "#SalesFirstName" ).val( Blank );
           $( "#SalesLastName" ).val( Blank );
           $( "#SalesEmail" ).val( Blank );
           $( "#SalesPhone" ).val( Blank );
        }
    });

Answer 1

您可以在不使用变量的情况下清理它，只需$( "#SalesFirstName" ).val( $( '#OwnerFirstName' ).val() );

另一种方法是定义匹配的字段数组/对象，然后循环遍历它们。

或者如果您希望表单字段本身指示它们填充哪个字段，您可以使用data-属性并在jquery中读取它。

获取特定字段集中的所有值并将其设置为另一个字段集上的值

1 个答案: