Auto fill input from another input value

Question

I have a problem:

<table>
    <?php
        $data['kriteria'] = array('IPK', 'SEMESTER', 'PENGHASILAN', 'BEASISWA LAIN');
        $kriteria = array();
        foreach ($data['kriteria'] as $key => $val) {
            $kriteria[$key] = $val['nama'];
        }
    ?>
    <thead>
        <tr>
            <th>Kriteria</th>
            <?php
            foreach ($kriteria as $val) {
                echo '<th>' . $val . '</th>';
            }
            ?>
        </tr>
    </thead>
    <tbody>
        <?php $n = count($kriteria); ?>
        <?php for ($i = 0; $i < $n; $i++): ?>
            <tr>
                <th><?= $kriteria[$i] ?></th>
                <?php for ($j = 0; $j < $n; $j++): ?>
                    <td><input type="text"  class="form-control" id="<?= $kriteria[$j] . $kriteria[$i] ?>" name="<?= $j. $i ?>" value=""></td>
                <?php endfor; ?>
            </tr>
        <?php endfor; ?>
    </tbody>
</table>

This is the result

I want the blue side value is automatically fill when I input value from the red side like in image above Before I write the question, I tried to make autofill with jQuery like this

<script type="text/javascript">
    $(document).ready(function () {
        $("#SI").keyup(function () {
            var value = $(this).val();
            $("#IS").val(1/value);
        });
    });
</script>

but it's doesn't work

Maybe you are creating dynamic controls so that indexing miss match trying to pepper indexing or set autocomplete=off — jishan siddique
– jishan siddique, Commented Dec 1, 2019 at 11:45
What's $("#SI") and $("IS")? Ids must be unique, at the very least these are in a for loop, but they're not in your code. — fdomn-m
– fdomn-m, Commented Dec 1, 2019 at 11:46
$kriteria[$key] = $val['nama']; should throw a warning about undefined index "nama" since $val will be a string, not an array. You defined $data['kriteria'] as an flat indexed array and not a multidimensional associative array 3 lines above that code. — M. Eriksson
– M. Eriksson, Commented Dec 1, 2019 at 11:59
"The question should be updated to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem." - maybe remove the php hieroglyphs as you're asking a javascript question — fdomn-m
– fdomn-m, Commented Dec 1, 2019 at 12:01
Id is generated dynamically that will not matched ,so use in jquery by class name — LDS
– LDS, Commented Dec 1, 2019 at 12:02

Diyona Amelia · Accepted Answer · 2019-12-01 12:51:48Z

thank's you all for you respons, i can solve my problem now this the code


<table>
                <?php
                $kriteria = array('IP', 'SE', 'PE', 'BE');

                ?>
            <thead>
                <tr>
                    <th>Kriteria</th>
                    <?php
                    foreach ($kriteria as $val) {
                        echo '<th>' . $val . '</th>';
                    }
                    ?>
                </tr>
            </thead>
            <tbody>
                <?php $n = count($kriteria); ?>
                <?php for ($i = 0; $i < $n; $i++): ?>
                <tr>
                    <th><?= $kriteria[$i] ?></th>
                    <?php for ($j = 0; $j < $n; $j++): ?>
                        <td><input type="text"  class="form-control" id="<?= $kriteria[$j] . $kriteria[$i] ?>" name="<?= $j. $i ?>" value=""></td>
                    <?php endfor; ?>
                </tr>
                <?php endfor; ?>
            </tbody>
        </table>


        <script type="text/javascript">
                $(document).ready(function () {
                    $("#IPIP").val(1);
                    $("#SESE").val(1);
                    $("#PEPE").val(1);
                    $("#BEBE").val(1);
                    $("#SEIP").keyup(function () {
                        var value = $(this).val();
                        $("#IPSE").val(1/value);
                    });
                    $("#PEIP").keyup(function () {
                        var value = $(this).val();
                        $("#IPPE").val(1/value);
                    });
                    $("#BEIP").keyup(function () {
                        var value = $(this).val();
                        $("#IPBE").val(1/value);
                    });
                    $("#PESE").keyup(function () {
                        var value = $(this).val();
                        $("#SEPE").val(1/value);
                    });
                    $("#BESE").keyup(function () {
                        var value = $(this).val();
                        $("#SEBE").val(1/value);
                    });
                    $("#BEPE").keyup(function () {
                        var value = $(this).val();
                        $("#PEBE").val(1/value);
                    });

                });
        </script>

i include this code too run the jQuery

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

Ludolfyn · Accepted Answer · 2020-03-28 12:49:12Z

1

Your JQuery is right if you want to do math and only want to input numbers into the first input, but if you try to do the same thing with text, then it will return NaN, because it's assuming that you want to return "one divided by the value", so what you can do is this, and then right a second function to do the math:

$(document).ready(function () {
    $("#SI").keyup(function () {
        var value = $("#SI").val();
        $("#IS").val(value)
    });
});

Check a working JSFiddle here.

edited Mar 28, 2020 at 12:49

answered Mar 26, 2020 at 21:04

Ludolfyn

2,10217 silver badges23 bronze badges

2 Comments

Nico Haase Over a year ago

Please explain that further - what makes you think that this should be an error?

Ludolfyn Over a year ago

@NicoHaase , it's actually not an error if you want to do math and only want to input numbers into the first input, but if you try to do the same thing with text, then it will return NaN, because it assuming that you want to return "one divided by the value". I should probably specify that in the answer =)

Ukesh Shrestha · Accepted Answer · 2019-12-01 14:53:06Z

<table>
<?php
$kriteria = array('IP', 'SE', 'PE', 'BE');

?>
<thead>
<tr>
    <th>Kriteria</th>
    <?php
    foreach ($kriteria as $val) {
        echo '<th>' . $val . '</th>';
    }
    ?>
</tr>
</thead>
<tbody>
<?php $n = count($kriteria); ?>
<?php for ($i = 0; $i < $n; $i++): ?>
    <tr>
        <th><?= $kriteria[$i] ?></th>
        <?php for ($j = 0; $j < $n; $j++): ?>
            <td><input type="text" class="form-control" index-j="<?= $j ?>"
                       index-i="<?= $i ?>"
                       id="<?= $kriteria[$j] . $kriteria[$i] ?>"
                       name="<?= $j . $i ?>" value=""></td>
        <?php endfor; ?>
    </tr>
<?php endfor; ?>
</tbody>

<script type="text/javascript">
$(document).ready(function () {
    var size = <?=$n ?>;

    for (let i = 0; i < size; i++) {
        for (let j = 0; j <= i; j++) {
            if (i == j) {
                $(`[index-i=${i}][index-j=${j}]`).val(1);
            } else {
                $(`[index-i=${j}][index-j=${i}]`).keyup(function () {
                    var value = $(this).val();
                    $(`[index-i=${i}][index-j=${j}]`).val(1 / value);
                });
            }
        }
    }
});

here is the better solution to your answer that would fit if your array is dynamic and better coding.

Collectives™ on Stack Overflow

Auto fill input from another input value

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related