I am trying to create a feedback form. All inputs and textareas are not empty and the user has clicked on the checkbox which says I am not a robot, then the button Send (отправить) becomes active and I want to say Thank you,we will contact with you soon! in a popup window after form submission.
But..what is wrong?
$(document).on('change', '.main-pc input:checkbox', function() {
if($(this).is(':checked')){
$(".main-pc input[type=submit]").removeAttr('disabled');
$('.main-pc input[type=hidden].valTrFal').val('valTrFal_true');
}
else {
$(".main-pc input[type=submit]").attr('disabled','disabled');
$('.main-pc input[type=hidden].valTrFal').val('valTrFal_disabled');
}
});
$(".main-pc").ready(function() {
$('.main-pc').submit(function() { // проверка на пустоту заполненных полей. Атрибут html5 — required не подходит (не поддерживается Safari)
if (document.form.input.value == '') {
valid = false;
return valid;
}
$.ajax({
type: "POST",
url: "/app.mail.php",
data: $(this).serialize()
}).done(function() {
$('.js-overlay-thank-you').fadeIn();
$(this).find('input').val('');
$('.main-pc').trigger('reset');
});
return false;
});
});
$('.js-close-thank-you').click(function() { // по клику на крестик
$('.js-overlay-thank-you').fadeOut();
});
$(document).mouseup(function (e) { // по клику вне попапа
var popup = $('.popup');
if (e.target!=popup[0]&&popup.has(e.target).length === 0){
$('.js-overlay-thank-you').fadeOut();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-writetous">
<form class="main-pc" id="form" >
<input type="text" required="" placeholder="Имя" name="txtname" required>
<input type="email" placeholder="Email" name="txtemail" required>
<textarea name="txtmessage" placeholder="Введите сообщение.." rows="5" required></textarea>
<label><input type="checkbox">Я не робот</label>
<input type="hidden" name="valTrFal" class="valTrFal" value="valTrFal_disabled">
<input type="submit" class="button" value="Отправить" disabled="disabled" name="btnsend">
</form>
</div>
<div class="overlay js-overlay-thank-you">
<div class="popup js-thank-you">
<h5>Сообщение отправлено!</h5>
<p><strong>Наши администраторы свяжутся с вами в ближайшее время!</strong></p>
<hr>
<div class="close-popup js-close-thank-you">x</div>
</div>
</div>
document.form.input.value
Above line is creating issue in your code As you wrote in your question that you are using this for safari browser, May be it will work on safari but will not work on chrome or Mozilla so check browser like this
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
and then put your code in if conditon
if(is_safari){
if (document.form.input.value == '') {
valid = false;
return valid;
}
}
And you can also check other example for form validation in safari.
Required Attribute Not work in Safari Browser
Related
I would like it such that a user only has to sign-in once and then the next time they open the hybrid app the get signed in automatically. The JavaScript code below here works but only when I remove the 'login/submit' div () which I need. How can I get around this?
HTML;
<body>
<form name="EventConfirmRedirection" class="Form" method="post" action="index.php" id="myForm" data-ajax="false">
<div class="user_login3"><input style="text-transform:lowercase" type="text" name="username" id="username" placeholder="username"></div>
<div class="user_login3"><input type="password" name="password" id="password" placeholder="password"></div>
<div style="margin-left:5%; width:45%; font-size:5px;">
<input data-theme="c" type="checkbox" id="rememberMe" name="rememberMe"/>
<label for="rememberMe"><span style="font-size:12px">remember me</span></label>
</div>
<div style="margin-left:5%; color:#FF0000; font-weight:bold" id="error"></div>
<div class="login"><input type="submit" value="LOGIN" name="submit" data-theme="e" id="submit"></div>
</form>
</body>
JAVASCRIPT;
$(document).ready(function() {
"use strict";
if (window.localStorage.checkBoxValidation && window.localStorage.checkBoxValidation !== '') {
$('#rememberMe').attr('checked', 'checked');
$('#username').val(window.localStorage.userName);
$('#password').val(window.localStorage.passWord);
document.EventConfirmRedirection.submit();
} else {
$('#rememberMe').removeAttr('checked');
$('#username').val('');
$('#password').val('');
}
$('#rememberMe').click(function() {
if ($('#rememberMe').is(':checked')) {
// save username and password
window.localStorage.userName = $('#username').val();
window.localStorage.passWord = $('#password').val();
window.localStorage.checkBoxValidation = $('#rememberMe').val();
} else {
window.localStorage.userName = '';
window.localStorage.passWord = '';
window.localStorage.checkBoxValidation = '';
}
});
});
AJAX
$(document).ready(function() {
"use strict";
$("#submit").click( function(e) {
e.preventDefault();
if( $("#username").val() === "" || $("#password").val() === "" )
{
$("div#error").html("Both username and password are required");
} else {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(data) {
$("div#error").html(data);
});
$("#myForm").submit( function() {
return false;
});
}
});
});
#chiboz in your javascript, instead of using:
document.EventConfirmRedirection.submit();
use:
$('#submit').click();
I have this sample:
link
CODE HTML:
<form class="add-patient">
<fieldset style="display: block;">
<label for="new_exam">New exam</label>
<input type="text" name="new_exam" id="new_exam" value="">
</fieldset>
<fieldset style="display: block;">
<label for="x_ray">X ray</label>
<input type="text" name="x_ray" id="x_ray" value="">
</fieldset>
<input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>
CODE JS:
function sendForm() {
var status_form = false;
$(".add-patient input").each(function(){
if($(this).val() == ""){
status_form = true;
}
});
console.log(status_form);
var createdBy = jQuery('#created_by').val();
if( status_form )
{
alert('Fill at least one field');
}else{
alert("now it's ok");
}
}
I want to do a check ... if an input is complete when displaying the message "it; s ok" ... otherwise displaying another message
probably means the code clearly what they want to do.
You can help me with a solution please?
Thanks in advance!
Use .filter to get the length of the input elements having value as ''
Try this:
function sendForm() {
var elem = $(".add-patient input[type='text']");
var count = elem.filter(function() {
return !$(this).val();
}).length;
if (count == elem.length) {
alert('Fill at least one field');
} else {
alert("now it's ok");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="add-patient">
<fieldset style="display: block;">
<label for="new_exam">New exam</label>
<input type="text" name="new_exam" id="new_exam" value="">
</fieldset>
<fieldset style="display: block;">
<label for="x_ray">X ray</label>
<input type="text" name="x_ray" id="x_ray" value="">
</fieldset>
<input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>
so i've done some code for contact form, but i have some problems to finish it up. So here is part of html contact form
<form action="" method="POST" name="contact-form" id="contact-us" >
<div class="form-group">
<input type="text" name="fullname" class="name send-check" placeholder="Name" tabindex="1" />
<input type="email" name="email" class="name send-check" id="email" placeholder="Email" tabindex="2" />
<div class="msg success error"> Incorrect e-mail </div>
<textarea rows="10" cols="45" name="msg" placeholder="Message" class="name send-check" tabindex="3"></textarea>
<a id="go" name="logo_order" href="#logo_order" rel="leanModal" disabled><button type="submit" id="btn-send" value="Отправить" disabled>Отправить</button>
<div id="logo_order">
Thank you for your message, window will close after 5 seconds.
</div>
</div>
</form>
When you type first time incorrect email at field (Email) it will write you with red color "Incorrect email", so then you re-write to your correct email and after that if you delete your correct email and type random letters it wil validate(it shouldn't) and disable button will become enabled, and also after that you click send, the modal appears and all form fields clears and enabled button becomes disable, but after that you type again in all three fields random text, the button will be enabled, so it's not doing validation at e-mail input
External code before /body to disable button, after click on Send
<script type="text/javascript">
$(document).ready(function () {
$('#btn-send').click(function () {
$('#contact-us').trigger("reset");
$('button:submit').attr("disabled", true);
});
});
</script>
Internal code
Validation
$('form input[name="email"]').blur(function () {
var email = $(this).val();
var valid = /(.+)#(.+)\.(com|edu|org|etc)$/;
if (valid.test(email)) {
$('.msg').fadeOut(500);
$('.success').fadeOut(500);
$(".send-check").each(function () {
$(this).keyup(function () {
$('#btn-send').prop('disabled', checkinput());
});
});
} else {
$('.error').fadeIn(500);
}
});
function checkinput() {
var valid = false;
$(".send-check").each(function () {
if (valid) { return valid; }
var input = $.trim($(this).val());
valid = !input;
});
return valid;
}
leanModal v1.1 | Ray Stone | Licensed under the MIT and GPL
(function($){$.fn.extend({leanModal:function(options){var defaults={top:100,overlay:0.5,closeButton:null};var overlay=$("<div id='lean_overlay'></div>");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function(){var o=options;$(this).click(function(e){var modal_id=$(this).attr("href");$("#lean_overlay").click(function(){close_modal(modal_id)});$(o.closeButton).click(function(){close_modal(modal_id)});var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth();
$("#lean_overlay").css({"display":"block",opacity:0});$("#lean_overlay").fadeTo(200,o.overlay);$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});$(modal_id).fadeTo(200,1);e.preventDefault()})});function close_modal(modal_id){$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})}}})})(jQuery);
Timeout-modal
$(document).ready(function () {
$('#go').click(function (e) {
$('#logo_order, #lean_overlay').fadeIn(400, function() {
setTimeout(function () {
$('#logo_order, #lean_overlay').fadeOut(400);
}, 5000);
});
e.stopPropagation();
});
$(document).click(function (e) {
$('#logo_order, #lean_overlay').fadeOut(400);
});
});
Disclaimer: I know there are quite a few questions out there with this topic and it has been highly addressed, though I need assistance in my particular case.
I am trying to check if the input values are empty on keyup then disable the submit button.
My HTML snippet:
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" />
</div>
</form>
</div>
I have used the example answer from here with some modifications:
(function() {
$('.field input').keyup(function() {
var empty = false;
$('.field input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('.actions input').attr('disabled', true);
} else {
$('.actions input').attr('disabled', false);
}
});
})()
Any help would be greatly appreciated!
I would suggest disabling the button by default. I would also look at the length of the .val(), not check for an empty string. Lastly, I think document.ready() is much more readable than your existing code: Here is the full code:
HTML
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>
JS/jQuery
$(document).ready(function() {
$('.field input').on('keyup', function() {
let empty = false;
$('.field input').each(function() {
empty = $(this).val().length == 0;
});
if (empty)
$('.actions input').attr('disabled', 'disabled');
else
$('.actions input').attr('disabled', false);
});
});
Here's a working fiddle.
I use this in my project and it succes.
$(document).ready(function() {
$('.field').keyup(function() {
var empty = false;
$('.field').each(function() {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('.actions[type="submit"]').attr('disabled', 'disabled');
} else {
$('.actions[type="submit"]').removeAttr('disabled');
}
});
});
Please find my code below. My problem is that I the inner jQuery.get() doesn't get executed. Could some one help me out with this?
jQuery(document).ready(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form here
$('.error').hide();
var zipCode = $("input#name").val();
if (zipCode == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var key = 'ac9c073a8e025308101307';
var noOfDays = 5;
var url = 'http://www.worldweatheronline.com/feed/weather.ashx?q=' + zipCode + '&format=json&num_of_days=' + noOfDays + '&key=' + key;
alert(url);
jQuery.get(url, function(test) {
alert(url);
$.each(test.data.weather, function(i, item){
$("body").append("<p>Date: "+item.date+"</p>");
if ( i == 3 ) return false;
}); }, 'jsonp')();
});
});
My html form looks like
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
I'd really appreciate any pointers.
Thanks!
The problem you are experiencing is that you dont do anything to stop your form from being submitted, thus it submits the form before it gets a chance to get the data from the worldweatheronline.com.
Change your click handler to be like this:
$(".button").click(function(event) {
event.preventDefault();
Here is my completed sample code that works the way you want it to:
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function() {
$('.error').hide();
$(".button").click(function(event) {
event.preventDefault();
// validate and process form here
$('.error').hide();
var zipCode = $("input#name").val();
if (zipCode == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var key = 'ac9c073a8e025308101307';
var noOfDays = 5;
var url = 'http://www.worldweatheronline.com/feed/weather.ashx?q=' + zipCode + '&format=json&num_of_days=' + noOfDays + '&key=' + key;
alert('first'+url);
jQuery.get(url, function(test) {
alert(url);
$.each(test.data.weather, function(i, item){
$("body").append("<p>Date: "+item.date+"</p>");
if ( i == 3 ){
return false;
}
});
}, 'jsonp');
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
</body>
</html>
Turn on Fiddler or Firebug and watch the HTTP call go out. You'll see the HTTP error message there. Also, turn on your console in Chrome or Firefox to see a potential JavaScript error.
Part of the problem could be the extra set of parentheses after your .get() function call. You have:
jQuery.get(url, function(test) {
alert(url);
$.each(test.data.weather, function(i, item){
$("body").append("<p>Date: "+item.date+"</p>");
if ( i == 3 ) return false;
}); }, 'jsonp')();
It should be:
jQuery.get(url, function(test) {
alert(url);
$.each(test.data.weather, function(i, item){
$("body").append("<p>Date: "+item.date+"</p>");
if ( i == 3 ) return false;
});
}, 'jsonp');
Im going to go out on a limb and guess that (based on the url 'http://www.worldweatheronline.com/feed/weather.ashx?q=' ) that you are attempting to perform an AJAX request to an external site. This violates Same Domain Policy and will fail silently.