How can i post data from JSP to Servlet through JavaScript

Ranch Hand

Posts: 153

posted 4 years ago

Hi,

I've below jsp.

<%@page import="org.bean.UserBean"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
    function enableSubmit() {
        document.getElementById("getCase").disabled = true;
        document.getElementById("submitButton").disabled = false;
    }
    function enableGetCase() {
        document.getElementById("getCase").disabled = false;
        document.getElementById("submitButton").disabled = true;
    }

function dynamicdropdown(listindex) {
        document.getElementById("subcategory").length = 0;
        switch (listindex) {
        case "closed":
            document.getElementById("subcategory").options[0] = new Option(
                    "Please select framework", "");
            document.getElementById("subcategory").options[1] = new Option(
                    "Closed", "Closed");
            document.getElementById("subcategory").options[2] = new Option(
                    "Cash Apps/Financial Processing",
                    "Cash Apps/Financial Processing");

break;
        case "open":
            document.getElementById("subcategory").options[0] = new Option(
                    "Please select framework", "");
            document.getElementById("subcategory").options[1] = new Option(
                    "Waiting For BLUP", "Waiting For BLUP");
            document.getElementById("subcategory").options[2] = new Option(
                    "Waiting for Clarification from Rep",
                    "Waiting for Clarification from Rep");
            document.getElementById("subcategory").options[3] = new Option(
                    "Waiting for Supervisor Assistance",
                    "Waiting for Supervisor Assistance");
            document.getElementById("subcategory").options[4] = new Option(
                    "Need to route the case to Cash Apps/FP",
                    "Need to route the case to Cash Apps/FP");
            document.getElementById("subcategory").options[5] = new Option(
                    "Waiting for Approval", "Waiting for Approval");
            document.getElementById("subcategory").options[6] = new Option(
                    "Send Updated Invoice", "Send Updated Invoice");
            break;
        case "reassigned":
            document.getElementById("subcategory").options[0] = new Option(
                    "Please select framework", "");
            document.getElementById("subcategory").options[1] = new Option(
                    "Assigned to other agent", "Assigned to other agent");
            document.getElementById("subcategory").options[2] = new Option(
                    "Assigned to other queue", "Assigned to other queue");

break;

}
        return true;
    }

var date = Date.parse(new Date());
    function getLastDate() {
        var date = new Date();
        document.getElementById("endTime").value = [ date.getMonth() + 1,
                date.getDate(), date.getFullYear() ].join('/')
                + ' '
                + [ date.getHours(), date.getMinutes(), date.getSeconds() ]
                        .join(':');

document.postFormData.submit();

}
</script>
</head>
<body>
    <form method="post" name="postDataForm" action="PostData">
        <%
            Date date = new Date();
            SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy HH:mm:ss");
            String startFormattedDate1 = sdf.format(date);
            Date d1 = sdf.parse(startFormattedDate1);
            date = new Date();
            String startFormattedDate2 = sdf.format(date);
        %>
        <input type="Submit" value="Get Case" name="getCase" id="getCase"
            disabled="disabled" />
        <table>

<tr>
                <td>Case Number</td>
                <td><input id="caseNumber" name="caseNumber" type="text"
                    value="${userBeans[0].getCaseNumber()}" /></td>

<td>Case Owner</td>
                <td><input id="caseOwner" name="caseOwner" type="text"
                    value="${userBeans[0].getCaseOwner()}" /></td>
            </tr>
            <tr>
                <td>Source</td>
                <td><input id="source" name="source" type="text" /></td>
                <td>Status</td>
                <td><input id="status" name="status" type="text"
                    value="${userBeans[0].getStatus()}" /></td>
            </tr>
            <tr>
                <td class="auto-style2">Issue</td>
                <td class="auto-style2"><input id="issue" name="issue"
                    value="${userBeans[0].getIssue()}" type="text" /></td>
                <td class="auto-style2">Reason</td>
                <td class="auto-style2"><input id="reason" name="reason"
                    value="${userBeans[0].getReason()}" type="text" /></td>
            </tr>
            <tr>
                <td>Date/Time Opened</td>
                <td><input id="dateOpened" type="text" name="dateOpened"
                    value="${userBeans[0].getDateOpened()}" /></td>
                <td>Age(Days)</td>
                <td><input id="age" type="text" name="age"
                    value="${userBeans[0].getAge()}" /></td>
            </tr>
            <tr>
                <td>Resolution</td>
                <td><select id="Select1" name="resolution"
                    onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                        <option value="" id="">Select</option>
                        <option value="closed" id="closed">Closed</option>
                        <option value="open" id="open">Open</option>
                        <option value="reassigned" id="reassigned">Reassigned</option>
                </select></td>
                <td>Final Status</td>
                <td><select name="finalStatus" id="subcategory">
                        <option value="">Please select framework</option>
                </select></td>
            </tr>
            <tr>
                <td>Start Time</td>
                <td><input id="startTime" type="text" name="startDate"
                    value="<%=startFormattedDate1%>" /></td>
                <td>End Time</td>
                <td><input id="endTime" name="endDate" type="text" /></td>
            </tr>
        </table>
        <input type="button" value="Submit" name="submitButton"
            id="submitButton" onClick="getLastDate()" />
    </form>
</body>
</html>

Here I've 2 questions,

I'm unable to submit my data to database using a button through JavaScript. Using a submit type is good, but here i need to fill a textbox(id = endTime) with date and time when i hit submit. That's why I've used it as a button instead of submit. I thought that the button is not working, but when ever i click on that button the latest time is fetched into textbox(id = endTime).

I need a small pause of say 2-3 seconds after the time is generated in the textbox and then the post should be done.

Please let me know how can i get this and where am i going wrong.

Thanks.

Rakesh Keerthi

Ranch Hand

Posts: 153

posted 4 years ago

Hi All,

If anyone have such problem, I've found a solution that worked for me.

use an id for the form like

Then for the button add an onClick event as below

<input type="button" value="Submit Form" onclick="getLastDate()" />

and in the javascript in <head>, use the below method. Make sure that the method name is same as the onClick event attribute value.

Here i need to fill a text box with current time, so i used the below code, you have to change as per your requirement.

This is solution for my first question.

For time delay i.e. my second question.

Use a setTimeout method in javascript as below. Here 3000 means 3 seconds.

This has to be given wherever you want a time delay,

In my case, i need to get the time in text box, pause it and then submit the form data, so i took this after the time is fetched (please refer to my third code block for full js method).

This is how I've solved my problem.

Cheers,
Rakesh

Been there. Done that. Went back for more. But this time, I took this tiny ad with me:

Devious Experiments for a Truly Passive Greenhouse!

https://www.kickstarter.com/projects/paulwheaton/greenhouse-1