Question

我有一个小表单，应该更新数据库中的shift时间值。表单输入在被发送到处理数据库请求的php函数之前用javascript处理。

表单和提交的代码是：

<p><strong>Edit this shift:</strong></p>
<form class="col s12" action"includes/process_update.php" name="shift-update-form">
<div class="row">
    <div class="input-field col s3">
        <select name="day" id="day">
            <option value=" disabled selected>Select Day</option>
            <option value="0">Sunday</option>
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <!-- <option value="6">Saturday</option> -->
        </select>
    </div>
    <div class="input-field col s3">
        <input placeholder="3:00PM" id="start_time" type="text" class="validate">
        <label class="active" for="start_time">Start Time</label>
    </div>
    <div class="input-field col s3">
        <input placeholder="6:00PM" id="end_time" type="text" class="validate">
        <label class="active" for="end_time">End Time</label>
    </div>
    <div class="input-field col s3">
        <a onclick="return shift_update_form(this.form, this.form.day.value, this.form.start_time, this.form.end_time);" class="btn-floating btn waves-effect waves-light red"><i class="material-icons">add</i></a>
    </div>
</div>

但是，当我点击按钮提交时，我收到错误"Uncaught TypeError: Cannot read property 'day' of undefined"

那么，如何获取下拉列表的值并将其作为变量传递给javascript函数进行处理？

Answer 1

this.form无法在<a>元素中使用。如果您正在使用jQuery，则可以使用其选择器函数按ID选择元素。

<a onclick="return shift_update_form($('#day').val(), $('#start_time').val(), $('#end_time').val());" class="btn-floating btn waves-effect waves-light red"><i class="material-icons">add</i></a>

Answer 2

您在链接的this事件中使用了onclick，因此在该上下文中，this指的是链接本身，其不具有{{{{1}的属性1}}。 form属性仅适用于form等表单元素。

您可以将链接转换为提交按钮，它将起作用：

＆＃13;

input

＆＃13;

function shift_update_form(a, b, c, d) {
  console.log(a.name);
  console.log(b);
  console.log(c);
  console.log(d);
  return false;
}

＆＃13;

注意：我从

更改了传递的参数

<p><strong>Edit this shift:</strong></p>
<form class="col s12" action "includes/process_update.php" name="shift-update-form">
  <div class="row">
    <div class="input-field col s3">
      <select name="day" id="day">
            <option value="" disabled selected>Select Day</option>
            <option value="0">Sunday</option>
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <!-- <option value="6">Saturday</option> -->
        </select>
    </div>
    <div class="input-field col s3">
      <input placeholder="3:00PM" id="start_time" type="text" class="validate">
      <label class="active" for="start_time">Start Time</label>
    </div>
    <div class="input-field col s3">
      <input placeholder="6:00PM" id="end_time" type="text" class="validate">
      <label class="active" for="end_time">End Time</label>
    </div>
    <div class="input-field col s3">
      <button type="submit" onclick="return shift_update_form(this.form, this.form.day.value, this.form.start_time.value, this.form.end_time.value);" class="btn-floating btn waves-effect waves-light red"><i class="material-icons">add</i></button>
    </div>
  </div>
</form>

到

this.form.start_time, this.form.end_time

因为我认为您希望这些字段的值与您对this.form.start_time.value, this.form.end_time.value字段的值相同。

我也关闭了表单（代码中缺少结束标记），我关闭了day元素中第一个选项值的双引号。我提供的select函数仅用于演示，但上面的代码应该与您的shift_update_form()函数一起使用。如果您遇到麻烦，请将其添加到您的问题中，以便我们为您提供帮助。

使用javascript

2 个答案: