Question

我想将多个文本字段中的文本复制到另一个文本字段。我试过了，但它不起作用。来自字段fromtele的值仅被复制，而不是其他值。

这是我的HTML：

  echo "<form name=\"sendfrak\" action=\"frakthandling.php\" method=\"post\" />";
    echo "<div class=\"left2\"><h2>Fyll i uppgifter</h2>";
    echo "<h3>Från</h3>";
    echo "<div id='from'>";
    echo "<dl>";
    echo "<dt>Namn</dt><dd><input value=\"Net at Once Sweden AB\" type=\"text\" name=\"fromname\" /></dd>";
    echo "<dt>Adress</dt><dd><input value=\"Box 177\" type=\"text\" name=\"fromaddr\" /></dd>";
    echo "<dt>Postnr</dt><dd><input value=\"351 04\" type=\"text\" name=\"frompostnr\" /></dd>";
    echo "<dt>Ort</dt><dd><input value=\"Växjö\" type=\"text\" name=\"fromort\" /></dd>";
    echo "<dt>Telefon</dt><dd><input value=\"0771-404400\" type=\"text\" name=\"fromtele\" /></dd>";
    echo "</dl></div>";
    echo "<h3>Till</h3>";
    echo "<div id='rec'>";
    echo "<dl>";
    echo "<dt>Namn</dt><dd><input type=\"text\" name=\"toname\" /></dd>";
    echo "<dt>Adress</dt><dd><input type=\"text\" name=\"toaddr\" /></dd>";
    echo "<dt>Postnr</dt><dd><input type=\"text\" name=\"topostnr\" /></dd>";
    echo "<dt>Ort</dt><dd><input type=\"text\" name=\"toort\" /></dd>";
    echo "</dl></div>";
    echo "<h3>Övrigt</h3>";
    echo "<dl>";
    echo "<dt>Referens</dt><dd><input type=\"text\" name=\"ref\" /> (har du inget kundnr, skriv t.ex. ärendenr eller personnr)</dd>";
    echo "<dt>Vikt</dt><dd><input value=\"1\" type=\"text\" name=\"weight\" /></dd>";
    echo "<dt>Innehåll</dt><dd><input value=\"Elektronik\" type=\"text\" name=\"content\" /></dd>";
    echo "</dl>";
    echo "<input type=\"submit\" name=\"do_send\" value=\"Skriv ut\" />";
    echo "<input type=\"submit\" name=\"do_download\" value=\"PDF\" />"; if(isset($_GET['pdf'])) { echo "<a href='" . $_GET['pdf'] . "' style='margin-left: 10px;'>Ladda ned PDF</a>"; }
     echo "<a href='' id='change'>Skifa</a>";
    echo "</div>";
    echo "</form>";

这是我尝试过的jQuery：

$(document).ready(function() {
    $('#change').click(function() {
        $("#from input").each(function() {
            var value = $(this).val();

            $('#rec input').each(function() {
                $(this).val(value);
            });
        });
    });
});

Answer 1

您的代码的问题在于，您从#from获取每个输入值并将其设置为#rec中的所有输入，因此只会为所有#rec输入设置最后一个输入的值。 / p>

请尝试以下操作。

$(document).ready(function() {
        $('#change').click(function() {
            var inputValues = [];
            $("#from input").each(function() {
                inputValues.push($(this).val());
            });
            $('#rec input').each(function(index) {
                if(index < inputValues.length) {
                    $(this).val(inputValues[index]);
                }
            });
        });
    });

Answer 2

.map()和.index(element)

$(document).ready(function () {
    var rec = $('#rec input'), //cache selectors 
        from_input = $("#from input");
    $('#change').click(function () {
        var arr = from_input.map(function () {  //create array of all values
            return this.value;
        }).get();
        rec.val(function () {
            return arr[$(this).index('input')]; //get index of current element and get it's value from array arr
        });
    });
});

Answer 3

你的第二个.each（）遍历#rec div中的所有输入，而不只是一个。

你应该这样分开：

var value = [];

$(document).ready(function() {
    $('#change').click(function() {
        $("#from input").each(function(i) {
            value[i] = $(this).val();
        });
        $('#rec input').each(function(i) {
            $(this).val(value[i]);
        });
    });
});

Answer 4

使用你的标记，我想出了这个解决方案。

$("#from input").blur(function() {
    var value = $(this).val();
    var fromName = $(this).attr('name');
    var toName = fromName.replace('from', 'to');

    $('input[name="' + toName + '"]').val(value);
});

这是一个有效的JSFiddle：http://jsfiddle.net/galengidman/xeLCm/

将文本从多个字段复制到另一个字段

4 个答案: