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.
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>
I want to use
<form action="someClass">
<s:textarea name="name" label="Name"/>
<s:checkboxlist list="{'Male','Female'}" name="gender" label="Gender"/>
</form>
instead of
<s:form action="someClass">
<s:textarea name="name" label="Name"/>
<s:checkboxlist list="{'Male','Female'}" name="gender" label="Gender"/>
</s:form>
Because <s:form> tag's default theme "xhtml" is not ok with my CSS and theme "simple" can't show validation errors by itself without the use of fielderror tag.
So is it valid to use it?
I'm ok by using like that till now. Is there any error that I will face for using like that in the future?
Of course you can use plain HTML tags.
Please remember that all JSP custom tags do, in the end, is render HTML.[1]
As Roman states, you'll lose things like the automatic filling of values, the retrieval of labels via the attribute name or key, the display of error messages and styling, and so on.
Your best course of action may be to create your own theme and use your own templates and CSS, or use the "css_xhtml" theme, and supply your own styles. Which is better to do depends on a fair amount of information we don't have, but the CSS HTML version is fairly flexible other than having to define the <br/> tag as being inline because it's currently used in the theme where it shouldn't be.
[1] Yes, it could do other stuff on the server side before sending over HTML, like the SQL custom tags. In general, though, the purpose of custom tags is to emit HTML.
You can use <form> tag to do with forms but it's not <s:form tag and you have to maintain it's attributes manually. <s:form renders <form> tag with the nice preset of attributes that exactly communicate with the framework. Omitting it lacks some features supplied by the framework that leads to incorrect usages and bugs.
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 have a form which has both HMTL tags and struts tags. I use the HTML tags because of alignment issues with struts tags.
<s:form action = "setNode" name = "processing" method ="POST">
<script>
<!--
createTree(catArray);
</script>
<br/>
<s:radio name="processOption" label="" list="{'Add','Move','Delete'}" ></s:radio>
<s:textfield name="node" ></s:textfield>
<s:submit name="Go" value=" Go " align="center" />
</s:form>
the createTree function creates a tree form with HTML checkbox input types.
The action triggers a java function. How do i see which checkboxes are checked?
Bad approach, I'd say.
First, have you taken a look at the generated html? (generated by struts, at least - if possible also generated by you javascript). It's the first thing to do, always.
Can you post it ?
Second, are you aware of "themes" in struts2 forms ? If you are using the default ("xhtml"), the form will be inside a table, and, if you are going to add some non-struts2 elements inside, you must be aware of that - for example, your <br/> tag seems out of place.
Third, Struts2 tags are always mixed with html tags, that their point. I guess you mean you are mixing input html tags (form elements) generated in javascript with others generated by the struts2 tags. In general, this is messy, you should try to avoid this. Even more when your tags are generated by a black-box javascript function as yours (with document.write() I guess).
You should try (except very special scenarios) to generate those checkboxes with struts2.
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>