How to make a custom element post its value during form submit? - custom-element

I'm creating a custom element that wraps a third-party control. For some reason, I have to apply this 3rd-party control on a <div> instead on an <input> or else it will behave differently.
I'm using x-tag to create the custom element.

You could insert a <input> tag with attribute type="hidden" and then duplicate the content of the <div> you want to post, it should work.
As an example, you can read this other post on SO.

Related

How to make a Input field in AEM/CRX required?

since our AEM guy is out of office at the moment, i need to fix something in our CRX. I have a form with a checkbox in my website, where authors can set a text next to it. Now i am trying to add the functionality to set this checkbox to be required from the authoring dialog.
I was able to find a textfield which has this property in authoring, but in the html in CRX i only see the code required=${required}, where other fields like label are shown like ${properties.label} and have a corresponding node in CRX. I don't understand how the required is implemented and need help here.
I already tried to add required=${required} to my checkbox input markup, but this did not work, since in the authoring dialog there still was no checkbox/switch to make the field required (which was kinda expected).
this is the line in the markup which should be required if the author sets it to required in the authoring dialog:
<input required="${required}" type="checkbox" name="campaignform-termsofservice"/>
this is the whole html of the checkbox i want to be able to make required:
<div data-sly-test="${!empty}" class="form__text">
<label class="maut-checkbox--container">
<input required="${required}" type="checkbox" name="campaignform-termsofservice"/>
<span class="maut-checkbox--checkmark"></span>
<span>${properties.checkboxtext #context='html'}</span>
<div>${properties.tncText}</div>
<div style="color:white;" class="authoring-error" data-sly-test="${wcmmode.edit && !tncDate.tncLinkActivationDate}">${'b2x.maut.campaignform.dialog.tos.activationmessage' # i18n, source='user'}</div>
<input type="hidden" name="maut.field.tnc" value="${tncDate.tncLinkActivationDate}" />
</label>
</div>
Now i only need to figure out how i can show the option to set it to required in the authoring dialog.
Thanks in advance
If you want to know how the required=${required} is implemented then first of all in html of the component look for something like data-sly-use.required. This will have a expression like =com.project.yourProject.className or some js file.
Lets discuss about the java case which is the most common way. What data-sly-use does is that it creates an object of the class that you gave in the expression. In your case your object is required. Then you need to check the java class that the expression evaluates to. Commonly all the backend logic code will be their and if some manipulations or validations are required to be done with the data that the author enters in the dialog will be their. This class will also contain annotations that maps the class variables with the property value of the dialog.
Hope this explains from where this ${required} came from. It will be more clear to you if you look into the java class that is referred to by the data-sly-use expression.

why use asp-controller and asp-action if it is not compulsory

#model Task3.Models.NewUser
<form action="" method="post">
<label>first Name </label>
<input type="text" placeholder="enter name" name="firstName"/>
<input type="text" placeholder="enter last name" name="lastName"/>
<button type="submit">Submit</button>
</form>
This code works even without asp-controller and asp-action. Why should I use those then?
The tag helpers asp-controller and asp-action can be used to automatically generate a target URL but you don’t have to use them. All they do is automatically generate the href attribute for links and action attributes for forms. If you want to fill in thos values manually, there is nothing that’s stopping you from doing that.
However, using the tag helpers has a clear benefit: The actual URL that you have to use depends on various things that affect your application’s routing. So if you use manual values, you have to take that into account. And if your routing changes (for whatever reason), you have to manually update the URLs throughout your templates.
By using the tag helpers, you are attaching the target location to something that is usually rather static: A controller action. So that way, you decouple the template from your routing configuration.
One more note for form actions specifically: If you do not specify a form action, the browser will automatically post to the current URL. So if you have a POST handler on the same route as the form, then you can totally omit the action and depend on that behavior.

Work around to POST requirement

I need to be able give users a link to my site with a parameter that will control their experience on the destination page, but, of course, Moqui does not allow parameters to be passed as a GET transaction. What are ways that I can work around that? It needs to be something that can be sent in an email, via sms and audibly.
An error message would be helpful know exactly what you are running into, but it sounds like the constraint to mitigate XSRF attacks.
The error message for this situation explains the issue and the recommended solution: "Cannot run screen transition with actions from non-secure request or with URL parameters for security reasons (they are not encrypted and need to be for data protection and source validation). Change the link this came from to be a form with hidden input fields instead."
You can pass URL parameters to screens to be used in code that prepares data for presentation, but not to transitions for code that processes input. The solution is to use a hidden form with a link or button to submit the form (that can be styled as a link or button or however you want). This is slightly more HTML than a plain hyperlink with URL parameters, but not a lot more and there are examples in various places in the Moqui itself.
If you are using an XML Screen/Form you can use the link element to do this with the #link-type attribute set to "hidden-form" or "hidden-form-link" (which just uses a hyperlink styled widget instead of a button styled one). If the #link-type attribute is set to "auto" (which is the default) it will use a hidden-form automatically if link goes to a transition with actions.
In plain HTML one possible approach looks something like this:
<button type="submit" form="UserGroupMemberList_removeLink_0">Remove</button>
<form method="post" action=".../EditUserGroups/removeGroup" name="UserGroupMemberList_removeLink_0">
<input type="hidden" name="partyId" value="EX_JOHN_DOE">
<input type="hidden" name="userGroupId" value="ADMIN">
</form>
Note that the button element refers to the form to submit, so can be placed anywhere in the HTML file and the form element can be placed at the end or anywhere that is out of the way (to avoid issues with nested forms which are not allowed in HTML).

How do I use html labels with dijit/form widgets?

Ok, so I'm building an app using Dojo 1.8, and I have a custom widget with a template similar to this...
<div>
<label for="tag">Select something: </label>
<select id="tag"
data-dojo-attach-point="tag"
data-dojo-type="dijit/form/Select">
<option value="0">option 0</option>
<option value="1">option 1</option>
</select>
</div>
However, when the template gets rendered, the widget defines a new id, which makes the tag useless. I've tried googling this, but all my searches just direct to the Dojo documentation since they have attributes called labels but have nothing to do with the HTML label tag.
What is the proper why to do this?
In the situation you describe, you can simply place the label around your <select> and dispose with the for/id attributes. see Stackoverflow question:
How do I align two dojo widgets next to each other?, also see: w3 tutorial on label use
Also, if you want to actually use Ids in a widget template, see:
How do I create unique IDs in a Dojo widget template?
Using ids directly (ie. hard-coding them, not assigning them on-the-fly as in the above link) is not encouraged. The reason for this is that a template is meant to used over and over again in the creation of widgets.
In theory, it could be used to create multiple widgets on one page. Hence, in that situation you would have an id conflict. Each HTML id, on any one page, needs to be unique.

HTML form submission in struts

Can I submit a simple html form with html tags and no struts tags. I'm using struts 1.0 and have a form like this:
<form action='/admin/fsubmit.html?action=search' method='post'>
<input type='text' name='keyword'>
<input type='submit' name='search' value='Search'>
</form>
I'm handling this submission with struts. but it seems like my action is never called. Do I need to use form with struts html tags?
If using struts html tags is the only option then how do I use two forms in single Action class?
The answer is yes,
The problem I see here is your action='/admin/fsubmit.html?action=search'. It's either your action is mapped to a .do extension or .html. If it's the latter, then your relative URL isn't mapped properly.