CODEWITHSUNDEEP
javascripthtmljquery
ULPGCstudent
ULPGCstudent

Reputation: 74

Adding localStorage data to a textbox

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:

Upvotes: 0

Views: 55

Answers (2)

J Manifold
J Manifold

Reputation: 126

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

Upvotes: 1

Saikat Bhattacharyya
Saikat Bhattacharyya

Reputation: 67

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

Put the code in button onclick

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

Upvotes: 0

Related Questions