jQuery 将表单中多个输入框的值复制并连接到一个输入字段

copy and concatenate values of multiple input boxes in a form to one input field

提问by suBi

copy/duplicate and concatenate values of multiple input boxes to one

复制/复制多个输入框的值并将其连接为一个

I have input fields for street, city, state and zip and the fifth one that says complete address. I am trying to have the full address[concatenated with , as a separator]with all the four aforementioned fields to be filled out on the complete address.

我有街道、城市、州和邮政编码的输入字段，以及表示完整地址的第五个字段。我正在尝试使用完整地址[连接 , 作为分隔符] 并在完整地址上填写上述所有四个字段。

Here's what i have so far. The first one copies (street address) but i need help to concatenate the other fields...

这是我到目前为止所拥有的。第一个副本（街道地址）但我需要帮助来连接其他字段...

You can Fiddle here: http://jsfiddle.net/subigya/PeVAj/

你可以在这里摆弄：http: //jsfiddle.net/subigya/PeVAj/

type="text/javascript">

type="text/javascript">

<script type="text/javascript">

     $('#street').bind('keypress blur', function() {

        $('#latlongaddress').val($(this).val());

    });

    $('#city').bind('keypress blur', function() {

    ..need help ...

    });

</script>



<form method="post" action="#">

    <div class="formitem">
        <label for="name_of_salon">Name of Salon:</label>
        <input type="text" id="name_of_salon" name="name_of_salon" />
    </div>

    <div class="formitem">
        <label for="street">Street Address:</label>
        <input type="text" id="street" name="street" />
    </div>

    <div class="formitem">
        <label for="city"> City:</label>
        <input type="text" id="city" name="city" />
    </div>

    <div class="formitem">
        <label for="state">State:</label>
        <select name="state" size="1">
            <option value="AK">AK</option>
            <option value="AL">AL</option>
            <option value="AR">AR</option>
            <option value="AZ">AZ</option>
            <option value="CA">CA</option>
            <option value="CO">CO</option>
            <option value="CT">CT</option>
            <option value="DC">DC</option>
            <option value="DE">DE</option>
            <option value="FL">FL</option>
            <option value="GA">GA</option>
            <option value="HI">HI</option>
            <option value="IA">IA</option>
            <option value="ID">ID</option>
            <option value="IL">IL</option>
            <option value="IN">IN</option>
            <option value="KS">KS</option>
            <option value="KY">KY</option>
            <option value="LA">LA</option>
            <option value="MA">MA</option>
            <option value="MD">MD</option>
            <option value="ME">ME</option>
            <option value="MI">MI</option>
            <option value="MN">MN</option>
            <option value="MO">MO</option>
            <option value="MS">MS</option>
            <option value="MT">MT</option>
            <option value="NC">NC</option>
            <option value="ND">ND</option>
            <option value="NE">NE</option>
            <option value="NH">NH</option>
            <option value="NJ">NJ</option>
            <option value="NM">NM</option>
            <option value="NV">NV</option>
            <option value="NY">NY</option>
            <option value="OH">OH</option>
            <option value="OK">OK</option>
            <option value="OR">OR</option>
            <option value="PA">PA</option>
            <option value="RI">RI</option>
            <option value="SC">SC</option>
            <option value="SD">SD</option>
            <option value="TN">TN</option>
            <option value="TX">TX</option>
            <option value="UT">UT</option>
            <option value="VA">VA</option>
            <option value="VT">VT</option>
            <option value="WA">WA</option>
            <option value="WI">WI</option>
            <option value="WV">WV</option>
            <option value="WY">WY</option>
        </select>
    </div>

    <div class="formitem">
        <label for="zip">Zip:</label>
        <input type="text" id="zip" name="zip" />
    </div>

    <div class="formitem">
        <label for="address_of_salon">Full Address:</label>
        <input type="text" id="latlongaddress" name="address" />
    </div>


    <div class="formitem">
        <input type="submit" id="location_submit" name="location_submit" value="Add Location" class="addBtn" />
    </div>

回答by Mark Kahn

Just for fun:

只是为了好玩：

$('#latlongaddress').val( $('#street,#city,#state,#zip').map(function(){
    return $(this).val();
}).get().join(' ') );

eykanal's answer is better because it will run quicker and is easier to understand. Only actually use this for something like .val($('input')...

eykanal 的答案更好，因为它运行得更快并且更容易理解。只实际将其用于类似的事情.val($('input')...

回答by eykanal

Use the +for Javascript concatenation:

使用+for Javascript 连接：

$('#latlongaddress').val($('#street').val() + ' ' +
                         $('#city').val() + ', ' +
                         $('#state').val() + ' ' +
                         $('#zip').val() );

See the jsFiddle.

请参阅jsFiddle。