Javascript set input value based on select in an array

Question

I've found lots of useful help in previous questions, but can't seem to get the last piece I need. I use PHP to loop through form fields and uniquely name the fields (using a variable). One of my fields is an "expense type". Another is "expense amount". I'd like the expense amount to auto display a mileage rate if "mileage" is the expense selected. I can do this outside of the array, but in the array I'm having trouble getting the names right in the array. The PHP code and the rest of the form work perfectly, just the javascript isn't finding the right fields to trigger/update. Here's the code:

<?php 
$t = -1;
foreach($details as $detail)
{
    $t++;
    echo '<th><select name="record['.$t.'][expense]" onChange="mileage();" ><option value="">Expense</option>';
    foreach($expensecoderesults as $code)
        {
            echo '<option value="'.$code->expense_code_id.'"';
            if($code->expense_code_id == $expense_type_id){echo 'selected="selected" ';}
            echo '>'.$code->expense_code_name.'</option>';
        }
        echo '</select></th></tr>';
        echo '<th><input type="number" "step=".01" name="record['.$t.'][amount]" /></th>';
}
?>
<script language="javascript" type="text/javascript">
function mileage()
{
    var myForm = document.forms.edit_emp_exp;
    var myControls = myForm.elements['record[][expense]'];
    var myAmount = myForm.elements['record[][amount]'];
    for (var i = 0; i < myControls.length; i++)
    {
        if(myControls.value == 28)//28 is the id of "mileage" expense
        {myAmount.value=".54";}
    }
}

Evgeniy Mikhalev · Accepted Answer · 2016-08-24 20:23:42Z

1

This part of your code will not work in javascript:

var myControls = myForm.elements['record[][expense]'];
var myAmount = myForm.elements['record[][amount]'];

You don't need the loop to find selected value (btw, you are checking not selected option value, but all options value in the loop, so choosing any option will lead to setting value of input to ".54")

Try this javascript code.

<script language="javascript" type="text/javascript">
function mileage(el) {
    var selectedIndex = el.selectedIndex;
    var selectedValue = el.options[selectedIndex].value;

    if ( selectedValue == 28 ) { //28 is the id of "mileage" expense
        el.nextElementSibling.value=".54";
    }
}
</script>

You will need to change mileage() function call in HTML SELECT tag from just mileage() to onChange="mileage(this);"

It's should work with your PHP generated HTML. But I recommend to use jQuery for such tasks.

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

    <script src="https://code.jquery.com/jquery-3.1.0.min.js"  integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="  crossorigin="anonymous"></script>
</head>
<body>

    <form id="edit_emp_exp">
        <select name='record[0][expense]'>
            <option value="">Expense</option>
            <option value="1">1-name</option>
            <option value="2">2-name</option>
            <option value="3">3-name</option>
            <option value="5">5-name</option>
            <option value="10">10-name</option>
            <option value="28">28-name</option>
        </select>
        <input type="number" step=".01" name="record[0][amount]" />

        <select name='record[1][expense]' onChange="mileage(this);">
            <option value="">Expense</option>
            <option value="1">1-name</option>
            <option value="2">2-name</option>
            <option value="28">28-another-name</option>
            <option value="32">32-name</option>
        </select>
        <input type="number" step=".01" name="record[0][amount]" />

    </form>


    <script language="javascript" type="text/javascript">

    $(document).ready(function() {

        $('#edit_emp_exp select').on('change', function(event) {
            if ( $(this).val() == 28 ) {
                $(this).next().val('.24');
            }
        });

    });

    </script>

</body>
</html>

edited Aug 24, 2016 at 20:23

answered Aug 24, 2016 at 19:21

Evgeniy Mikhalev

1,1432 gold badges8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barmar Over a year ago

Please add an explanation of what was wrong in the original code and how you fixed it.

BillyB Over a year ago

Unfortunately, this didn't work. It may have if this was the entirety of my code, but I have multiple input fields and this updated the first input field it came across. I don't know much about jQuery or javascript (obviously), so I guess I'll look into that as well. I'm now looking into adding the javascript into the php loop and passing the $t variable into the element name, but it's only working on the first field.

Evgeniy Mikhalev Over a year ago

Please check also this jsFiddle: jsfiddle.net/gcgyu4uk . Is it what you expecting?

Collectives™ on Stack Overflow

Javascript set input value based on select in an array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related