fluid template and TYPO3: Form inside a form - submit doesn't work anymore - typo3

If i insert a form inside a form, the submit button in the "outer" form doesn't work anymore.
Short code example:
<f:form action="update" name="examples" object="{examples}" >
<f:for each="{examples}" as="example"
<f:form.textfield property="name" value="" />
<f:form.checkbox property="checked" value="1" checked="0" /><br />
<f:form action="delete" name="example" object="{example}" >
<f:form.submit value="delete" />
</f:form>
<f:form.submit value="update" />
</f:form>
So basically (this is an extremely simplified version of my real life project) i want to be able to change the values of the textfield and checkbox which are then passed to the updateAction. The for each loop just generates multiple entries and therefore multiple forms just containing the delete button for that specific object so to speak. I can address these objects by __identity and they can be deleted by the button next to them, that's not the problem.
But the submit button for update doesn't work anymore if i put other forms with their respective submit buttons into this form.
Is there any solution for that?

Forms inside forms do not work (and is not proper HTML either).
Longer version that answers the question you didn't ask: to achieve your goal here, use f:link.action to create a link to the delete controller action with your {example} object as parameter. Then style that link to look like a button if you wish.

Completely unrelated from TYPO3 or Fluid you should know that nesting forms is not allowed.
However, at least the editing part of your code can be made valid with a single form:
<f:form action="update" name="examples" object="{examples}" >
<f:for each="{examples}" as="example" iteration="i">
<f:form.textfield property="{i}.name"/>
<f:form.checkbox property="{i}.checked" value="1"/>
</f:for>
<f:form.submit value="update"/>
</f:form>
With this set up it is not possible to also have a delete action in place since you'd need a submit button which does two things:
Request the delete action:
<f:form.button type="submit" name="action" value="delete">Delete</f:form.button>
Point at the entity to address:
<f:form.button type="submit" name="example" value="{example}">Do something with {example.title}</f:form.button>
You should add a separate view for editing single example objects instead. The current view then becomes a list with links to that edit view. In that view your form object becomes a single example which allows you to add two submit buttons for each action.

Related

Primefaces submit form on p:tabView tab change

I have a huge JSF application created using primefaces version 6.0 running on WebSphere Application Server, Version 8.5.5. I want to avoid nested forms so my p:tabView is not included in a form but each tab has its own form. Source for my tab view looks something like this:
<p:tabView activeIndex="#{tabViewBean.selectedTab}" id="tabView" dynamic="true" cache="false" widgetVar="tabViewWidget">
<p:ajax event="tabChange" listener="#{tabViewBean.handleTabChange}" update=":tabView" />
<p:tab id="tab1" title="First tab">
<h:form id="FirstTabForm">
<ui:include src="/views/test/firstTabTab.xhtml"/>
</h:form>
</p:tab>
<p:tab id="tab2" title="Drugi tab">
<h:form id="SecondTabForm">
<ui:include src="/views/test/secondTab.xhtml"/>
</h:form>
</p:tab>
... more tabs ...
</p:tabView>
Is there a way I can submit the form inside current tab without clicking commandButton inside it. I would like to achieve that on tab change event.
Each tab has 15-20 input fields and I don't want to use ajax on each value change because it is slowing down my application significantly.
I think you can use processattribute with a dynamic selector on tabChange event.
You can see it in action here: Ajax Framework - Partial Process

Passing value outside form

I need to get the value from outside the form. My gsp looks like this
<g:textField name="email" value="${someInstance?.email}"/>
<input type="button" id="checkEmail" class="button" value="Validate" onclick="checkEmail()"/>
<span id="responseDiv"></span>
<g:form action="save">
someCode
<g:submitButton disabled="true" style="color:#999999;" class="save" name="save" action="save" id="saveButton" value="${message(code: 'default.button.save.label', default: 'Submit')}"/>
</g:form>
First, to check if an email is in use, click button (id="checkEmail") and onclick goes to js code checkEmail() which has remoteFunction that updates responseDiv. After that, user enters information to the form, and user clicks submitButton. When that submit button is clicked, I would like my gsp to send email value along with other information to the controller. Any suggestion?
Thanks in advance.
Easy, put the input inside the form.
If that isn't an option for some reason, use the callback to update a hidden field inside the form with something like $("#hiddenEmail").val(emailAddress);
PS. I like how you gave a span an id of responseDiv :)

Binding multiple text boxes with multiple submitt buttons in same form

I have a form where I have a search functionality with a text box(TextBox1) and a submitt button(Button1). Apart from search, there is another set of textbox(TextBox2) and submitt button(Button2). When I write something in search box(TextBox1), and hit enter, the validation message of the second textbox(TextBox2) is shown.
I am not sure how to bind the respective textboxes with submitt buttons. Please help.
Thanks in advance
Depending on how much control you have, the easiest way would be to have separate forms for each texbox/button combo.
<form action="dosomething.php">
<input type="text" name="foo" />
<input type="submit" />
</form>
<form action="dosomethingelse.php">
<input type="text" name="bar" />
<input type="submit" />
</form>
If you can't or don't want to do that, you'll need to look at handling the onkeydown event on the text boxes to prevent an automatic submission. Something like <input type="Text" name="foo" onkeydown="doSubmit(this); return false;" />. Note the return false;, which prevents the default action from taking place.

mootools clone form element

I cannot get a form to submit additional fields that have been cloned. When a form like the one below is submitted, it does not include the cloned form elements. Does anybody know why and how I can alleviate this issue.
<form>
<table>
<tr><td><input type="text" value="50" name="myvar[]" /></td></tr>
<!-- This button will clone the previous set of form elements -->
<tr><input type="button" value="Add New Line" onclick="this.getParent('tr').getPrevious('tr').clone().inject(this.getParent('tr'), 'before')" /></tr>
</table>
</form>
Your HTML isn't well formed, so this.getParent('tr') is returning null at least for me in Firefox. Put the button inside a td that is inside the tr and it works.
JSFiddle: http://jsfiddle.net/delvarworld/r99fN/ clicking the button throws an error
Thanks for the comment but the form was meant to be an example not actually what I had. I looked back at the form and the top form element was inside the table and the bottom form element was outside of the table. I moved the top form element outside of the table and everything works perfectly.
thanks,

form fields clear?

i want to clear the fields of my form after the user has inserted the data in the database .I have provided a button for that but how to do that please tell me
Thanks
Ritz
<input type='reset' id='btnResetFields' value='Clear Fields' />
sets the form elements back to their initial state when the form was first loaded. [Web Application]
If it is a web application you can use reset button:
<input type="reset" value="Reset values" />