Я могу получить значение ввода текста только за 1 раз

у меня есть форма с 4 ввода. мне нужно получить значения этой формы, когда пользователь нажимает кнопку. я использую следующие коды. но только в первый раз после загрузки страницы возвращаются значения текстовых вводов. во второй раз значение выпадающего ввода возвращается правильно, но функция возвращает значение null для текстовых входных значений.

<html>
    <head>
        <meta charset = "utf-8"> <!-- برای فارسی نویسی حتما این تگ وارد شود -->
    </head>
    
    <body>
    
        <form name = "insuranceData">
            total: <input name = "totalPrice" type = "text" size = "10"/>
            <br/>
            <br/>
            prePayment: <input name = "prePayment" type = "text" size = "10"/>
            <br/>
            <br/>
            peyments number: <select name = "numberOfPeyments">       
                <option value = "1">1</option>
                <option value = "2">2</option>
                <option value = "3">3</option>
                <option value = "4">4</option>
                <option value = "5">5</option>
                <option value = "6">6</option>
            </select>
            <br/>
            <br/>
            <input name = "paymentsCalculat" value = "محاسبه اقساط" type = "button" size = "10" onClick = "checkInputs();"/>
            
            <div id = "paymentsTableDiv" style = "display:none">
                <table width = "40%" align = "center" dir = "rtl" id = "paymentsTable" style = "text-align:center;">
                    <tr bgcolor = "red"><th>شماره قسط</th><th>مبلغ قسط</th><th>تاریخ سررسید</th><th>توضیحات</th></tr>                     
                </table>            
            </div>
    
            
        </form>
                
                
        <script type = "text/javascript">
                
            function getFormValues(){
                var numberOfPeyments = document.forms["insuranceData"]["numberOfPeyments"].value;
                var totalPrice = document.forms["insuranceData"]["totalPrice"].value;
                var prePayment = document.forms["insuranceData"]["prePayment"].value;
    
                return [numberOfPeyments,totalPrice,prePayment,];
                }
            
            function checkInputs(){
                insuranceParams=getFormValues();
                if (insuranceParams[1]= = ""){
                    alert("مبلغ کل حق بیمه را وارد نمایید ");
                }else if (insuranceParams[2]= = ""){
                    alert("مبلغ پیش پرداخت را وارد نمایید ");
                }else{
                    if (parseInt(insuranceParams[1]) > parseInt(insuranceParams[2])){
                    createPaymentsTable();
                    }else{
                        alert("مبلغ پیش پرداخت نباید از مبلغ کل حق بیمه بیشتر باشد!");
                    }
                }                                   
            }
            
            function createPaymentsTable(){
                var insuranceParams=getFormValues();
                var remindeValue=insuranceParams[1]-insuranceParams[2];
                var ValueOfAnyPayments=remindeValue/insuranceParams[0];             
                                
                document.getElementById("paymentsTableDiv").style.display = 'block';
                                
                for (i=1;i<=parseInt(insuranceParams[0]);i++){
                    var newRow=document.getElementById('paymentsTable').insertRow();
                    newRow.innerHTML = "<td>"+i+"</td>"+
                    "<td><input id='DEMO' dir='ltr' name='prePayment' type='text' size='10' value='"+ValueOfAnyPayments+"'/></td>"+
                    "<td>"+i+"</td>"+
                    "<td><input dir='rtl' name='prePayment' type='text' size='10'/></td>";                  
                }
                                
            }
                
                
        </script>   
                
    </body>
</html>

Итак, у вас есть 3 входа... и вы хотите получить значения всех из них?

— 18.12.2020 17:01

javascript

18.12.2020 16:46

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Руководство ChatGPT по продаже мини JS-файлов

JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я не знаю, почему вы не получаете никаких значений с помощью document.forms, но вы можете решить эту проблему, используя вместо этого document.querySelector.

Посмотрите ниже

function getFormValues() {
  var numberOfPeyments = document.querySelector("[name=insuranceData] [name=numberOfPeyments]").value;
  var totalPrice = document.querySelector("[name=insuranceData] [name=totalPrice]").value
  var prePayment = document.querySelector("[name=insuranceData] [name=prePayment]").value
  console.clear();
  console.info([numberOfPeyments, totalPrice, prePayment, ])
  return [numberOfPeyments, totalPrice, prePayment, ];
}

function checkInputs() {
  insuranceParams = getFormValues();
  if (insuranceParams[1] == "") {
    alert("مبلغ کل حق بیمه را وارد نمایید ");
  } else if (insuranceParams[2] == "") {
    alert("مبلغ پیش پرداخت را وارد نمایید ");
  } else {
    if (parseInt(insuranceParams[1]) > parseInt(insuranceParams[2])) {
      createPaymentsTable();
    } else {
      alert("مبلغ پیش پرداخت نباید از مبلغ کل حق بیمه بیشتر باشد!");
    }
  }
}

