Блог

У меня есть html-форма, которая автоматически генерирует общее, среднее и оценку при применении входных данных с помощью ajax. Я пытаюсь поместить эти данные в базу данных, но вводятся только ввод1, ввод2 и ввод3, в то время как общее, среднее и оценка не вводятся. Пожалуйста, кто-нибудь может мне помочь. Заранее спасибо. Ниже приведен код

 <table class="input-table">
<tr>
    <th><?php echo htmlentities($row['SubjectName']); ?></th>
    <th><?php echo htmlentities($row['SubjectName']); ?></th>
    <th><?php echo htmlentities($row['SubjectName']); ?></th>
    <th>Total</th>
    <th>Average</th>
    <th>Grade</th>
    <th>Remark</th>
</tr>
<tr class="input-table">
    <td>
        <input id="input1" class="input" type="number" value="0" name="input1[]">
    </td>
    <td>
        <input id="input2" class="input" type="number" value="0" name="input2[]">
    </td>
    <td>
        <input id="input3" class="input" type="number" value="0" name="input3[]">
    </td>
  
    <td class="total"></td>
    <td class="ave"></td>
    <td class="grade"></td>
    <td class="remark"></td>
</tr>
 

 <script type="text/javascript">
    var $inputTable = $('.input-table'),
    gradeColors = {
        'A': 'blue',
        'B': 'green',
        'C': 'yellow',
        'D': 'red',
        'E': ''
    };

function size(obj) {
    var size = 0,
        key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size  ;
    }
    return size;
};

function checkGrade(average) {

    var grade = '--';

    if (average >= 80) {
        grade = 'A';
    } else if (80 > average amp;amp; average >= 60) {
        grade = 'B';
    } else if (60 > average amp;amp; average >= 40) {
        grade = 'C';
    } else if (40 > average amp;amp; average >= 20) {
        grade = 'D';
    } else if (20 > average amp;amp; average >= 0) {
        grade = 'E';
    }
 
    return grade;
}


function evaluate() {

    var $this = $(this),
        $group = $this.parent().parent(),
        $inputs = $group.find('.input'),
        number = null,
        total = 0,
        average = 0,
        gradeMessage = '',
        // Values from the input fields for saving.
        values = {},
        text = '--';
 
    // Remove previous error.
    if ($group.next().hasClass('error')) {
        $group.next().remove();
    }
    
    $inputs.each(function (key, value) {
        number = $(value).val();
        number = parseInt(number, 10);

        // Store the value.
        if (isNaN(number)) {

            // Break the loop and show the error.
            $('<tr></tr>').addClass('error').text('Inputs must be numbers').insertAfter($group);
            return false;
        } else {
            values['input'   key] = parseInt(number, 10);
            total  = values['input'   key];
        }
    });

    if (size(values) === 3) {

        // Calculate average.
        average = total / 3;
        grade = checkGrade(average);
        gradeMessage = $('<div></div>').text(grade);

        if (gradeColors[grade]) {
            gradeMessage.addClass(gradeColors[grade]);
        }

        // Update the grade.
        $group.find('.grade').empty().html(gradeMessage);
        $group.find('.total').text(total);
        $group.find('.ave').text(average);
    }
};

$inputTable.on('change', '.input', evaluate);
</script> 

Только поля формы ( <input> ) отправляются на сервер при отправке формы. Чтобы отправить поля итога/среднего/оценки на сервер, вам необходимо изменить их на <input> . Дайте им name readonly атрибут , чтобы убедиться, что пользователь не записывает в них:

 <td>
    <input class="ave" name="ave" readonly>
</td>
 

Также убедитесь, что ваш Javascript устанавливает их value (свойство, существующее только для входных элементов) в отличие от их содержимого ( innerHTML или аналогичного).

Имейте в виду, что нет никакой гарантии, что значения, поступающие на сервер, на самом деле являются реальными значениями, рассчитанными вашим сценарием; пользователь все равно мог их изменить ( readonly это всего лишь рекомендация для браузера, которую вы не можете полностью выполнить).

В качестве альтернативы, возможно, было бы безопаснее и проще снова вычислить эти три значения на стороне сервера в PHP, если это возможно.

Я предполагаю, что вы делаете тег формы вокруг своего кода и выполняете запрос на публикацию при отправке…?

Если это так, то передаются только те данные, которые находятся внутри входных данных, поэтому вам следует либо изменить td s class= total , ave , grade и remark на входные данные. Я бы сделал это так , добавив <input type="hidden" ... > <input ... disabled> или <input ... readonly> внутри td s

Таким образом, html хотел бы что-то вроде этого:

 <tr class="input-table">
    <td>
        <input id="input1" class="input" type="number" value="0" name="input1[]">
    </td>
    <td>
        <input id="input2" class="input" type="number" value="0" name="input2[]">
    </td>
    <td>
        <input id="input3" class="input" type="number" value="0" name="input3[]">
    </td>
  
    <td><input class="total" name="total[]" readonly /></td>
    <td><input class="ave" name="ave[]" readonly></td>
    <td><input class="grade" name="grade[]" readonly></td>
    <td><input class="remark" name="remark[]" readonly></td>
</tr>
 

А затем измените javascript, чтобы вы изменили входные значения вместо добавления текста внутри <td> s, например так:

 
function evaluate() {
   [...]
   $group.find('.grade').val(grade);
   $group.find('.total').val(total);
   $group.find('.ave').val(average);
   [...]
}
 

Пожалуйста, обратите внимание на пару вещей:

1. Я не установил тип входных данных, поэтому они вернутся к тексту, и я не знаю, будет ли это хорошо или нет для вашего варианта использования
2. Я использую grade вместо gradeText , потому что добавление <div></div> покажет, что внутри ввода
3. Вероятно, вам захочется оформить эти элементы в стиле
4. Я не смог найти, где вы разместили замечания, но я думаю, что вы можете последовать этому примеру и делать с ними все, что захотите.