Как получить значение входных динамических пользовательского HTML с помощью Javascript

У меня есть эти динамические входы пользователей со следующими типами:Как получить значение входных динамических пользовательского HTML с помощью Javascript

Расходов: <selection> Пользователь будет выбрать 1 вариант
Денег ввода: ввод данных пользователя какой-либо текст Я получил помощь.

Я хочу Тезисы 2 значения, приведенные выше.

Я хочу получить значения этих динамических пользовательских входов с использованием JavaScript.

Здесь код приведен ниже: Update: решена

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
     table, th, td { 
 
     border-collapse: collapse; 
 
     } 
 
     </style> 
 
     <script> 
 
     function addMore() { 
 
      var table = document.getElementById("myTable"); 
 
      var row = table.insertRow(-1); 
 
      var cell1 = row.insertCell(-1); 
 
      var cell2 = row.insertCell(-1); 
 
      
 
     var x = document.getElementById("myTable").rows[1].cells; 
 
      
 
      cell1.innerHTML = x[0].innerHTML; 
 
      cell2.innerHTML = x[1].innerHTML; 
 
     } 
 
      
 
      
 
     function removeLast() { 
 
      document.getElementById("myTable").deleteRow(-1); 
 
     } 
 
      
 
     </script> 
 
    </head> 
 
    <body> 
 
     <form action="payroll.php" method="post"> 
 
     <table id="myTable"> 
 
      <tr> 
 
       <th>Costs</th> 
 
       <th>Money Input</th> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <select class="mySelect" name="DESCR" > 
 
        <option disabled="" selected="">Select</option> 
 
        <option value="BASIC PAY">BASIC PAY</option> 
 
        <option value="GAS BILL">GAS BILL</option> 
 
        <option value="CLUB">CLUB</option> 
 
        <option value="MEDICINE">MEDICINE</option> 
 
        <option value="BANK LOAN">BANK LOAN</option> 
 
        </select> 
 
       </td> 
 
       <td> <input type="text" name="ALAMT"></td> 
 
      </tr> 
 
     </table> 
 
      
 
     </form> 
 
     <br> 
 
     <button onclick="addMore()">Add More</button> 
 
     <button onclick="removeLast()">Remove</button> 
 
     <button onclick="myFunction()">Try it</button> 
 
    </body> 
 
    <script> 
 
     function myFunction() { 
 
     
 
var select = document.getElementById("myTable").rows[1].cells[0].firstElementChild; 
 
    var selectValue = select.options[select.selectedIndex].value; 
 
    var ocell = document.getElementById("myTable").rows[1].cells[1]; 
 
    alert("Selected Index: "+selectValue+"\nInput value: "+ocell.firstElementChild.value); 
 
    
 
     
 
     } 
 
    </script> 
 
</html>

Используя этот код каждый я получаю errors.But я хочу <option> значение, только выбранный пользователем, а не все.

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

источник

2015-12-28 user5005768

Вы получаете HTMLTableCellElement объект, так как вы не указываете, что вы хотите получить от cells[0], следует добавить .textContent, если вы хотите, чтобы получить текст внутри колонки:

document.getElementById("myTable").rows[1].cells[0].textContent

Или .innerHTML если вы хотите, чтобы получить HTML внутри колонки:

document.getElementById("myTable").rows[1].cells[0].innerHTML

Если вы хотите, чтобы получить выбранный вариант формы избранных пользователем в «Затраты» выберите, я предлагаю использовать вместо классов .mySelectid="mySelect", так как идентификатор должен быть уникальным в том же документе, а также использовать querySelector например:

var costs = document.querySelector('#myTable tr:nth-child(2) td:nth-child(1) .mySelect option:checked').value; 
var money = document.querySelector('#myTable tr:nth-child(2) td:nth-child(2) input").value;

Надеюсь, это поможет.

function addMore() { 
 
    var table = document.getElementById("myTable"); 
 
    var row = table.insertRow(-1); 
 
    var cell1 = row.insertCell(-1); 
 
    var cell2 = row.insertCell(-1); 
 

 
    var x = document.getElementById("myTable").rows[1].cells; 
 

 
    cell1.innerHTML = x[0].innerHTML; 
 
    cell2.innerHTML = x[1].innerHTML; 
 
} 
 

 

 
function removeLast() { 
 
    document.getElementById("myTable").deleteRow(-1); 
 
} 
 

 
function myFunction() { 
 
    var costs = document.querySelector('#myTable tr:nth-child(2) td:nth-child(1) .mySelect option:checked').value; 
 
    var money = document.querySelector('#myTable tr:nth-child(2) td:nth-child(2) input').value; 
 

 
    document.getElementById('result').textContent = costs+' - '+money; 
 
}

table, th, td { 
 
    border-collapse: collapse; 
 
}

<form action="payroll.php" method="post"> 
 
    <table id="myTable"> 
 
    <tr> 
 
     <th>Costs</th> 
 
     <th>Money Input</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select class="mySelect" name="DESCR" > 
 
      <option disabled="" selected="">Select</option> 
 
      <option value="BASIC PAY">BASIC PAY</option> 
 
      <option value="GAS BILL">GAS BILL</option> 
 
      <option value="CLUB">CLUB</option> 
 
      <option value="MEDICINE">MEDICINE</option> 
 
      <option value="BANK LOAN">BANK LOAN</option> 
 
     </select> 
 
     </td> 
 
     <td> <input type="text" name="ALAMT"></td> 
 
    </tr> 
 
    </table> 
 

 
</form> 
 
<br> 
 
<button onclick="addMore()">Add More</button> 
 
<button onclick="removeLast()">Remove</button> 
 
<button onclick="myFunction()">Try it</button> 
 
<br> 
 
<span id='result'></span>

источник

2015-12-28 10:30:55

Благодаря @Zakaria Acharki для reply.But Я хочу только выбранный вариант формирования избранных пользователем в 'затраты' Drop Down и вставленного пользовательского значения в поле «Ввод денег». Пожалуйста, предложите мне. Спасибо. – user5005768

Добро пожаловать, проверьте мое обновление, пожалуйста. –

Спасибо @Zakaria Acharki за ответ. Но все же он не показывает пользователю данные входы только. Спасибо. – user5005768

var select = document.getElementById("myTable").rows[1].cells[0].firstElementChild; 
    var selectValue = select.options[select.selectedIndex].value; 
    var ocell = document.getElementById("myTable").rows[1].cells[1]; 
    alert("Selected Index: "+selectValue+"\nInput value: "+ocell.firstElementChild.value);

источник

2015-12-28 10:57:37

Спасибо @Sunil B N за ответ. Но я действительно хочу использовать ввод, который выбирается пользователем только из данного списка для поля Costs и введенного пользователем значения в поле «Деньги». Спасибо снова. – user5005768

ocell.firstElementChild.value дает поле денежного значения –

Спасибо @Sunil B N за ответ. Он работал для второго. Как насчет первого входа [списка]. У вас есть идеи. Спасибо. – user5005768

Как получить значение входных динамических пользовательского HTML с помощью Javascript

ответ

Смежные вопросы