Assume that there is a form type web element and inside there is an input text box and button. Whenever a user type into this box and click the button, he wants the page display whatever he types in the text box.
If we want to display the submitted text as the button clicked or in another way as the form submitted, the value within the input web element could be assigned to a variable. Then, this variable is append to a
tag which append to the body or another element within the body such as .Here the syntax for it.
const $message = $('#inputmessage').val()
const $div = $("
$($div).text($message)
$("h2").append($div);
Whenever I submit the text, the value submitted through the form which “#inputmessage ” represent would be store into the “$message” variable. Then, a div element would be created. Next, $message would be append to this $div element. Finally, $div element would be append to the “h2” element which is already created in html file.
What if I want to store all my consequence entries and display them all at once by clicking a button? In this scenario, the variable would not be good fit for storing values that the user type and send. The convenient ways to store multiple data are to use an array and or an object.
In our initial example, we have just one entry which is input text box. Array is a good data structure to use here. There might be more than one input. Other than input text box, there might be other input boxes for name, surname. Even there is not an entry for time stamp, we can generate and add it into the data structure. This time we would need object data structure at each indexes of an array.
To display whatever is typed into the input text box or boxes, there are two steps needed to be figured out:
o First, we need to store this input into a data structure.
o Then, we need to retrieve the data and display on the page.
Let's start with creating an empty array.
let myInputs = [];
Then, we get the value of the input and assign it to a variable. Next, we push it into the array. We trigger event by clicking the submit button.
$("#submitform").click(function(){
myInputs.push($("#inputform").val());
});
To get the value of the typed and submitted text, we need to use an attribute that represent the input text box. Since I have attribute in input text box web element, I use (“#inputform”) which represent the input box. Then, I added “.val()” method which gives me the text I type in the input text box. Now, every time I type some text into the input box, it would be saved to the array. To keep simple, I don’t have any restraint or limitation regarding character or length.
After saving our messages into an array data structure, somehow, we want to display on webpage. They can be shown on the page automatically or by clicking a web-element on the webpage. I created an “h2” title and add a click event to it.
$("h2").click(function(){
for(let i=0; i
const $div = $("").attr("class","mytexts");
$($div).text(myInputs[i])
$("h2").append($div);
}
})
The function triggered by the click event includes a for loop. Inside the for-loop, a "div" tag is created. Then the text on the current index is attached to current div element. A the end, each div element appends to the “h2” element. Now after typing and submitting several messages, when we click the “h2” element, all the messages typed are displayed on the page.
If I have multiple input boxes and so multiple values needs to be stored in a data structure. This time I need an object data structure to store various data submitted each time. I still have "myInputs" array. Instead of string, this time I would push object into the array. I need to get values from this input and put them into an object.
$("#mymessage").submit(function(e){
const obj = {};
obj.name = $('#inputname').val();
obj.message = $('#inputmessage').val();
myInputs.push(obj);
e.preventDefault();
});
When send the message, an object is created and the name I type is set as corresponding value of “name” key and the message I type into message text box is assigned as corresponding value of “message” key in this object. Then, the object is pushed to the array.
$("#mytexts").click(function(e){
for(let i=0; i
const $div = $("").attr("class","mytexts");
$($div).text(${myInputs[i].name}: ${myInputs[i].message})
$("h2").append($div);
}
e.preventDefault();
})
I make a small edition to previous code to display the names and messages entered each time. Since we have objects in each index of the array, we need to add keys with dot(.) notation. Thus, we can retrieve corresponding values from the array.
Top comments (0)