我是百里香的新手,想要执行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"><!-- × -->
</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>