Question

我正在使用四个输入字段。完成所有字段后，输入的数据将传递到下部文本区域。怎么可能？

请帮帮我。

我的观看页面是

<div class="controls">
    <label class="fieldname">name</label>
    <input type="text" id="name" name="name" class="m-wrap span4 horizontal-form" placeholder="">  
</div>   

<div class="controls">
    <label class="housename">housename</label> 
    <input type="text" id="house number" name="house number" class="m-wrap span4 horizontal-form" placeholder="">  
</div> 

<div class="horizontal-form">

<div class="control-group">
    <label class="control-label" for="firstName"></label> 
</div>

<div class="controls">
    <label class="fieldname">Street</label> 
    <input type="text" id="street" name="street" class="m-wrap span4 horizontal-form" placeholder="">  
</div>

<div class="controls">
    <label class="fieldname">city</label> 
    <input type="text" id="city" name="city" class="m-wrap span4 horizontal-form" placeholder="">  
</div>

<div class="control-group">
    <label class="control-label">Contact Address<span class="required">*</span></label>
    <div class="controls">
    <textarea rows="3" name="address" class="span5 m-wrap" title=" Address"></textarea>  
    </div>  
</div>

Answer 1

这是完整的代码，对我有用

<div class="controls">
    <label class="fieldname">name</label>
    <input type="text" id="name" name="name" class="m-wrap span4 horizontal-form" placeholder="">  
</div>

<div class="controls">
    <label class="housename">housename</label> 
    <input type="text" id="house_number" name="house_number" class="m-wrap span4 horizontal-form" placeholder="">  
</div> 

<div class="controls">
    <label class="fieldname">Street</label> 
    <input type="text" id="street" name="street" class="m-wrap span4 horizontal-form" placeholder="">  
</div>

<div class="controls">
    <label class="fieldname">city</label> 
    <input type="text" id="city" name="city" class="m-wrap span4 horizontal-form" placeholder="">  
</div>

<div class="control-group">
    <label class="control-label">Contact Address<span class="required">*</span></label>
    <div class="controls">
        <textarea rows="3" id="address" name="address" class="span5 m-wrap" title=" Address"></textarea>  
    </div>  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$("input").on('change',function(){
    var name = $('#name').val();
    var house_number = $('#house_number').val();    // you need to change the id and name attributes for housename.
    var street = $('#street').val();
    var city = $('#city').val();
    var data = name+","+house_number+","+street+","+city;

    $("#address").html(data);    // please add id attribute for textarea
});
</script>

Answer 2

使用此代码：名称

<div class="controls">
    <label class="housename">housename</label> 
    <input type="text" id="house_number" name="house_number" class="m-wrap span4 horizontal-form" placeholder="">  
</div> 

<div class="controls">
    <label class="fieldname">Street</label> 
    <input type="text" id="street" name="street" class="m-wrap span4 horizontal-form" placeholder="">  
</div>

<div class="controls">
    <label class="fieldname">city</label> 
    <input type="text" id="city" name="city" class="m-wrap span4 horizontal-form" placeholder="">  
</div>

<div class="control-group">
    <label class="control-label">Contact Address<span class="required">*</span></label>
    <div class="controls">
        <textarea rows="3" id="address" name="address" class="span5 m-wrap" title=" Address"></textarea>  
    </div>  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$('input').on('change,function(){
    var name = $('#name').val();
    var house_number = $('#house_number').val();    // you need to change the id and name attributes for housename.
    var street = $('#street').val();
    var city = $('#city').val();
    var data = name+","+house_number+","+street+","+city;

    $("#address").html(data);    // please add id attribute for textarea
});
</script>

将文本字段数据传递到同一页面中的textarea

2 个答案: