I have got two forms in a page. The second form has got a file upload input component along with other controls. My requirement is to submit the second form with the file and refresh only that form without refreshing the other form. If it was only normal components, I could have done this easily in Ajax. But when the form is having a file component, I feel its not that straigh forward. Please suggest any ideas to do it???
You can still use AJAX on a form with file components. Maybe you can use the jQuery library (if you are not already) since that makes these tasks trivially easy.
Put the second form in an iframe.
The way I have done it in the past is to hide an iframe on the page. Then set the target of the file upload form to the name that was given to the iframe. If you need to be xhtml compliant you can use JavaScript to create the iframe after the page loads and to set the target on the form. The code will look something like this. You can apply css to the frame to hide it.
<iframe name="myFrame" src="blank.htm"></iframe>
<form action="uploadFile.php" method="post" enctype="multipart/form-data" target="myFrame">
<input type="file" name="myFile"/>
<input type="submit" value="Upload"/>
</form>
Related
I'm fairly new to Thymleaf and Spring, and I'm taking a course that is using JSP for client view pages. I couldn't set up JSP using Spring Initializr so I resorted to using Thymeleaf instead (I figured I would end up using Thymeleaf normally anyways)
My question is, how Do i pass form data from one HTML, to another page? I've tried looking at the documentation, and googling around and couldn't find anything.
I have already tried using, a class to set up the Objects, and variables (and i know this is a way of doing it, i'll eventually get to the part of learning how to do that), but I'm just trying to get data from one form to another page.
In JSP you can do this
htmlpageOne.html
<form action="processForm" method="GET">
<input type="text" name="studentID"/>
<input type="submit"/>
</form>
htmlpageTwo.html
<body>
Student ID: ${param.studentID}
</body>
Using JSP you can call the studentID from the past form without having to store it in any Object and having to create any thing else.
I know the data won't really go anywhere and isn't stored, but just for simplicity and demonstration, is there any way to do the same with Thymeleaf?
any help or direction would be very much appreciated
Yes, thymeleaf supports request parameters.
https://www.thymeleaf.org/doc/articles/springmvcaccessdata.html#request-parameters
<body>
Student ID: <span th:text="${param.studentID}" />
</body>
Hi I wrote the below code in a jsp file to upload a file. But before I upload I want to display the entire path of the file in the current jsp itself
<form method="post" action="SendTheFileName">
<div id="Files_to_be_shared">
<input type="file" id="File" name="FileTag" />
<input type="submit" value="Share" />
</div>
Complete path of the file is <%=request.getParameter("File");%>//Is this correct?
I am not getting the complete path value. I get null instead. Can you please let me know how to get the complete path in the current jsp itself
Jsp's are made on the server and file is uploaded by user, in browser, by the time it will be uploaded - there will be no scriplets on your html page at all, meaning those parameter value will be tried to obtain during jsp creating, where it is obviously null(unless request really contains such value). To run code on the client use javascript, for example here is how to do what you want using javascript.
P.S. consider using EL, scriplets are considered harmful, there are plenty of info about this on the net
I'm trying to access form data that is filled out inside a jsp:included page from outside the page. I am using jquery and am open to using ajax. My code looks a little like this:
<form name=form1>
<jsp:include page="someFormData.jsp" />
//Other inputs out here in <% include %> files
<input type=button value=Submit onClick="return commonSubmit()"
</form>
I need to use the jsp:include style include because having everything on one page using
<%include...%> was causing an exception due to my jsp being too large. Alls I need to do is be able to submit the form and include the data inside "someFormData.jsp"
I have input text:
<div><label wicket:for="name">Name</label><input type="text" wicket:id="name" /></div>
Now I need to add two buttons which just add to this input text some value. How can I implements this ?
with this buttons I dont want do send form just edit value in input rext
You don't have to send the whole form. You could use an AjaxButton with an onClick-method changing the model of your input field and adding the field to the AjaxRequestTarget. Anything not involving a server roundtrip at least by Ajax would be hard to do using wicket methods since wicket runs on the server. Of course you could do this by JavaScript but that wouldn't involve wicket.
Use <input type="button">Click Me</input>.
and at onclick event of these buttons call a javascript function which will edit the input text.
This has nothing to do with Wicket, this is just plain Javascript.
You can do something like this
<div>
<label wicket:for="name">Name</label>
<input type="text" wicket:id="name" id="markupId"/>
<input type="button" value="Do something" onclick="javascript:editField();"/>
</div>
With the following Javascript somewhere in your page (or in loaded script files):
function editField(){
document.getElementById("markupId").value = "My value";
}
If you use a Javascript framework like JQuery, you should bind the function to the onclick event using your framework (prevents polluting HTML with your javascript)
I am trying to make a dynamic form using Spring forms. Basically, the form gets a title of learning activity and then there's the a button below it that says, "Add one more Learning Activity". This makes it possible for the user to add one more learning activity. I want him to be able to add as much as he likes.
I haven't tried this before so obviously I encountered errors with the first solution I thought of. I really had a feeling doing what I did will generate an error but just do drive home what I am trying to do, here's the code:
<script language="javascript">
fields = 0;
function addInput() {
document.getElementById('text').innerHTML += "<form:input path='activity[fields++].activity'/><br />";
}
<div id="text">
<form:form commandName="course">
Learning Activity 1
<form:input path="activity[0].activity"/>
<input type="button" value="add activity" onclick="addInput()"/>
<br/><br/>
<input type="submit"/>
</form:form>
<br/><br/>
</div>
You can't use <form:input> within the javascript because is a jsp tag that runs on the server-side.
However, there's nothing magical about how an HTML input gets bound to a field in the Spring command object; it's just based on the name. So in your javascript, add a new
<input type="text" name="activity[1].activity">
(for example -- obviously you'll increment the index).
Another option I've used for more complicated controls is to grab the HTML of the existing control (which was created using the Spring form:input tag) and clone it, replacing the indexes with the incremented number. This gets a lot easier if you use jQuery.
EDITED TO ADD:
One issue that may cause you problems: you're appending your new input box to the end of your outer div ("text"), which means it's not inside the form tags. That won't work.
Is <form:input> a JSP tag? If so, then client-side Javascript to add <form:input> nodes to the DOM will have no effect - since the server-side JSP engine is not interpreting those.
Your Javascript needs to work with raw HTML and DOM, such as adding an <input> element.