如何查看更多输入字段的文本结果？ [关闭]答案

【问题标题】：How to see the text result of more input fields? [closed]如何查看更多输入字段的文本结果？ [关闭]
【发布时间】：2014-11-30 10:10:27
【问题描述】：

我有这个表格，您可以在其中插入 3 个输入 (aaaa bbbb cccc)。我希望当您按结果时，您可以以这种方式显示 aaaa|bbbb|cccc。

<body>
            <form action="demo_form.asp">
                <input type="text" name="line1" onkeypress="return check(event)" maxlength="3" id='Stringa1' tabindex="1"><br>
                <input type="text" name="line2" onkeypress="return check(event)" maxlength="3" id='Stringa2' tabindex="2"><br>
                <input type="text" name="line3" onkeypress="return check(event)" maxlength="3" id='Stringa3' tabindex="3"><br>
            </form>
            <div>
                <input type='button' onclick='changeThis()' value='Result'/>
                <span id='newText'></span>
            </div>
 </body>'

你能帮帮我吗？提前致谢

【问题讨论】：

您要求为您编写代码
如你所知，我不是像贾斯蒂纳斯这样的程序员，我是一个只懂一点 HTML 的学生。我很高兴能成为你们的一半。
所以不要作弊，先尝试一下。想象一下，您的外科医生在所有考试中都作弊，现在正在开刀！
感谢大家的帮助，我愿意接受你所有的回答。

标签： javascript jquery forms text input

【解决方案1】：

只需要一个函数

function changeThis()
{
   alert($('#Stringa1').val()+"|"+$('#Stringa2').val()+"|"+$('#Stringa3').val());
}

【讨论】：

【解决方案2】：

我将使用 jQuery 事件处理程序，例如

function check(evt) {
    //some test implementation
    return true;
}
//All the input elements which are to be used for the result are given the class line and the button is given an id result
jQuery(function () {
    //insted of using inlined event handlers add jQuery event handlers
    var $lines = $('.line').keypress(check);
    $('#result').click(function () {
        //use map() to get all the values into an array
        var result = $lines.map(function () {
            return this.value ? this.value : undefined;
        }).get();
        //use Array.join() to concatenate the values in the array
        $('#newText').text(result.join('|'))
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="demo_form.asp">
    <input type="text" name="line1" class="line" maxlength="3" id='Stringa1' tabindex="1"/><br/>
    <input type="text" name="line2" class="line" maxlength="3" id='Stringa2' tabindex="2"/><br/>
    <input type="text" name="line3" class="line" maxlength="3" id='Stringa3' tabindex="3"/><br/>
</form>
<div>
    <input type='button' id="result" onclick='changeThis()' value='Result'/>
    <span id='newText'></span>
</div>

【讨论】：

【解决方案3】：

给你：DEMO

$('input:button').click(function(){
    var result='';
    $('input:text').each(function(){
        if(result==''){
            result+=$(this).val();
        }
        else{
            result+='|'+$(this).val();
        }
    });
    $('#newText').html(result);
});

【讨论】：

【解决方案4】：

<script type="text/javascript">
     function changeThis()
            {
                var one = $('#Stringa1').val();
                var two = $('#Stringa2').val();
                var three = $('#Stringa3').val();
                var res = one+"|"+two+"|"+three;
                 $('#newText').html(res);

            }


 </script>

【讨论】：

【解决方案5】：

你可以使用javascript

Js Fiddle

function changeThis() {
    a = document.getElementById("Stringa1").value
    b = document.getElementById("Stringa2").value
    c = document.getElementById("Stringa3").value

    document.getElementById("newText").innerHTML = a + '|' + b + '|' + c

}

【讨论】：