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)
Related
I have the followin question, how will I pass multiple values from one jsp page to another? I have i piece of code here, which works fine, but it only sends one value from one page to another (year):
<form method="post" action="Display data.jsp" name="inputpage" >
<select name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
For example if I had another value, for example
String str = "value";
Is it possible to send it using form post method as well? I googled it, and the answer I found included loops and too much code, is there short and simple way of doing it? Many thanks!
When you submit the form all values of the form will be passed, they only need to be inside the form. You can read other values normally by using:
request.getParameter(ParamName)
Take a look at this article for more information
You can send as many variable you want by Form Method.
For sending the value of String Str, assign its value to hidden field as:
<input type="hidden" id="hidden1" value=<c:out value="${variableName}" />
where variableName=str.
Could you use a hidden input inside your form to pass other data using the form post?
<input type='hidden' id='myExtraData' value='hello' />
I am trying to update the existing code of other developer. I am facing the problem of confusing actions.
Existing :
<s:form name="f2" action="delFood.action">
<input type="submit" value="Delete" class="button" onClick="javascript:get_check_value()"/>
My Code to Update:
<input type="file" class="button" id="foodItemFile" name="foodItemFile" value="Browse ..."/>
<input type="submit" class="button" value="AddFood" onClick="callAddFood();"/>
My Javascript:
In my script, I try to submit my action by following code.
document.f2.action = "AddFoodAction.action";
document.f2.submit();
It seems like when I click [AddFood] button, it always call the [delFood.action].
For adding food, I need to check something with javascripts before calling the [AddFoodAction.action] action.
Due to limitations, I can't change the existing code. I can only add new codes to the existing one.
So, Any way to call [AddFoodAction.action] from javascripts without confusing with other actions of the same form ?
Thanks ahead.
Looks like a javascript problem here. Make sure the code
document.f2.action = "AddFoodAction.action";
document.f2.submit();
is executing. Maybe document.f2 is not resolving correctly (maybe more than one form with this name?).
This fiddle shows that it should work. It changes the action of a form inside a onclick handler on a <input type="submit">.
And just a reccomendation, don't do document.f2.submit();. It's an <input type="submit"> so it will submit the form automatically when onclick ends.
Finally, I resolve it by doing like that.
1) There will no direct action in form tag.
<s:form name="f2" method="post" enctype="multipart/form-data">
2) for delete part,
<input type="submit" value="Delete" class="button" onClick="javascript:get_check_value()"/>
call the delete action from the javascript, not directly from form.
document.f2.action = "delFood.action";
3) for add part, like delete part. check necessary things in java scripts and call the add action. It works well.
Another Solution:
There maybe common action directly called from Form. For this approach, just name your button and give value and map those value from action class. And differentiate multiple methods by using those value from one action. I read this article at coderanch and javaSample. Thanks.
This is a follow on to my previous question:
JSP / servlet / IE combination doesn’t submit form detail on Enter
Inside the form, we have:
<input ... type="submit" name="confirm" value="Confirm"/>
There are no input fields on this form. This form appears at the end of a workflow and is essentially a verification to proceed.
This form is not submitted to either IE or Firefox when the Enter key is pressed. It works perfectly if the "Confirm" button is pressed.
Following on the answer to my previous question, I have tried adding dummy fields such as:
<input type="hidden" />
or
<input type="text" style="display: none;" />
but they make no difference.
For various reasons, we would prefer not to use Javascript.
Any suggestions to get the Enter key to submit?
Unfortunately, you should have at least one focusable input element in the form to get that to work and then only when the input has focus. If you don't have any input elements, then there's no other way to get around this than by letting Javascript to listen on the enter key in the body.
<body onkeypress="if (event.keyCode == 13) document.formname.confirm.click();">
Where formname is the value of the name attribute of the parent <form> element.
Note that I used document.formname.confirm.click() instead of document.formname.submit(), because otherwise IE wouldn't send the name=value pair of the button to the server side.
The only Javascript-free way would be to let the user to tab to the button and then press enter. This all is by the way regardless of the browser used and thus not IE specific.
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.
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>