Question

我有一个模态，我把我的表格放在里面。现在，我的问题是，当我点击我的onclick="regpatient()"按钮的按钮时，弹出所需的按钮，但是当我在控制台中查看它时，由于我的onlick功能，数据由一个帖子提交。我怎么能这样做？

这是我的模态：

<div class="modal-body">
                <form class="form-horizontal" id="frm_patientreg">
                <div class="form-group">
                  <label class="control-label col-sm-3" for="pfname">First Name:</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="pafname" name="pafname" placeholder="First name" required>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="pmname">Middle Name:</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="pamname" name="pamname" placeholder="Middle name" required>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="plname">Last Name:</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="palname" name="palname" placeholder="Last name" required>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="paddress">Address:</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="paaddress" name="paaddress" placeholder="Address" required>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="pcontact">Contact #:</label>
                  <div class="col-sm-7">
                    <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" id="pacontact" name="pacontact" placeholder="Contact number" maxlength="11" required>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="pbdate">Birthdate:</label>
                  <div class="col-sm-5">
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" class="form-control" id="pabdate" name="pabdate" placeholder="Birthdate" required>
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="page">Age:</label>
                  <div class="col-sm-4">
                    <input type="number" class="form-control" id="paage" name="paage" placeholder="Age" required>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="pheight">Height:</label>
                  <div class="col-sm-4">
                    <input type="number" class="form-control" id="paheight" name="paheight" placeholder="Height (cm)" required>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="pweight">Weight:</label>
                  <div class="col-sm-4">
                    <input type="number" class="form-control" id="paweight" name="paweight" placeholder="Weight (kg)" required>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="psex">Sex:</label>
                  <div class="col-sm-5">
                    <select class="form-control" id="psex" name="psex">
                        <option value="0">--- SELECT OPTION ---</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-3" for="pmartiastat">Civil Status:</label>
                  <div class="col-sm-5">
                    <select class="form-control" id="pmartialstat" name="pmartialstat">
                        <option value="0">--- SELECT OPTION ---</option>
                        <option value="Single">Single</option>
                        <option value="Living common law">Living common law</option>
                        <option value="Married">Married</option>
                        <option value="Widowed">Widowed</option>
                        <option value="Separated">Separated</option>
                        <option value="Divorced">Divorced</option>
                    </select>
                  </div>
                </div>
            </div><!-- modal-body -->
            <div class="modal-footer">
              <button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
              </form>
              <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div><!-- modal-footer -->
    </div><!-- modal-content -->

这是我的ajax，点击我的模态页脚中的按钮时会触发：

function regpatient() {
  var a = $('#psex').val();
  var b = $('#pmartialstat').val();

  if(a == "0" || b == "0") {
    alert("Please select option");
  }
  else {
    $.ajax({
    url: siteurl+"sec_myclinic/addpatient",
    type: "POST",
    data: $('#frm_patientreg').serialize(),
    dataType: "JSON",
      success: function(data) {
        alert("Successfully Added");
        $('#frm_patientreg')[0].reset();
      }
    });
  }
}

Answer 1

如果我理解你的问题，你想要停止按钮的默认提交操作，只使用你的onclick脚本。试试这个：

$(".card").on('touchstart',function() {
     $(this).toggleClass('flipped');
});

$(".card").on('touchend',function() {
     $(this).toggleClass('flipped');
});

和

onclick="regpatient(event)"

修改

onclick函数未验证必填字段。对于所需的值，这样的一些检查应该有助于停止ajax调用。

function regpatient(event) {
    event.preventDefault();
    ...

Answer 2

使用此

<button value="button" onclick="regpatient()" class="btn btn-primary">Register Patient</button>

而不是

<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>

表单中的html不能处理模态中的问题

2 个答案:

修改