如何访问包含弹出窗口的JavaScript中的表单元素

Question

How do I access the input with id="namesignup" in javascript??

I tried using

console.log("Result :"+ $$('.popup-signup-email #namesignup'));
document.getElementById(namesignup)

Both are not working.. is there how to i access the data in the input?? Please help

<div data-page="signup" class="page no-navbar">
<!-- Begin: Page Content -->
<div class="page-content">
<div class="content-block"> </div>
<div class="content-block">
<p>
<button class="button big"><span>Connect with Facebook</span></button>
</p>
<p>
<button class="button"><span>Connect with Google</span></button>
</p>
<p>
<a href="#" class="button open-popup" data-popup=".popup-signup-email">
<span>Sign Up with Email</span>
</a>
</p>
</div>
</div>
<!-- End: Page Content -->

<!-- Begin: Popup -->
<div class="popup tablet-fullscreen popup-signup-email">
<div class="toolbar">
<div class="toolbar-inner">
<div class="left">
<a href="#" class="link disabled"></a>
</div>
<div class="center">Sign Up</div>
<div class="right">
<a href="#" class="link close-popup">
</a>
</div></div></div>

<div class="container">
<div class="content-block"> </div>
<form name="signup-email" action="#" method="POST" enctype="multipart/form-data">
<div class="list-block no-hairlines">
<ul>
<li>
<div class="item-content">
<div class="item-media"></div>
<div class="item-inner">
<div class="item-input">
<input id="namesignup" type="text" name="name" placeholder="Name" required />
</div>

Answer 1

1. Make sure you configured the jQuery & check with alias name. By default $ is alias name for jQuery. If properly configured, below code will work,

   $('#namesignup').val()

2) If you going with native JavaScript,

document.getElementById('namesignup').value

Answer 2

Try the code below. This code looks for change in the namesignup and prints it in the console,

 <div data-page="signup" class="page no-navbar"> <!-- Begin: Page Content --> <div class="page-content"> <div class="content-block"> </div> <div class="content-block"> <p> <button class="button big"><span>Connect with Facebook</span></button> </p> <p> <button class="button"><span>Connect with Google</span></button> </p> <p> <a href="#" class="button open-popup" data-popup=".popup-signup-email"> <span>Sign Up with Email</span> </a> </p> </div> </div> <!-- End: Page Content --> <!-- Begin: Popup --> <div class="popup tablet-fullscreen popup-signup-email"> <div class="toolbar"> <div class="toolbar-inner"> <div class="left"> <a href="#" class="link disabled"></a> </div> <div class="center">Sign Up</div> <div class="right"> <a href="#" class="link close-popup"> </a> </div></div></div> <div class="container"> <div class="content-block"> </div> <form name="signup-email" action="#" method="POST" enctype="multipart/form-data"> <div class="list-block no-hairlines"> <ul> <li> <div class="item-content"> <div class="item-media"></div> <div class="item-inner"> <div class="item-input"> <input id="namesignup" type="text" name="name" placeholder="Name" required /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $("#namesignup").keyup(function(){ console.log($("#namesignup").val()); }); </script> 

Answer 3

As others mentioned in later posts:

The document.getElementById('namesignup').value code must be worked but if you have multiple DOM with 'namesignup' Id then this code returns the first element value that has this id.

If you are using Google Chrome, press F12 -> go to element tab -> search 'namesignup'.

Be sure that you have one Element with this id.

Answer 4

1. in javascript use document.getElementById("namesignup").value
2. in jQuery use $("#namesignup").value()