我无法将表单数据放入数组中以显示在 table 中

Question

我有一个网页，上面有一个表格，用于输入患者信息（当然都是虚拟数据）。我设置了表单和 table 来显示提交的信息。我似乎无法弄清楚为什么当用户单击 "Add Patient" 按钮时数据没有存储在数组中。我尝试多次提交数据，然后我使用"console.log(patientArray)"检查数组，它说我尝试存储的信息未定义。

这是我的网页：

@using OnboardingProject.App_Code
@using OnboardingProject.Controllers

@{
    ViewBag.Title = "Patients";
}

<div class="title">
    <div>
        <h1 style="float: left">@ViewBag.Title</h1>
    </div>
    <div class="rmm" style="float: right; display: inline-block">
        <ul>
            <li><button id="NewPatient">New Patient</button></li>
        </ul>
    </div>
</div>
<div id="modal_content">
    <div id="modal_window" title="Complete the form below to add a new patient:">
        <div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>

        <form id="add_patient" method="POST" action="#" accept-charset="UTF-8">
        <p><label>First Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="fname" value=""></label></p>
        <p><label>Last Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="lname" value=""></label></p>
        <p><label>Birthdate (mm/dd/yyyy)<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="bday" value=""></label></p>
        <p><label>Site Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="location" value=""></label></p>
        <p><label>SSN<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="pat_ssn" value=""></label></p>
        <p><input type="button" value="Add Patient" onclick="addPatient()"></p>
        </form>
    </div>
</div>
<div class="content">
    <div id="patient_table">
        <table id="patients">
            <tr>
                <th id="p_name">Patient Name</th>
                <th id="p_site">Site</th>
                <th id="dob">Date of Birth</th>
                <th id="ssn">SSN</th>
                <th id="edits"></th>
            </tr>
        </table>
    </div>
</div>
<script src="@Url.Content("~/Scripts/PatientInfo.js")" type="text/javascript></script>

这是我的 javascript 文件：

//Display the modal when New Patient button is clicked
$("#NewPatient").click(function () {
    $("#modal_window").show();
});

//Hide the modal when close is clicked
$("#modal_close").click(function () {
    $("#modal_window").hide();
});

//Create an array to store Patient Information
var patientArray = [];

var fName = document.getElementById("fname").value;
var lName = document.getElementById("lname").value;
var bDate = document.getElementById("bday").value;
var sName = document.getElementById("location").value;
var SSN = document.getElementById("pat_ssn").value;

function addPatient( fName, lName, bDate, sName, SSN ) {
    patientArray.push(fName, lName, bDate, sName, SSN);
    $("#modal_window").hide();
}

//Create a table from the array
var table = document.getElementById("patients");

var tbody = document.createElement("tbody");
table.appendChild(tbody);
patientArray.forEach(function (items) {
    var row = document.createElement("tr");
    items.forEach(function (item) {
        var cell = document.createElement("td");
        cell.textContent = item;
        row.appendChild(cell);
    });
    tbody.appendChild(row);
});

Answer 1

html 按钮调用函数 addPatient()。请注意，调用 addPatient 函数与执行前五行（函数外）无关，这是将值提取到变量中的地方。这就是为什么当函数被调用时，什么也没有发生。此外，该函数在其定义中需要 5 个参数。然后你必须调用带有 5 个参数的函数。或者将获取值的行为放在函数内部，并在不带参数的情况下调用。

换句话说，这里有两种方式： 选项 1：

将此代码移到函数 addPatient 中。删除函数的参数定义并使其成为无参数的函数。

var fName = document.getElementById("fname").value;
var lName = document.getElementById("lname").value;
var bDate = document.getElementById("bday").value;
var sName = document.getElementById("location").value;
var SSN = document.getElementById("pat_ssn").value;

选项 2：

保持addPatient函数不变。但是，创建另一个函数，例如 Fetch_And_Add_Patient() 具有以下代码：

function Fetch_Add_Patient() {
    var fName = document.getElementById("fname").value;
    var lName = document.getElementById("lname").value;
    var bDate = document.getElementById("bday").value;
    var sName = document.getElementById("location").value;
    var SSN = document.getElementById("pat_ssn").value;
    addPatient(fName, lName, bDate, sName, SSN);
}

然后在HTML按钮中，不带任何参数调用上述函数，而不是不带任何参数调用addPatient。

<p><input type="button" value="Add Patient" onclick="addPatient()"></p>

我无法将表单数据放入数组中以显示在 table 中

I can't get my form data into an array to display in a table

javascript

jquery

html

arrays

html-table