Αντιγραφή τιμής από ένα textbox σε άλλο

[rafinos]

Δείτε λίγο την εικόνα.

Θέλω ότι γράφω στο δεύτερο textbox μιας σειράς να εμφανίζεται η ίδια τιμή στο πρώτο της άλλης (γράφω στο κόκκινο και το εμφανίζει και στο πράσινο).

Έχω δοκιμάσει 100 τρόπους με την jquery και δεν το έχω καταφέρει.

Τα δύο πρώτα κελιά textbox κάθε γραμμής έχουν ακριβώς την ίδια κλάση στην περίπτωση μας ".1".

 

Έχω δοκιμάσει διάφορες παραλλαγές του παρακάτω κώδικα αλλά τίποτα:

$(document).on("keyup",".1",function(){
		var txtVal = $(this).val();
		$(this).parent().parent().nextAll('.1:first').val(txtVal);
});

Έχει κανεία καμιά ιδέα;

[lion2486]

Kαταρχάς δες εδώ http://www.w3schools.com/tags/att_global_class.aspτο "1" δεν είναι αποδεκτό class name

 

Θα σου έκανε κάτι τέτοιο; http://jsfiddle.net/#&togetherjs=bJ8EnVO4Uw

[rafinos]

Kαταρχάς δες εδώ http://www.w3schools.com/tags/att_global_class.aspτο "1" δεν είναι αποδεκτό class name

Εντάξει αυτό το άλλαξα σε "a" αλλά και πάλι δεν είναι σωστός ο τρόπος μου... δε δουλεύει

[nucleus]

Δώσε ξεχωριστά ID στα textboxes και χρησιμοποίησε το id σαν selector πχ αν το id είναι textbox1 o selector είναι $('#textbox1') για το textbox όχι το class.
 

HTML

<input id="textbox1" type="text" />
<input id="textbox2" type="text" />

javascript

$(document).ready(function(){
    
    $("#textbox2").keyup( function(){
        var txtVal = $(this).val();
        $("#textbox1").val(txtVal);
    });
});

[Xvipes]

 

Δώσε ξεχωριστά ID στα textboxes και χρησιμοποίησε το id σαν selector πχ αν το id είναι textbox1 o selector είναι $('#textbox1') για το textbox όχι το class.

 

HTML

<input id="textbox1" type="text" />
<input id="textbox2" type="text" />

javascript

$(document).ready(function(){
    
    $("#textbox2").keyup( function(){
        var txtVal = $(this).val();
        $("#textbox1").val(txtVal);
    });
});

Και ένα jsfiddle με το παράδειγμά σου

[rafinos]

Το θέμα είναι ότι ο πίνακας δεν έχει στάνταρ γραμμές δημιουργείτε δυναμικά...

[Xvipes]

Τότε φτιάξε δυναμικά και τα selector σου.

Δώσε μας τα id/class που θα έχει να δούμε το μοτίβο μήπως μπορούμε να βοηθήσουμε.

[rafinos]

Στα textboxes (κόκκινο) θα έχω αυτό "textbox1", "textbox2".....

Στα disabled (πρασινο) θα έχω "d_textbox1"....

 

*Θα υπάρχει αντιστοιχία στο νούμερο... δηλαδή η τιμή του textbox1 θα πηγαίνει στο d_textbox1

[nucleus]

Σε τι το φτιάχνεις? php? mvc(razor ή aspx)?

 

Αν μπορείς γράψε μια τον κώδικα που κάνει την δημιουργία των textboxes.

[Xvipes]

Στα textboxes (κόκκινο) θα έχω αυτό "textbox1", "textbox2".....

Στα disabled (πρασινο) θα έχω "d_textbox1"....

 

*Θα υπάρχει αντιστοιχία στο νούμερο... δηλαδή η τιμή του textbox1 θα πηγαίνει στο d_textbox1

 

Κάτι γρήγορο

[rafinos]

Σε τι το φτιάχνεις? php? mvc(razor ή aspx)?

 

Αν μπορείς γράψε μια τον κώδικα που κάνει την δημιουργία των textboxes.

 

Τα textboxes δημιουργούνται με jquery...

 

Κάτι γρήγορο

 

Νομίζω ότι κάτι τέτοιο θα δουλέψει

Θα το δοκιμάσω αργότερα γιατί τώρα δυστυχώς δεν προλαβαίνω!

 

Ευχαριστώ πολύ!

[alou]

Μετά είδα ότι απαντήθηκε κάτι ήδη, δεν πρόλαβα να το δω οπότε ρίξε μια ματιά και σε αυτό.

