formData
formData method is used to generate object data that is bound to form elements, making it easier and more efficient to handle form elements. This method will generate an object that contains the values of all form elements within the target element, and this object will reflect any changes made to the form elements in real-time.
In the following example, we demonstrate how to use the formData method to generate object data that is bound to form elements:
<!-- Import ofa.js into the project -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<form id="myForm">
<input type="text" name="username" value="John Doe" />
<div>
sex:
<label>
man
<input type="radio" name="sex" value="man" />
</label>
<label>
woman
<input type="radio" name="sex" value="woman" />
</label>
</div>
<textarea name="message">Hello World!</textarea>
</form>
<br />
<div id="logger"></div>
<script>
const data = $("#myForm").formData();
$("#logger").text = data;
data.watch(() => {
$("#logger").text = data;
});
</script>
In this example, we created a form that includes text input boxes, radio buttons, and a text area. We used the formData method to create an object called data, which contains the values of these form elements. We also used the watch method to monitor changes in the data and display the data on the page in real-time. When users modify the values of the form elements, the data object will be updated accordingly, making data processing simple and efficient.
Reverse Data Binding
The generated object data also has the ability to bind in reverse, which means that when you modify the properties of an object, the corresponding form element values will also be automatically updated. This is very useful when handling form data because you can easily achieve two-way data binding.
In the following example, we demonstrate how to use the object data generated by the formData method and how to perform reverse data binding:
<!-- Import ofa.js into the project -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<form id="myForm">
<input type="text" name="username" value="John Doe" />
<div>
sex:
<label>
man
<input type="radio" name="sex" value="man" />
</label>
<label>
woman
<input type="radio" name="sex" value="woman" />
</label>
</div>
<textarea name="message">Hello World!</textarea>
</form>
<br />
<div id="logger"></div>
<script>
const data = $("#myForm").formData();
setTimeout(()=>{
data.username = "Yao";
data.sex = "man";
data.message = "ofa.js is good!";
},1000);
</script>
In this example, we first created a form that includes a text input box, radio buttons, and a text area. Then we used the formData method to generate a data object called data. Afterwards, by modifying the properties of the data object, we achieved two-way data binding, which means the values of the form elements will automatically update as the object properties change. This two-way data binding feature makes interacting with form data more convenient.
Listen for a specific form
By default, the formData() method will listen to all input, select, and textarea elements inside the target element. However, if you only want to listen to specific form elements, you can achieve it by passing a CSS selector.
In the example below, we demonstrate how to listen for specific form elements by passing a CSS selector:
<!-- Import ofa.js into the project -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<form id="myForm">
<input type="text" name="username" value="John Doe" class="use-it" />
<div>
sex:
<label>
man
<input type="radio" name="sex" value="man" class="use-it" />
</label>
<label>
woman
<input type="radio" name="sex" value="woman" class="use-it" />
</label>
</div>
<textarea name="message">This form element is not bound</textarea>
</form>
<br />
<div id="logger"></div>
<script>
const data = $("#myForm").formData(".use-it");
$("#logger").text = data;
data.watch(() => {
$("#logger").text = data;
});
</script>
In this example, we only want to listen to form elements with the class of "use-it", so we pass ".use-it" as an argument to the formData() method. This way, only form elements with that class name will be listened to and included in the generated data object. This is useful for selectively listening to form elements in order to manage your form data more precisely.
Custom Form
Using custom form components is very simple, just add a value property and set the name attribute for the custom component.
In the example below, we create a custom form component called "custom-input". This component is an editable text box that updates its value property in real-time when the text changes.
<div id="myForm">
<input type="text" name="username" value="John Doe" />
<custom-input name="message"></custom-input>
<div id="logger"></div>
</div>
<script>
const data = $("#myForm").formData("input,custom-input");
$("#logger").text = data;
data.watch(() => {
$("#logger").text = data;
});
</script>
<template component>
<style>
:host{
display: block;
}
.editor {
display: inline-block;
min-width: 200px;
line-height: 30px;
height: 30px;
border: #aaa solid 1px;
border-radius: 4px;
padding: 4px;
font-size: 14px;
}
</style>
<div
class="editor"
contenteditable="plaintext-only"
:text="value"
on:input="changeText"
></div>
<script>
export default {
tag:"custom-input",
attrs: {
name: "",
},
data: {
value: "Default txt",
},
proto: {
changeText(e) {
this.value = $(e.target).text;
},
},
};
</script>
</template>
When you use a custom form component, you simply add it to your form and set the desired name property:
<div id="myForm">
<input type="text" name="username" value="John Doe" />
<custom-input name="message"></custom-input>
<div id="logger"></div>
</div>
<script>
const data = $("#myForm").formData("input,custom-input");
$("#logger").text = data;
data.watch(() => {
$("#logger").text = data;
});
</script>
In the above example, we use custom form components by adding the <custom-input> element and setting the name property. Then, we use the formData() method to listen to the values of input elements and custom components, in order to retrieve and process the form data in real-time. This approach allows you to easily extend your form to include custom form components, meeting your specific needs.
Using Form Data in Components or Pages
Sometimes, you may need to use form data within a component or page, and you need to generate the data during the ready lifecycle and bind it to the component.
In the following example, we demonstrate how to use form data within a custom component. This component includes a text input field that updates the data in the log in real-time when you input content.
<template component>
<style>
:host{
display: block;
}
</style>
<input type="text" name="username" value="John Doe" />
<div>{{logtext}}</div>
<script>
export default {
tag:"custom-input",
data: {
fdata:{},
logtext: ""
},
watch:{
fdata(data){
if(data){
this.logtext = JSON.stringify(data);
}
}
},
ready(){
this.fdata = this.shadow.formData();
}
};
</script>
</template>
Through the ready lifecycle, after the component is ready, we use the this.shadow.formData() method to generate the form data object fdata. Then, we use watch to listen for changes in fdata, and when the data changes, we convert it to a JSON string and update logtext to achieve real-time display of form data.