Question

我有这个表单，你可以插入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>'

你能帮帮我吗？提前致谢

Answer 1

只需要一个功能

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

Answer 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>

Answer 3

在这里： DEMO

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

Answer 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>

Answer 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

}

如何查看更多输入字段的文本结果？

5 个答案: