Question

我是百里香的新手，想要执行javascript功能。单击提交按钮后，同一页面加载了更改的URL并且无法调用javascript函数（submitForm），而它在代码中写为：。请帮我这个如何从标签执行javascript函数submitForm提供。

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="utf-8"/>

         <meta name="viewport" content="width=device-width, initial-
          scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" id="css-main" th:href="@{/css/oneui.css}"/>
     <link rel="stylesheet" type="text/css" 
      th:href="@{/css/custom.css}"/>


    <link rel="stylesheet" type="text/css" 
     th:href="@{//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-
      awesome.min.css}"/>



  </head>

    <body class="asset-management">
    <div id="page-container" class="sidebar-l sidebar-o side-scroll 



   <main id="main-container" class="light-blue-bg" th:style="@{padding-
     left: 50px;}">
    <div id="note" class="custom-element-hidden alert">
        <span class="msg"></span>
        <span id="noteClose" class="note-close"><!-- &times;  -->
      </span>
    </div>
    <div id="olapartnerbody" class="row wide">

     <div th:if="${InstaDLState==1 and InstaDLStateStatus==0}">
     <body>

      <script 

   src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/
    jquery.min.js">
   </script>

<script type="text/javascript">
    function submitForm() {
    console.log('inside submitForm function');
    var x = 
   document.getElementById("iv_state_1").getElementsByTagName("input");
    var len = x.length-1;

    for(var i=0; len > i; i++) {
    var element = x[i];
    if(element.name === "name" ||
    element.name === "fatherName" ||
    element.name === "gender" ||
    element.name === "mobileNumber" ||
    element.name === "dl_file" ||
    element.name === "city" ||
    element.name === "dob" ||
    element.name === "alternateMobileNumber" ||
    element.name === "dlId") {
    if(element.value === "") {
    console.log("Mandatory fields are empty");
    return false;
    }
    }
    }

    $("#dl_document").submit();

    console.log(document.getElementById("dl_file_id"));

    if(document.getElementById("dl_file_id").value === "") {
    console.log("dl_file_id is empty : " + 
   document.getElementById("dl_file_id").value)
    return false;
    }
    var form = $("#iv_state_1");
    var formStr = JSON.stringify(getFormData(form));
    console.log(formStr);

    $.ajax({async:false,
    url:"http://localhost:8080/submit",
    type:"post",
    data:formStr,
    contentType:"application/json",
    processData:false,
    success: function(data) {
    console.log(data);
    window.location.reload();
    },
    error: function(data) {
    console.log(data);
    }
    });
    return false;
    }

    function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
    indexed_array[n['name']] = n['value'];
    });
    return indexed_array;
    }

    function uploadDocument() {
    console.log('checking once !!!!');
    var uploadForm = $("#dl_document");
    var formData = new FormData(uploadForm);
    var fileInput =  document.getElementById("dl_file");
    var size = Math.round((fileInput.files[0].size/1024/1024)*100)/100;
    console.log('value is ' + size);
    if(size>2)
    {
    alert('File size too large it should be less than 2 MB');
    document.getElementById('dl_file').value = "";
    return false;
    }

    $.ajax({async:false,
    url:"http://staging-docyard-pub-1689750444.ap-southeast-
   1.elb.amazonaws.com/documents/ola-staging/upload",
    type:"post",
    data:formData,
    processData:false,
    beforeSend: function(request) {
    request.setRequestHeader("X-Creator-Id","cvs");
    request.setRequestHeader("X-Folder-
    Name","deviceplatform/cvs/test1");
    request.setRequestHeader("Content-Type","application/octet-
    stream");
    request.setRequestHeader("X-File-Name","file4");
    request.setRequestHeader("X-File-Size","240");
    },
    success: function(data){
    console.log(data);
    console.log('@@@@@@@@@@@@@@@@@');
    console.log(data.id.document_id);
    $("#dl_file_id").val(data.id.document_id);
    },

    error: function(e){
    console.log(e);
    }
    })
    return false;
    }
</script>

        <form id="dl_document" onchange="return uploadDocument()">
            <input id="dl_file" required="required" type="file" 
   name="dlImage" accept="image/*"/>
        </form>

        <form id="iv_state_1" onsubmit="return submitForm()">

            <input type="hidden" name="tid" 
       th:value="${InstaveritasType}"/><br/><br/><br/>
            <label><b>Name</b></label>
            <input required="required" type="text" placeholder="Enter 
       Name" name="name" /><br/><br/><br/>

            <label><b>Father Name</b></label>
            <input required="required" type="text" placeholder="Enter 
       Father Name" name="fatherName" /><br/><br/><br/>

            <label><b>Gender</b></label>
            <input required="required" type="text" placeholder="Gender" 
         name="gender" /><br/><br/><br/>

            <label><b>Mobile Number</b></label>
            <input required="required" type="text" placeholder="Mobile 
        Number" name="mobileNumber" /><br/><br/><br/>

            <label><b>City</b></label>
            <input required="required" type="text" placeholder="City" 
        name="city" /><br/><br/><br/>
            <label><b>Date of Birth</b></label>
            <input  required="required" placeholder="Date of Birth" 
         class="textbox-n" type="text" onfocus="(this.type='date')" 
        onblur="(this.type='text')" id="date" name="dob"/><br/><br/>
      <br/>
            <label><b>Alternate Mobile Number</b></label>
            <input required="required" type="text" 
       placeholder="Alternate Mobile Number" 
     name="alternateMobileNumber" /><br/><br/><br/>

            <label><b>dl Number</b></label>
            <input required="required" type="text" placeholder="dl 
      Number" name="dlId" /><br/><br/>


            <br/> <input type="submit"/>

        </form>
   </body>
        </div>

    </div>
  </main>
    </div>

  </body>

  </html>

onsubmit =“return submitForm（）”没有调用函数：thymeleaf中的submitForm（）

0 个答案: