Well, have you noticed what happens when you click a button that’s inside of a form element?
Add another button that is outside of the form and click on it.
Can you spot the difference?
Ping me up if you won’t be able to figure it out after 15 mins.
If you add data attribute to your inputs like this First Name: <input type="text" id="firstName" data-label="First Name"/><br/>
you could implement something like that
var book = document.querySelector('#book');
var inputs = document.querySelectorAll('input');
var confirm = document.querySelector('#confirmation');
book.addEventListener('click',function(e){
e.preventDefault();
confirm.innerHTML = "";
for(var i=0; i<inputs.length; i++){
appendData(inputs[i].value, inputs[i].getAttribute('data-label'));
}
},false)
function appendData(content,fieldName){
var div = document.createElement('div');
div.innerHTML = fieldName+":"+content;
confirm.appendChild(div);
}
and then style the confirmation container accordingly to show after click. I’m not saying that’s the best solution but just one of the examples how to achieve this
Oh, sorry @przemoo83, I meant @baxelino’s code that he posted as a pic. It’s hard to reason about an image.
But well, you’ve posted a valid solution so he should be more than happy.