$('#updatenextrow input').on('keyup', function(e) {
    var inputClass = $(this).attr('class');
    var nextNumber = parseInt(inputClass.charAt(inputClass.length - 1)) + 1;
    
    $('input.d_textbox' + nextNumber).val($(this).val());
});

με την προϋπόθεση παρόμοιας html

<table id="updatenextrow">
    <tr>
        <td>
            <input type="text" class="d_textbox1" />
         </td>
         <td>
             <input type="text" class="textbox1" />
         </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="d_textbox2" />
         </td>
         <td>
             <input type="text" class="textbox2" />
         </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="d_textbox3" />
         </td>
         <td>
             <input type="text" class="textbox3" />
         </td>
    </tr>
</table>

http://jsfiddle.net/andreasloukakis/Lf3g6vvh/

[rafinos]

Με παραμετροποιήσεις πιθανότατα να δουλεύουν και τα δύο!

Στην περίπτωση του alou δεν υπάρχει αντιστοιχία μεταξύ των textboxes από ότι κατάλαβα δηλαδή το "textbox1" δίνει την τιμή στο "d_textbox2".

Έτσι δεν είναι;

 

Μπορείς να μου εξηγήσεις λίγο αυτό;

var nextNumber = parseInt(inputClass.charAt(inputClass.length - 1)) + 1;

Παίρνει τον αριθμό από το τέλος της λέξης και του προσθέτει 1;

Αν ναι τι γίνεται στην περίπτωση που είναι πάνω από 10 τα textboxes;

[alou]

ναι αυτό γίνεται, αν αντιστοιχήσεις την πάνω γραμμή με την κάτω έτσι όπως έγραψε ο Xvipes και σε βολεύει δεν έχεις λόγο προφανώς να το κάνεις αλλιώς, το κατάλαβα λάθος εγώ, νόμιζα ότι η κάθε γραμμή είχε d_tade1 και tade1.

 

Για την ιστορία ή αν σε βολέψει τελικά έτσι και θες φυσικά 9+ σειρές, μπορείς και έτσι

$('#updatenextrow input').on('keyup', function(e) {
    var inputClass = $(this).attr('class');
    var twoLast = inputClass.slice(-2);
    var nextNumber = (!isNaN(parseInt(twoLast))) ?
        parseInt(twoLast) + 1 :
        parseInt(inputClass.charAt(inputClass.length - 1)) + 1;

    $('input.d_textbox' + nextNumber).val($(this).val());
});

http://jsfiddle.net/andreasloukakis/nzohnasr/

 

και πάλι όμως πας μέχρι 99

 

Μια άλλη λύση με αυτή τη λογική, θα ήταν να χρησιμοποιήσεις  το row index, πολύ πιο απλό και χωρίς περιορισμούς με την προϋπόθεση ότι δε χάνεις κάτι στην αρίθμηση των classes σου

$('#updatenextrow input').on('keyup', function(e) {
    var index = $(this).parent().parent().index() + 1;
    $('input.d_textbox' + index).val($(this).val());
});

ότι σε βολεύει

[nucleus]

Ας πετάξω και εγω μια αργή λύση

 

HTML

<table id="textboxContainer"></table>

javascript

<script type="text/javascript">
        $(document).ready(function () {

            textboxes_init();

            $(".red").each(function (index, element) {
                $(element).on("keyup", function (e) {
                    var txtVal = $(this).val();
                    $('#d_' + $(this).prop('id') + '').val(txtVal);
                });
            });

        });

        function textboxes_init() {
            for (var i = 1; i <= 10; i++) {
                var textboxSrcId = "textbox" + i ;
                var textboxTargetId = "d_textbox" + i;
                var textboxSrc = "<td><label for='" + textboxSrcId + "'>" + textboxSrcId + "</label><input type='text' id='" + textboxSrcId + "' class='red'/></td>";
                var textboxTarget = "<td><label for='" + textboxTargetId + "'>" + textboxTargetId + "</label><input type='text' id='" + textboxTargetId + "' class='green'/></td>";
                $("#textboxContainer").append("<tr>", textboxSrc, textboxTarget, "</tr>");
            }
        };

Φτιάχνει 10 ζευγάρια από textboxes με τα κατάλληλα labels μεσα στο table με id "textboxcontainer"

 

τα inputs με id=textbox1...10 έχουν class=red

τα inputs με id=d_textbox1....10 έχουν class=green

 

Αφού τα φτιάξει τους προσθέτει τα keyup events χρησιμοποιώντας σαν selector το class τους ".red"

Ο παραπάνω τρόπος δεν είναι και ο πιο γρήγορος,κάτι που πρέπει επίσης να δεις.

 

Για την .each διάβασε και εδώ https://api.jquery.com/each/