Question

Hi i have this html code which shows an input field:

<div data-role="content" data-theme="a">
                <div id="#wijzig">
                    <h3>Uw e-mail adres</h3>

                    <p>
                        <input type="button" onclick="$(this).closest('.ui-btn').hide(); $('form').show();" value="Wijzig mijn e-mailadres" />
                    </p>


                    <form action="javascript:getUpdateValues();" method="post" style="display:none;">
                        <div class="ui-grid-a">
                            <div class="ui-block-a">E-Mail: <input type="text" id="email" name="email" style = "margin-top: .6em; padding-right: 0px"  /></div>
                            <div class="ui-block-b" style="width: 100px;"><br/><input type="submit" value="Wijzig" /></div>
                        </div>
                    </form>
              </div>
            </div>

What i want to do is that if this input field is shown that it also shows the existing user email, which comes from JSON:

var myData = [
                  {"Email":"[e-mail]","Wachtwoord":"blabla"}
                  ];



        $.each(myData, function(index, element) {

           $("#email").val(element.Email);


           });

Unfortunately it doesn’t work i.e the input field won’t contain the email from the hardcoded JSON, any idea why?

Answer 1

$("#email").append(element.Email); is wrong if you want to set the value to the input box, you should

$("#email").val(element.Email);

.val( value ) – Set the value of each element in the set of matched
elements.

Read more here about .val()

Try the demo here

if you come across any problem let me know. Hope this will fix your problem.