Adding a placeholder attribute to a text input element seems to negate my autocomplete="off" attribute.
I.e. It restores the annoying banana-yellow drop down that shows prior entries. (And worse still, the drop down seems to get some of it's suggested input from things input in windows the browser opened that are not related to my page. )
More specifically:
This element has NO annoying little banana-yellow drop down w/ prior entries.
<input class="textbox"
type="text"
name="firstname"
value="" autocomplete="off">
But if I add the placeholder attribute, the banana-yellow drop down returns.
<input class="textbox"
type="text"
name="firstname"
value="" autocomplete="off"
placeholder="Enter First Name">
Is it possible to use placeholder without getting that annoying drop down back?
I'm sure enough js code with onblur, onfocus, and maybe onkeypress, could mimic placeholder without the annoying drop down. But I was hoping for a simpler way.
Any suggestions?
Added 10/5/18 -- re: question below about browsers. Today it's gotten worse.
The IE browser consistently honors autocomplete="off" for all the text boxes.
But Chrome has become inconsistent as indicated in the comments added below. The first name, first and second last name, and email text box ignore autocomplete="off". But it honors it for both middle names. And I just can't see any differences in how any of the text boxes are coded.
Here is the complete code for my form. [I put the label/input pairs into a table to line things up. (as an aside that seems to have disconnected them, because clicking on the label doesn't shift focus to its input. But that's for another day)]
<form id="formNo1" onsubmit="sendMessage(); return false;">
<table id="formNo1Table">
<tr>
**<!—This is a <select> element -->**
</tr>
<tr> **<!-- Chrom autocompletes / IE doesn’t -->**
<td>
<label class="label" for="firstname">First Name:</label>
</td>
<td>
<input class="textbox" type="text"
name="firstname" value=""
autocomplete="off" >
</td>
</tr>
<tr> **<!-- Both OK. No autocomplete-->**
<td>
<label class="label" for="middle1st">Middle Name - First:</label>
</td>
<td>
<input class="textbox" type="text"
name="middle1st" value=""
autocomplete="off">
</td>
</tr>
<tr>
**<!—This is a <select> element-->**
</tr>
<tr>
<td> **<!-- Both OK. No autocomplete-->**
<label class="label" for="middle2nd">Second Middle Name - Second</label>
</td>
<td>
<input class="textbox" type="text"
name="middle2nd" value=""
autocomplete="off">
</td>
</tr>
<tr>
<td> **<!-- Chrome autocompletes / IE doesn’t -->**
<label class="label" for="lastname">Last Name:</label>
</td>
<td>
<input class="textbox" type="text"
name="lastname" value=""
autocomplete="off">
</td>
</tr>
<tr>
<!—This is a <select> element
</tr>
<tr>
<td> **<!-- Chrome autocompletes / IE doesn’t -->**
<label class="label" for="lastname2">Second Last Name:</label>
</td>
<td>
<input class="textbox" type="text"
name="lastname2" value=""
autocomplete="off">
</td>
</tr>
<tr>
<!—This is a <select> element
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<!—This is a <select> element
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td> **<!-- Chrome autocompletes / IE doesn’t -->**
<label class="label" for="email">Email:</label>
</td>
<td> <!-- Chrom autocompletes / IE doesn’t -->
<input id="emailId"
class="textboxdim" type="text"
name="email" value=name#dom.ext
autocomplete="off">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<!—This is a text area element
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<input class="label" name="submit button"
type="submit" value="Submit">
</td>
</tr>
</table>
</form>
just place
placeholder=" "
the data onload will not override the label
Related
I have the following dynamic table
I want to compare the value of submit Quantity textbox and Stock textbox together to check if Submit Quantity value is greater than stock value for all rows.
When submit Quantity textbox loses focus I want check, if Submit Quantity value is greater than stock, I want show an alert that "Not enough goods exist in stock" and Submit Quantity textbox must receive focus again.
My HTML and C#
<tbody>
#{ var i = 0;}
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" onblur="compare()" id="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" id="stock" readonly="readonly" class="form-control" />
</td>
</tr>
}
I have no idea how to do that
Any help will be appreciated
Thanks in advance
Edit:
This is what I have done to achieve the result but it only works on first row Submit Quantity textbox not on second row
function compare() {
$('#submitQ').each(function () {
let submit = $('#submitQ').val();
let quantity = $('#stock').val();
if (submit > quantity) {
alert('Not enough goods!')
$('#submitQ').select();
return false
}
})
You cannot have mutliple elements with same ids instead use class selector .Then , just get value of submit quantity using $(this).val() and stock value using .closest('tr').find('.stock').. then simply compare these values .
Demo Code :
$('.submitQ').on("blur", function() {
//get value of submit qnty
let submit = $(this).val();
//get stock
let quantity = parseInt($(this).closest('tr').find('.stock').val());
if (submit > quantity) {
alert('Not enough goods!')
$(this).focus(); //show focus
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>No</th>
<th>Name</th>
<th>Brand</th>
<th>Requested Quantity</th>
<th>Submit Quantity</th>
<th>Stock</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<!--use class-->
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="8" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="5" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
</tbody>
</table>
I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone
//checkScore();
function checkScore(){
document.getElementById('score_row1').readonly = true;
var scores = document.getElementsByClassName("score_holder");
var i;
for(i=0; i<scores.length; i++){
if(scores[i].value!=null){
scores[i].readonly="readonly";
}
}
}
<!doctype html>
<html>
<head>
</head>
<body onload="checkScore()">
<table align="center" cellpadding="3">
<tr valign="baseline">
<td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
</tr>
<tr>
<td align="right">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="30" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="10" size="5" class="score_holder" />
</td>
</tr>
</table>
</body>
</html>
First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.
Also the property is readOnly and not readonly
So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";
Created a working demo here
The value of a text input will always be a string.
If nothing has been typed in it, then the value will be "". It will never be null.
I have an assignment where I should be validating forms both when the value of the form changes, as well as on submit. The functions themselves I have been allowed to obtain from the internet, provided I cite the source. My issue is that it's not working? I've tested it in a browser and am not getting corrected for anything, regardless of the amount of gibberish I provide. I thought I understood the concept, but it's just not working? Here is my code:
<form name="usercomments" method="post" action="cgi-bin/form-mail2.pl"
onsubmit="return validateForm();"strong text>
<table class="usercomments">
<tbody>
<tr>
<td><label for="realname">Name:</label></td>
<td><input id="realname" align="left" size="50" name="realname"
onchange="validateRealname(this, 'realnameguide');"></input></td>
<td id="realnameguide">Please use proper case when entering your name.</td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input id="email" size="50" name="email" onchange="validateEmail(this, 'emailguide');"></input></td>
<td id="emailguide">Please use the format: ernest#craft.com</td>
</tr>
<tr>
<td><label for="message">Comments:</label></td>
<td><textarea id="message" name="message" rows="15" cols="50"
onchange="return validateForm(this, 'commentsguide');"></textarea></td>
<td id="commentsguide">Please provide your comments regarding the website
in the space provided below.</td>
</tr>
<tr>
<td><label for="rating">How would you rate this website?</label></td>
<td>
<p> 1=Fantastic!
2=It's Good!
3=It's Average.
4=It's Bad.
5=It's Terrible! </p>
<p style="word-spacing: 2.5em">
<input type="radio" value="1" name="rating"></input> 1
<input type="radio" value="2" name="rating"></input> 2
<input type="radio" value="3" name="rating"></input> 3
<input type="radio" value="4" name="rating"></input> 4
<input type="radio" value="5" name="rating"></input> 5
</p>
</td>
</tr>
<tr>
<td><label for="phone"> Phone Number:</label></td>
<td><input type="tel" name="phonenumber" id="phonenumber" onchange="return validatePhone(this, 'phoneinfo');">
</input></td>
<td id="phoneinfo">999-999-9999</td>
</tr>
<tr>
<td><label for="bday">Birthday:</label> </td>
<td><input id="bday" name="bday" onchange="return validateBday(this, 'bdayguide');"></input></td>
<td id="bdayguide">07/17/2014</td></tr>
<tr>
<td><input type="submit" value="Submit"></input></td>
</tr>
</tbody>
</table>
</form>
It looks as though you only have half of the assignment done at the moment. You will need to write the javascript functions you have reference, for example validateRealname.
You should do this in a separate javascript file and import it using <script> tags.
You also need to change the radio buttons from:
<input type="radio" value="1" name="rating"></input> 1
to:
<input type="radio" value="1" name="rating">1</input>
Once you've written those functions and imported them, you should be good to go.
I'm creating a plugin where I'm wanting the owner of the company to be able to log in and be able to add employees/contractors and upon creating them, have them added to the wpdb. Right now, I've copied over the the html that was in the source code for the Add New User (I don't want to use the add new user format) and I've got the form there (minus what I'm guessing is the ajax and javascript bits). When I click submit it just returns to the page.
Here is the code that is being called in... I'm wondering if I'm missing some includes or something along those lines, thanks in advance! :)
<?php
function e34s_tc_add_staff()
{
global $wbdb;
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2 id="add-new-user"> Add New Staff Member</h2>
<div id="ajax-response"></div>
<p>Create a new staff member for this site.</p>
<form action="" method="post" name="createuser" id="createuser" class="validate">
<input name="action" type="hidden" value="createuser" />
<input type="hidden" id="_wpnonce_create-user" name="_wpnonce_create-user" value="5ebe2973f8" /><input type="hidden" name="_wp_http_referer" value="/wordpress/wp-admin/user-new.php" /><table class="form-table">
<tr class="form-field form-required">
<th scope="row"><label for="user_login">Username <span class="description">(required)</span></label></th>
<td><input name="user_login" type="text" id="user_login" value="" aria-required="true" /></td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="email">E-mail <span class="description">(required)</span></label></th>
<td><input name="email" type="text" id="email" value="" /></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="first_name">First Name </label></th>
<td><input name="first_name" type="text" id="first_name" value="" /></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="last_name">Last Name </label></th>
<td><input name="last_name" type="text" id="last_name" value="" /></td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="pass1">Password <span class="description">(required)</span></label></th>
<td>
<input class="hidden" value=" " /><!-- #24364 workaround -->
<input name="pass1" type="password" id="pass1" autocomplete="off" />
</td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="pass2">Repeat Password <span class="description">(required)</span></label></th>
<td>
<input name="pass2" type="password" id="pass2" autocomplete="off" />
<br />
<div id="pass-strength-result">Strength indicator</div>
<p class="description indicator-hint">Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers and symbols like ! " ? $ % ^ & ).</p>
</td>
</tr>
<tr>
<th scope="row"><label for="send_password">Send Password?</label></th>
<td><label for="send_password"><input type="checkbox" name="send_password" id="send_password" /> Send this password to the new user by email.</label></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="role">Staff Type</label></th>
<td><select name="role" id="role">
<option value='employee'>Employee</option>
<option value='contractor'>Contractor</option>
</select>
</td>
</tr>
</table>
<p class="submit"><input type="submit" name="createuser" id="createusersub" class="button button-primary" value="Add New Staff Member " /></p>
</form>
</div>
<?php
}
I'm using reCAPTCHA via its AJAX API to display the captcha in a modal dialog box. I'm using jqModal to display the boxes, and I'm using the AJAX version of reCAPTCHA because the PHP version is already buggy with jqModal (a known bug: http://markmail.org/message/bvip5vyb3czm7ngu).
Now, the reCAPTCHA works fine in Firefox. But in Safari, it doesn't always get displayed. Sometimes, it works fine, but about 20% of the time, no reCAPTCHA box is displayed.
The jqModal declaration looks like this:
$().ready(function() {
$('#modalBox_register').jqm({
ajax: '/modals/register.php',
trigger: 'a#registerButtonLink',
onShow: function(h) {
h.w.css('opacity', 1.00).fadeIn(300);
},
onHide: function(h) {
h.w.fadeOut(300, function() { if (h.o) h.o.remove(); });
}
});
});
And the HTML/PHP within the modal box looks like this:
<div id="registerModal">
<p class="caption">Registration form:</p>
<form name="registerForm" id="modalRegisterForm" class="modalForm" action="/register/" method="post">
<table cellspacing="15" border="0">
<tr>
<td class="left"><label for="firstName">First Name:</label></td>
<td class="right"><input type="text" name="firstName" id="firstName" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="lastName">Last Name:</label></td>
<td class="right"><input type="text" name="lastName" id="lastName" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="email">Email Address:</label></td>
<td class="right"><input type="text" name="email" id="email" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="password">Password:</label></td>
<td class="right"><input type="password" name="password" id="password" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="passwordConfirm">Confirm Your Password:</label></td>
<td class="right"><input type="password" name="passwordConfirm" id="passwordConfirm" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"> </td>
<td class="right"><div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms"> I have read and accept the Terms of Use.<br /></label>
</div><!-- /#termswrap --></td>
</tr>
<!-- reCAPTCHA -->
<tr>
<td class="left"><label for="captcha">Are you human?</label></td>
<td class="right"><!-- Using the reCAPTCHA AJAX API, because the non-AJAX API is buggy with jqModal -->
<div id="recaptcha_div"></div>
<script type="text/javascript"
src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script> <script
type="text/javascript">
Recaptcha.create("123456789...",
"recaptcha_div", {
theme: "white"
});
</script>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="right"><input type="image" id="submitButton" src="/images/modals/button_register.png" value="Submit" alt="Submit" name="submit" /></td>
</tr>
</table>
</form>
</div><!--/#registerModal-->
Does anybody have a clue why the reCAPTCHA AJAX call isn't working properly in Safari?
I think that Safari re-executes javascript when it re-renders the tags. And anything in a modal dialog gets re-rendered when the dialog opens. Furthermore, I suspect that after having been re-rendered, the document.write used by recaptcha gets confused about where it is and messes up. In any case, here's what fixed my problems:
$('#captcha-form script').remove();
'captcha-form' is the id of the form containing the captcha. Remove the script tags so the scripts don't get executed a second time when Safari re-renders them after jQuery moves them. The event handlers created by the script aren't in the script tags, so they survive.