hide pop-up of required of input using javascript jsfiddle
try to submit with empty input and see the pop-up, so i don't need to display that pop-up and i want the required to validate.
any help i don't need to display any warning.
<form>
<input type="text" name="name" required="required" value="" />
<input type="submit" name="submit" value="Submit" />
Since this is a HTML5 Event you can prevent the event from triggering the popup and still provide validation (https://developer.mozilla.org/en-US/docs/Web/Events/invalid). A simple event listener will do the job.
To handle focus include an id to that field like so ...
HTML
<input type="text" id="name" name="name" required="required" value="" />
And handle that focus within the return function ...
JS
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementById("name").focus();
};
})(), true);
EDIT
Check it out
http://jsfiddle.net/rz6np/9/
autocomplete="off"
or
autocomplete="nope"
If autocomplete still works on an <input> despite having autocomplete="off", but you can change off to a random string, like nope.
It appears that Chrome now ignores autocomplete="off" unless it is on the <form>-tag.
Related
I've got a form which has all inputs disabled. There's also a button within that form which, if clicked, is supposed to enable the inputs.
I know how to disable and enable the inputs using something like this:
$('#form :input'):prop('disabled',false).
This is all fine but I'd like to have an implementation that is abstract enough to work in all forms that have such a toggle button. Therefore I tried this:
$('.toggle-btn').click(function(){
$(this).parents('form :input').prop('disabled','false');
}
But it's not working.
I'm looking for a way to access input fields of a form when it's selected as a parent. Does anyone know how to go about it?
You need to use the parent function with find if your input is directly in your form , Try this for example:
$('.toggle-btn').click(function(){
$(this).parent().find(':input').prop('disabled', false);
}
If the input is in other elements that are inside your form, you need to use the jQuery parents function like this:
$('.toggle-btn').click(function(){
$(this).parents('form').find(':input').prop('disabled', false);
}
it is false not "false" - "false" is truthy
you need find() and .closest() which in my opinion is better than parent(s) since it does not care if the button is wrapped in anything
you need .prop and not :prop
$(function() {
$('.toggle-btn').on("click", function() {
$(this).closest("form").find(":input").prop('disabled', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="button" class="toggle-btn" />
</form>
I have a mobile signup form that contains HTML input elements for the user's username, password, and password confirmation fields. Since this is a mobile web app and I'm trying to conserve screen space, I've elected to forego putting HTML labels above each of these elements and instead utilize placeholder attributes to signal what to enter in each field:.
<input id="id_username" placeholder="Choose a username" type="text" />
<input id="id_password1" name="password1" placeholder="Choose a password" type="password" />
<input id="id_password2" name="password2" placeholder="Confirm password" type="password" />
Initially I added a bit of JavaScript to put the focus on the username field when the user arrives at the page:
<script type="text/javascript">
document.getElementById("id_username").focus()
</script>
This worked fine except that in older versions of the default Android browser, this causes the placeholder to disappear. Since the lack of a placeholder (and label) may cause the user to not be clear on what to enter in that field, I took the JavaScript out. However, even without that JS, I'm noticing that the Android browser still puts the focus in that first form field which again deletes the label. Is there any way that I can code the page so that I'm guaranteed that no browser (including the default Android browser) will put focus on any of these fields? Techniques that wouldn't require additional libraries would be preferable as I'm trying to keep my page size and additional requests to a minimum.
Thanks.
Sometimes it is faster to write some simple functionality by your hands. Look at the example at js fiddle. If you want you can replace jquery with native javascript.
https://jsfiddle.net/ShinShil/y7o8mrwh/2/
var placeholder = 'enter something';
$(document).ready(function() {
$('.placeholder').val(placeholder);
$('.placeholder').focusin(function() {
if($(this).val() == placeholder && $(this).hasClass('opacity')) {
$(this).val('');
$(this).removeClass('opacity');
}
});
$('.placeholder').focusout(function() {
if($(this).val() == '') {
$(this).val(placeholder);
$(this).addClass('opacity');
}
});
});
If your controls are in forms, you can loop over all controls in all forms and call their blur method:
function blurAll() {
[].forEach.call(document.forms, function(form) {
[].forEach.call(form.elements, function(element) {
element.blur();
});
});
}
<body onload="blurAll()">
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
</body>
Note that for IE8 you'll need a polyfill for Array.prototype.forEach.
Edit
Perhaps a simpler solution is to use document.activeElement:
function blurActive() {
if (document.activeElement && document.activeElement.blur) {
document.activeElement.blur();
}
}
<body onload="blurActive()">
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<p>Click on the button, then on an input to give it focus. It will be blurred in 5 seconds.</p>
<button onclick="setTimeout(blurActive,5000);">Blur active in 5 seconds</button>
</body>
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
For example, I have this form:
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1"/>
<input type="text" name="Productqty2"/>
<input type="text" name="Productqty3"/>
<input type="submit" name="RecalculatePrice" value="Recalculate Price"/>
<input type="text" name="ZipCode"/>
<input type="submit" name="RecalculateShipping" value="Recalculate Shipping"/>
<input type="text" name="Offercode"/>
<input type="submit" name="RecalculateDisc" value="Recalculate Discount"/>
<input type="submit" name="CheckOut"/>
</form>
I need that if the user press enter on Productqty1, Productqty2, or Productqty3, then the default action is suppressed, and button RecalculatePrice is clicked instead.
And the same goes with if user press enter on ZipCode, the RecalculateShipping button gets clicked instead. The same with Offercode input and RecalculateOffercode button.
But if the user press on CheckOut button, the whole form must be still submitted. That's why they're on the same form, multiple submit button on the same form.
I also need to suppress the default action of enter key, because IE8 did not sent button submit value along with the form submit, so let's disable it altogether to avoid confusion.
How can I find a unified solution for this? It's okay if it has to be made in multiple javascript function, just as long as I can understand the solution pattern, because form with multiple submit button and user can press enter on any input field is confusing me. JQuery solutions are welcomed. Thanks.
EDIT: sorry for the poor choice of words that lead to confusion. What I mean with suppress default action is that when you press enter, the form get submitted, using any (random?) button submit. That is the default behavior I want to suppress.
I have added classes and id for each submit button(added id) and text box(added class).
Try this
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1" class="class1"/>
<input type="text" name="Productqty2" class="class1"/>
<input type="text" name="Productqty3" class="class1"/>
<input type="submit" name="RecalculatePrice" value="Recalculate Price" id="class1"/>
<input type="text" name="ZipCode" class="class2"/>
<input type="submit" name="RecalculateShipping" value="Recalculate Shipping" id="class2"/>
<br><br>
<input type="text" name="Offercode" class="class3"/>
<input type="submit" name="RecalculateDisc" value="Recalculate Discount" id="class3"/>
<input type="submit" name="CheckOut"/>
</form>
Script
$(document).ready(function () {
$(".class1").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class1').click();
}
});
$(".class2").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class2').click();
}
});
$(".class3").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class3').click();
}
});
});
Fiddle Demo
I would argue that CheckOut is your special scenario here. While you could certainly catch the enter key and invoke different actions, there are primarily two reasons why I don't find that to be the optimal solution here:
Your IE8 concern seems to negate the entire prior discussion, and in my mind, this should advise you to look in another direction. Don't do a special solution for IE8, do something that all supported browsers can understand.
There is no field for which CheckOut should be the default action on enter.
I suggest that you make different forms, and use different actions, rather than checking which button was clicked by inspecting the name parameter of the button.
On click of the CheckOut-button, which should never be triggered by an enter key, you should submit all forms. You can serialize their combined values and post them like so:
$('#product-form, #zip-form, #offer-form').serialize();
You can use jquery/javascript function to change the form.action before submitting the page.
Submit type should submit the form to default form action, which has been added on form declaration.
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1"/>
<input type="text" name="Productqty2"/>
<input type="text" name="Productqty3"/>
<input type="button" name="RecalculatePrice" value="Recalculate Price"/ onClick="callDefault();">
<input type="text" name="ZipCode"/>
<input type="button" name="RecalculateShipping" value="Recalculate Shipping"/ onClick="callRecalculateShipping();">
<input type="text" name="Offercode"/>
<input type="button" name="RecalculateDisc" value="Recalculate Discount"/ onClick="callRecalculateDisc();">
<input type="button" name="CheckOut"/ onClick="callCheckout();">
</form>
<javascript>
function callCheckout(){
form.action="<some value>";
form.submit();
}
...so on with other functions...
</javascript>
Change input types to button .
I have the following inputs:
<input class="input-text" type="text" name="nombres" id="nombres" />
<input class="input-text" type="text" name="apellidoP" id="apellidoP" />
<input class="input-text" type="text" name="apellidoM" id="apellidoM" />
<input class="input-text" type="text" name="nacimiento" id="nacimiento" />
I want to make an ajax request when the "nombres" and "nacimiento" inputs has changed and are not empty, and when "apellidoP" or "apellidoM" also has changed and are not empty.
How can I do that with jQuery? The only solution I have in mind is to trigger "change" event of every input and check if conditions are met, do you have another solution?
Thanks
If you are only interested in completed changes to field values you may want to look into jQuery's blur handler.
That's generally the way you will do it, check for the requirements in the change event.
Your talking about javascript events. Check this out: http://www.w3schools.com/js/js_events.asp
The following would execute checkEmail() whenever you changed something. Just check the text value of the input element in your function before doing whatever you wanted.
<input type="text" size="30" id="email" onchange="checkEmail()" />
$('#nombres').change(function(){
if($(this).val() !== '') {
//function to execute
}
});
Same applies for apellidoP and apellidoM.