Adding localStorage data to a textbox

Question

I have a form with information with user info:

<div>
    <label for="nombre">Name</label>
    <input type="text" required class="form-control" id="nombre" placeholder="Name" pattern="([A-Z][a-zA-Z]*)" />
</div>
<div>
    <label for="apellido">Surname</label>
    <input type="text" required class="form-control" id="apellido" placeholder="Surname" pattern="([A-Z][a-zA-Z]*)" />

</div>

<div>
    <label for="email">Email</label>
    <input type="email" required class="form-control" id="email" placeholder="Your email" />
</div>

<div>
    <label for="domicilio">Mailing Address</label>
    <input type="text" required class="form-control" id="domicilio" placeholder="Your address" />

</div>

<fieldset disabled>
    <div>
        <label for="comentario">Your information:</label>
        <textarea id="comentario" rows="5" class="form-control"></textarea>
    </div>
</fieldset>


<div>
    <button type="submit" onclick="submitContacto()" class="btn btn-primary">Send</button>
</div>

This is the corresponding .js function

function submitContacto() {
    var nombre = $("nombre").value;
    var apellido = $("apellido").value;
    var email = $("email").value;
    var domicilio = $("domicilio").value;
    
    
    localStorage.nombre = nombre;
    localStorage.apellido = apellido;
    localStorage.email = email;
    localStorage.domicilio = domicilio;
    
    

}

I wanted to know how I can make it so when you click the button, the information of the localStorage appears in the textarea. I would like the textbox to show something like:

Your name: (NAME)
Your surname: (SURNAME) ...

When the submit button is pressed the page will redirect to the form action and you won't have the textarea on the page anymore, so trying to show it is a waste. You may want to have a regular button that the user first clicks which populates the textarea and then after clicking it, that button gets hidden and the real submit button appears. Also, to set items in localStorage use localStorage.setItem("keyName", value). — Scott Marcus
– Scott Marcus, Commented Nov 24, 2020 at 22:05
Assuming there is an actual <form> that was not included in the question — Taplar
– Taplar, Commented Nov 24, 2020 at 22:20

J Manifold · Accepted Answer · 2020-11-24 22:07:18Z

1

There's a few things going on here.. First - if you're using jQuery to select items by id, you must use the hashmark #

$( "#nombre" )

Secondly, in jQuery, you would use the .val() function to get an object's value

var nombre = $( "#nombre" ).val

Lastly, you would set the value of the text-area using these same principles plus standard string manipulation.

$( "#comentario" ).val("Your Name: " + nombre + "\nYour Surname: " + apellido);

Or something to that effect, in your function. JSFiddle here

answered Nov 24, 2020 at 22:07

J Manifold

12611 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J Manifold Over a year ago

Scott Marcus' comment about the form submitting to another page is very relevant.

Saikat Bhattacharyya · Accepted Answer · 2020-11-24 21:55:26Z

0

Use the below code to show the localstorage item in the text box:

Put the code in button onclick

$('#nombre').val(localStorage.getItem('nombre')

answered Nov 24, 2020 at 21:55

Saikat Bhattacharyya

677 bronze badges

Collectives™ on Stack Overflow

Adding localStorage data to a textbox

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related