更新文本字段时jQuery ajax无法再次更改文本字段

Question

I am an bit lost on the following thing. I have this piece of code,

Fleet.php

function sendData(nr) {
var data = $("#myform" + nr).serialize();

console.log(data);

$("#myForm" + nr).submit(function(event){
    event.preventDefault();
});

jQuery.ajax({
    url: "inc/FleetData.php",
    datatype: "html",
    type: "POST",
    data: data,
    success:function(data)
    {
        if(data) {
            //$("#fleet").load(window.location + " #fleet");
            $('#fleet').html(data);
            //alert(data);
        } else {
            //$("#fleet").load(window.location + " #container");
            //alert("Something is wrong with the update of the collor. Please notify an admin");
            //alert(data);
        }
    }
});
}

the form

<div class="rTablecell" style="background-color: #'.$row['train_row_color'].'";>
                <form method="post" action="" id="myform' . ++$i . '" onchange="sendData('.$i.');"/>
                    <input type="hidden" name="update" value="update" />
                    <input type="text" name="value" value="'.$row['train_name'].'">
                    <input type="hidden" name="field" value="train_name"/>
                    <input type="hidden" name="id" value="'.$row['id'].'">
                </form>
            </div>

Now for the first time I change the value it will post the values to fleetData.php, then it will load the div. After that I can change the value but it will not send the data to fleetData.php, this is only happening with textfields and not with select fields.

Edit: Select Fields

<form method="post" action="" id="myform' . ++$i . '">
                <input type="hidden" name="update" value="update" />
                <select class="test" name="value" onchange="sendData('.$i.');" style="background-color: #'.$row['train_row_color'].';"> 
                <option value="" style="background-color: #ffffff"'; if($row['train_row_color'] == "") { echo 'selected'; } echo '></option>
                <option value="ff0000" style="background-color: #ff0000"'; if($row['train_row_color'] == "ff0000") { echo 'selected'; } echo '>Red</option>
                <option value="3000ff" style="background-color: #3000ff"'; if($row['train_row_color'] == "3000ff") { echo 'selected'; } echo '>Blue</option>
                <option value="36ff00" style="background-color: #36ff00"'; if($row['train_row_color'] == "36ff00") { echo 'selected'; } echo '>Green</option>
                <option value="e400ff" style="background-color: #e400ff"'; if($row['train_row_color'] == "e400ff") { echo 'selected'; } echo '>Purple</option>
                <option value="fff000" style="background-color: #fff000"'; if($row['train_row_color'] == "fff000") { echo 'selected'; } echo '>Yellow</option>
                <input type="hidden" name="field" value="train_row_color" />
                <input type="hidden" name="id" value="'.$row['id'].'" />
                </select>
                </form>

Answer 1

Couple things, you should be doing an event listener rather than an inline script, you should change on a class rather than id, and you should remove the input fields from the select:

# Might also be less code to do this once in a function
function setSelected($value,$is)
{
    return ($value == $is)? ' selected="selected"' : '';
}

?>
<form method="post" action="" class="myform">
    <input type="hidden" name="update" value="update" />
    <input type="hidden" name="field" value="train_row_color" />
    <input type="hidden" name="id" value="<?php echo $row['id'] ?>" />
    <select class="test" name="value" style="background-color: #<?php echo $row['train_row_color'] ?>">
        <option value="" style="background-color: #ffffff"<?php echo setSelected($row['train_row_color'],"") ?>><?php echo $row['train_row_color'] ?></option>
        <?php foreach(['ff000'=>'Red','3000ff'=>'Blue','36ff00'=>'Green','e400ff'=>'Purple','fff000'=>'Yellow'] as $key => $value): ?>
        <option value="<?php echo $key ?>" style="background-color: #ff0000"<?php echo setSelected($row['train_row_color'],$key) ?>><?php echo $value ?></option>
        <?php endforeach ?>
    </select>
    <input type="submit" name="SAVE" value="SAVE" />
</form>


<script>
$(function(){
    // Listen for both change and submit
    $('.myform').on('change submit',function(e){
        e.preventDefault();
        var data = $(this).serialize();

        $.ajax({
            url: "test.php",
            type: "POST",
            data: data,
            success:function(response) {
                if(response) {
                    //$("#fleet").load(window.location + " #fleet");
                    $('#fleet').html(data);
                    //alert(data);
                } else {
                    //$("#fleet").load(window.location + " #container");
                    //alert("Something is wrong with the update of the collor. Please notify an admin");
                    //alert(data);
                }
            }
        });
    });
});
</script>