I have an image that shows users some text field (username and password) as tool tip when over around.
<div class="user-pos">
<ul id ="users" class="user-list">
<li id="def-html" data-tooltip="#html-content"><img src="img/new.png" /></li>
</ul>
<div id = "html-content" style="display:none;">
<p class="newuser">Create a new user account</p>
<br/>
<div class="col-lg-6">
<label for="createUsername">Choose a username</label>
<input type="text" id="createUsername" required autocomplete="name">
<label for="createPassword">Enter your password</label>
<input type="password" id="createPassword" required value="gdh" autocomplete="name">
</div>
<div class="col-lg-6">
<label for="createEmail">Enter your email</label>
<input type="text" id="createEmail" required>
<label for="createPasswordVerify">Confirm password</label>
<input type="password" id="createPasswordVerify" required >
</div>
<div class="userbut"><button onclick="createAccount()"class="btn btn-sm btn-info">Create Account</button></div>
</div>
</div>
This javascript function is meant to get values from those fields and use it.
function createAccount() {
var password = $('#createPassword').val();
var veriPas = $('#createPasswordVerify').val();
var username = $('#createUsername').val();
var email = $('#createEmail').val();
if (email.trim() === "") {
alert('email is empty');
} else if (password.trim() === "") {
alert('password is empty');
} else if (password != veriPas) {
alert('Password did not match');
} else {
var isReg = app.regUser(email, password, 1, false);
if (isReg) {
alert('user created');
} else {
alert('no user creation');
}
}
}
Problem is the fields are always empty. The js code works when div "html-content" is not used as a tooltip but fails if it is shown as tool tip when user overs around the image. How do i Fix this
In your html, the password input box has an ID of "frmNameA" but in your JavaScript function you reference it with
var password = $('#createPassword').val();
Check that the IDs for the inputs are the same as the ones your function is using.
This might work...
$('#def-html').tooltip({
content: $("#html-content").html()
})
Try this, I'm not sure how the data-tooltip scope is set up, but this may help.
Or try $('body input#createPassword').val();
Also, you can put the div in its own file and use CSS content to call it with url combined with one of the methods for selecting that I've provided here.
#html-content:hover:after {
content: " (" url('myfilewithdivinit.html') ")";
}
Example using .find(), this may work also.... more of a chance if you combine it with the CSS content method above.
function createAccount() {
var password = $('body').find('input#createPassword').val();
var veriPas = $('body').find('input#createPasswordVerify').val();
var username = $('body').find('input#createUsername').val();
var email = $('body').find('input#createEmail').val();
if (email.trim() === "") {
alert('email is empty');
} else if (password.trim() === "") {
alert('password is empty');
} else if (password != veriPas) {
alert('Password did not match');
} else {
var isReg = app.regUser(email, password, 1, false);
if (isReg) {
alert('user created');
} else {
alert('no user creation');
}
}
}
Also, you should add a type attribute to your button.
<button type="button" onclick="createAccount()"class="btn btn-sm btn-info">Create Account</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.