function createPaymentsTable() {
  var insuranceParams = getFormValues();
  var remindeValue = insuranceParams[1] - insuranceParams[2];
  var ValueOfAnyPayments = remindeValue / insuranceParams[0];

  document.getElementById("paymentsTableDiv").style.display = 'block';

  for (i = 1; i <= parseInt(insuranceParams[0]); i++) {
    var newRow = document.getElementById('paymentsTable').insertRow();
    newRow.innerHTML = "<td>" + i + "</td>" +
      "<td><input id='DEMO' dir='ltr' name='prePayment' type='text' size='10' value='" + ValueOfAnyPayments + "'/></td>" +
      "<td>" + i + "</td>" +
      "<td><input dir='rtl' name='prePayment' type='text' size='10'/></td>";
  }

}

<form name = "insuranceData">
  total: <input name = "totalPrice" type = "text" size = "10" />
  <br/>
  <br/> prePayment: <input name = "prePayment" type = "text" size = "10" />
  <br/>
  <br/> peyments number:
  <select name = "numberOfPeyments">
    <option value = "1">1</option>
    <option value = "2">2</option>
    <option value = "3">3</option>
    <option value = "4">4</option>
    <option value = "5">5</option>
    <option value = "6">6</option>
  </select>
  <br/>
  <br/>
  <input name = "paymentsCalculat" value = "محاسبه اقساط" type = "button" size = "10" onClick = "checkInputs();" />

  <div id = "paymentsTableDiv" style = "display:none">
    <table width = "40%" align = "center" dir = "rtl" id = "paymentsTable" style = "text-align:center;">
      <tr bgcolor = "red">
        <th>شماره قسط</th>
        <th>مبلغ قسط</th>
        <th>تاریخ سررسید</th>
        <th>توضیحات</th>
      </tr>
    </table>
  </div>
</form>

18.12.2020 17:03

Перехватывая элементы document.getElementById("myForm").elements;, вы можете прочитать значения формы. Также нет необходимости вызывать функцию getFormValues() во второй раз из функции createPaymentsTable(). Вы можете передавать значения при вызове getFormValues() из функции checkInputs(). Взгляните на фрагмент ниже:

<html>

<head>
    <meta charset = "utf-8"> <!-- برای فارسی نویسی حتما این تگ وارد شود -->
</head>

<body>

    <form name = "insuranceData" id = "myForm">
        total: <input name = "totalPrice" type = "text" size = "10" />
        <br />
        <br />
        prePayment: <input name = "prePayment" type = "text" size = "10" />
        <br />
        <br />
        peyments number: <select name = "numberOfPeyments">
            <option value = "1">1</option>
            <option value = "2">2</option>
            <option value = "3">3</option>
            <option value = "4">4</option>
            <option value = "5">5</option>
            <option value = "6">6</option>
        </select>
        <br />
        <br />
        <input name = "paymentsCalculat" value = "محاسبه اقساط" type = "button" size = "10" onClick = "checkInputs();" />

        <div id = "paymentsTableDiv" style = "display:none">
            <table width = "40%" align = "center" dir = "rtl" id = "paymentsTable" style = "text-align:center;">
                <tr bgcolor = "red">
                    <th>شماره قسط</th>
                    <th>مبلغ قسط</th>
                    <th>تاریخ سررسید</th>
                    <th>توضیحات</th>
                </tr>
            </table>
        </div>
    </form>




    <script type = "text/javascript">

        function getFormValues() {
            var fields = document.getElementById("myForm").elements;
            var numberOfPeyments = fields[0].value;
            var totalPrice = fields[1].value;
            var prePayment = fields[2].value;

            console.info(numberOfPeyments, totalPrice, prePayment);

            return [numberOfPeyments, totalPrice, prePayment];
        }

        function checkInputs() {
            var insuranceParams = getFormValues();
            if (insuranceParams[1] == "") {
                alert("مبلغ کل حق بیمه را وارد نمایید ");
            } else if (insuranceParams[2] == "") {
                alert("مبلغ پیش پرداخت را وارد نمایید ");
            } else {
                if (parseInt(insuranceParams[1]) > parseInt(insuranceParams[2])) {
                    createPaymentsTable(insuranceParams);
                } else {
                    alert("مبلغ پیش پرداخت نباید از مبلغ کل حق بیمه بیشتر باشد!");
                }
            }
        }

        function createPaymentsTable(insuranceParams) {
            // var insuranceParams = getFormValues();
            var remindeValue = insuranceParams[1] - insuranceParams[2];
            var ValueOfAnyPayments = remindeValue / insuranceParams[0];

            document.getElementById("paymentsTableDiv").style.display = 'block';

            for (i = 1; i <= parseInt(insuranceParams[0]); i++) {
                var newRow = document.getElementById('paymentsTable').insertRow();
                newRow.innerHTML = "<td>" + i + "</td>" +
                    "<td><input id='DEMO' dir='ltr' name='prePayment' type='text' size='10' value='" + ValueOfAnyPayments + "'/></td>" +
                    "<td>" + i + "</td>" +
                    "<td><input dir='rtl' name='prePayment' type='text' size='10'/></td>";
            }

        }


    </script>

</body>

</html>

так танки. но я не могу вывести таблицу из формы. потому что мне нужно импортировать некоторые данные в эту таблицу, которые должны быть отправлены с формой.

— 18.12.2020 17:31

@HadiTaj, понял, обновил ответ. Вы можете посмотреть.

— 18.12.2020 17:48

18.12.2020 17:26