Attaching Dom Values To Requests
The mx-dom-vals
attribute in Trongate MX enables you to dynamically attach values from the DOM to your HTTP requests. This powerful feature is especially useful for transmitting information about specific elements on your page, such as the text from a headline or the value of an input field, directly to an API endpoint.
Syntax
<element mx-dom-vals='{
"paramName": {
"selector": "CSS_Selector",
"property": "Element_Property"
}
}'></element>
The mx-dom-vals
attribute should contain a JSON object, where each key represents the name of the parameter to be posted, and the value is another JSON object specifying:
selector
: The CSS selector used to find the element in the DOM.property
: The property of the element to be posted (e.g.,innerHTML
,outerHTML
,innerText
,value
).
Usage
To use the mx-dom-vals
attribute:
- Add the attribute to an element that triggers an AJAX request (e.g., a button with
mx-post
,mx-put
, ormx-patch
). - Specify the additional parameters in a JSON object format, including the CSS selector and the desired property of the element.
Example 1: Posting the Outer HTML of an H1 Element
<button mx-post="api/submit"
mx-dom-vals='{
"theHeadline": {
"selector": "h1",
"property": "outerHTML"
}
}'>
Submit Headline
</button>
In this example:
- The button sends a POST request to the specified URL.
- The
mx-dom-vals
attribute adds a parameter namedtheHeadline
with the outer HTML of the first<h1>
element on the page.
Example 2: Posting the Inner Text of a Paragraph Element
<button mx-post="api/submit"
mx-dom-vals='{
"paragraphText": {
"selector": "p.intro",
"property": "innerText"
}
}'>
Submit Paragraph Text
</button>
In this example:
- The button sends a POST request to the specified URL.
- The
mx-dom-vals
attribute adds a parameter namedparagraphText
with the inner text of the paragraph element with the classintro
.
Example 3: Posting the Value of an Input Element
<button mx-post="api/submit"
mx-dom-vals='{
"inputValue": {
"selector": "input[name='username']",
"property": "value"
}
}'>
Submit Input Value
</button>
In this example:
- The button sends a POST request to the specified URL.
- The
mx-dom-vals
attribute adds a parameter namedinputValue
with the value of the input field with the nameusername
.
Best Practices
- Security: Always follow best practices for securing your API endpoints when using
mx-dom-vals
. For more information, see Securing Endpoints With Trongate MX. - Consistency: Ensure the keys in
mx-dom-vals
match the expected field names on the server side. - Validation: Validate the additional data on the server side to ensure it meets your application's requirements.
Additional Information
- The
mx-dom-vals
attribute should contain a valid JSON object. Each key-value pair represents a parameter name and its corresponding selector and property. - Ensure that the JSON string is properly formatted to avoid parsing errors.
- The values specified in
mx-dom-vals
will be added to the HTTP request along with any existing form fields. - The
mx-dom-vals
attribute works with POST, PUT, and PATCH requests. It does not apply to GET requests.
Notes
- The
mx-dom-vals
attribute is parsed and applied to the HTTP request before it is sent. - If the JSON string in the
mx-dom-vals
attribute is invalid, an error will be logged to the console, and the values will not be applied. - Custom values can be used to manage various aspects of form submissions, such as adding hidden fields or dynamically generated data.
By utilizing the mx-dom-vals
attribute, you can enhance the flexibility and control of your HTTP requests in Trongate MX, making it easier to manage additional form values and improve the robustness of your web applications.