Help with code - var and functions

Hi everyone. I am new here and I would really appreciate if you have a moment to help me with this code:

What I am trying to do is when the user fills in all fields and clicks on “Book” a confirmation would pop-up with everything he has written.

Does anyone have idea how to do this?

Thanks!

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.

I did that, but still no result. I think there is sth wrong with my javascript code.

By default when you put a button in a form it has a type of submit.

When you click on that button the form is submitted and page reloads.

This behavior can be prevented in more than one way.
I think at this point you have enough information to figure it out by yourself. Have fun.

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

Something bugs me about this code. Can you please post it into codepen or jsfiddle?

http://codepen.io/przemoo83/pen/qRyGbp
Like I said it’s just a quick example and needs adding more funcionalities

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.

set each of your document.getElementById().innerHTML lines to a variable

like this
var variable_name = document.getElementById(“firstName”);

instead of innerHTML each input item has a value attribute

so you can get it like this
var get_value = document.getElementById(“firstName”).value;

or like this
var variable_name = document.getElementById(“firstName”);
var get_value = variable_name.value;

then you can take your get_value variable and display it however you want.

remember if you don’t store the value in a variable(mostly) you haven’t told the computer what you are trying to work with.

also if you want to use your variables
var line1 put the variables on the left not the right

line1 = document.getElementById(“firstName”).value;

when you want to set the elements to your variables do the opposite.

document.getElementById(“firstName”).value = line1
// (line1 in this case has a value and isn’t blank)

#don’t forget using value to get users input. (i haven’t tried using innerHTML for input tags - maybe ill go try it)