javascript - How to validate form based on values and submit call out to another page accordingly?

Question

How can I pause submission so that I can validate, check values, and possibly submit an xhtml callout based on the choices all before allowing the form to finally submit?

Have tried using various jquery methods found on here, using callbacks, setting timeouts, and holding in a while loop until everything's done. A lot of the alerts found in the code are only for troubleshooting/tracing purposes.

function completeTicket() {
    alert("fnOpenDiag Called");
    $("#dialog-confirm").html("Auto create return eTicket?");

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Auto create return eTicket?",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                var quickissue = "Return <?php echo ($ticketRow['items_count'] >= 1 ? $ticketRow['items'] : 'Computer'); ?>";
                var selectedLocation2 = <?php echo ($ticketRow['Location_ID'] == '' ? 0 : $ticketRow['Location_ID']); ?>;
                xmlhttp=GetXmlHttpObject();
                if (xmlhttp==null) {
                  alert ("This browser does not support XMLHTTP!");
                }

                var url="xhtmlCallOut_QuickEticket.php?callerID=pc_ticket_detail&selectedLocation_ID=" + selectedLocation2 + "&tboxIssue=" + quickissue;

                xmlhttp.open("GET",url,false);
                xmlhttp.send(null);
                if (xmlhttp.readyState==4){
                    if (xmlhttp.responseText != 0){
                        alert(xmlhttp.responseText);
                    }
                }
                alert("ticket success");
                return true;
                $(this).dialog('close');
                //callback(true);
                //callback();
            },
                "No": function () {
                return true;
                $(this).dialog('close');
                //callback(false);
                //callback();
            }
        }
    }); 
}

function checkForm() {
      alert("checkform called");
      if(document.getElementById('assocCompany').selectedIndex == 0) {
          alert('Please associte this company with a known company name\nfrom the drop list.');
          document.getElementById('assocCompany').focus();
          e.preventDefault();
          return false;
      }
      else if(document.getElementById('assignTech').selectedIndex == 0 && document.getElementById('status').selectedIndex >= 2){
          alert('You must define a technician first!');
          document.getElementById('assignTech').focus();
          e.preventDefault();
          return false;
      }
      else if(RegisterForm.elements['status'].value == 3 && RegisterForm.elements['tboxreaspend'].value.length < 3){
          alert('You must give a reason for this ticket being changed to pending');
          document.getElementById('tboxreaspend').focus();
          e.preventDefault();
          return false;
      }
      else if(RegisterForm.elements['tboxissue'].value.length < 3){
          alert('You must give a description of the issue');
          document.getElementById('tboxissue').focus();
          e.preventDefault();
          return false;
      }
      else {
          pc_ticketdetail.actionbutton.disabled=true;
          return false;
      }
}

function showPendingReason() {
    var y = document.getElementById("status");
    var val = y.options[y.selectedIndex].value;
    if (val == 3) {
        $('#trReasPend').show();
    } else {
        $('#trReasPend').hide();
    }
}

function submitForm() {
    alert("submitform called");
    var x = document.getElementById("status");
    var valx = x.options[x.selectedIndex].value;
    alert("statval is " + valx);
    if (valx == 4) {
        if (completeTicket()) {
            e.preventDefault();
            return false;
            alert("complete ticket done");
        } else {
            e.preventDefault();
            return false;
        }
    } else {
        if (checkForm()) {
            e.preventDefault();
            return false;
            alert("checkform done");
        } else {
            alert("checkform FALSE return");
            e.preventDefault();
            return false;
        }
    }
}

<div id="dialog-confirm"></div>

<form action="<?php $_SERVER['PHP_SELF']; ?>" name="pc_ticketdetail" id="pc_ticketdetail" method="post" onSubmit="return submitForm();">

<select name="status" id="status" onChange="javascript:showPendingReason();">
          <option<?php if($ticketRow['status'] == 1){ echo ' selected'; } ?> value="1">New</option>
          <option<?php if($ticketRow['status'] == 2){ echo ' selected'; } ?> value="2">Bench</option>
          <option<?php if($ticketRow['status'] == 3){ echo ' selected'; } ?> value="3">Pending</option>
          <option<?php if($ticketRow['status'] == 4){ echo ' selected'; } ?> value="4">Finished</option>      
          <?php if($ticketRow['status'] == 5){ 
              echo '<option selected value="5">Closed/Deleted</option>';
           } ?> 
        </select>

It currently seems to step through as expected except the "completeTicket" and "checkForm" functions are either not being called or not returning correctly. The form simply submits and closes when they should fail validation or open the modal dialogue and ask to create return ticket.

标签： javascript

Answer 1

Take a look on the (async - await) function in javaScript. async function