So there is obviously something wrong in my syntax. Validation is ok. When I click submit the form sends email to me and then it deletes the value of my inputs. Everything is ok until now. But it does not fade out as it should. If I click on submit again, then it fades out. Thanks!
<script type="text/javascript">
$(document).ready(function () {
$('#form1').ajaxForm({
beforeSubmit: validate
});
function validate(formData, jqForm, options) {
var name = $('input[name=name]').fieldValue();
var email = $('input[name=email]').fieldValue();
var message = $('textarea[name=message]').fieldValue();
if (!name[0]) {
alert('Please enter a value for name');
return false;
}
if (!email[0]) {
alert('Please enter a value for email');
return false;
}
if (!message[0]) {
alert('Please enter a value for message');
return false;
}
else {
$("#form1").ajaxForm(function () {
$("#formplic").fadeOut(1000, function () {
$(this).html("<img src='images/postauto3.png'/>").fadeIn(2000);
});
});
var message = $('textarea[name=message]').val('');
var name = $('input[name=name]').val('');
var email = $('input[name=email]').val('');
}
}
});
OK. I figured it out. The issue was that after else I stated again ajax.Form. I deleted that line and it works pefectly. So, if someone makes the same mistake as me, delete $("#form1").ajaxForm(function ().
Related
I'm trying to get ajax value get auto update in id without clicking mouse point any ware, now I'm able to get value vile pressing mouse point any ware it get update
input fled
<div class="form-control-wrap">
<input type="text" class="form-control form-control-outlined form-control-outlined" id="email" name="email" >
<label class="form-label-outlined" for="email">email</label>
<span id="error_email"></span>
</div>
My ajax code
<script>
$(document).ready(function(){
$('#email').blur(function(){
var error_email = '';
var email = $('#email').val();
var _token = $('input[name="_token"]').val();
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!filter.test(email))
{
$('#error_email').html('<label class="text-danger">Invalid Email</label>');
$('#email').addClass('has-error');
$('#register').attr('disabled', 'disabled');
}
else
{
$.ajax({
url:"{{ url('https://test.com/email_available/check') }}",
method:"POST",
data:{email:email, _token:_token},
success:function(result)
{
if(result == 'unique')
{
$('#error_email').html('<label class="text-success">Email Available</label>');
$('#email').removeClass('has-error');
$('#register').attr('disabled', false);
}
else
{
$('#error_email').html('<label class="text-danger">Email not Available</label>');
$('#email').addClass('has-error');
$('#register').attr('disabled', 'disabled');
}
}
})
}
});
});
</script>
To get the value to auto-update without clicking anywhere, you can use the keyup event instead of the blur event. The keyup event will fire every time a key is pressed and released in the input field, so the validation will happen in real-time.
Here is an updated version of your code using the keyup event:
$(document).ready(function(){
$('#email').keyup(function(){
var error_email = '';
var email = $('#email').val();
var _token = $('input[name="_token"]').val();
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!filter.test(email))
{
$('#error_email').html('<label class="text-danger">Invalid Email</label>');
$('#email').addClass('has-error');
$('#register').attr('disabled', 'disabled');
}
else
{
$.ajax({
url:"{{ url('https://test.com/email_available/check') }}",
method:"POST",
data:{email:email, _token:_token},
success:function(result)
{
if(result == 'unique')
{
$('#error_email').html('<label class="text-success">Email Available</label>');
$('#email').removeClass('has-error');
$('#register').attr('disabled', false);
}
else
{
$('#error_email').html('<label class="text-danger">Email not Available</label>');
$('#email').addClass('has-error');
$('#register').attr('disabled', 'disabled');
}
}
})
}
});
});
Note that with this approach, the validation will happen every time a key is pressed, which can be resource-intensive if you have a lot of input fields or if the validation involves a lot of processing. In that case, you might want to consider adding a delay using setTimeout or using a different approach, such as validating the input field when the form is submitted instead of in real-time.
I have password protected a link that will open in a new tab but i now want that tab to timeout after a short while. I have tried this but to no avail, any help would be amazing!
<script>
var newWin;
function validatePass(){
if(document.getElementById('password').value == 'Techsoc'){
newWin = window.open('https://docs.google.com/spreadsheets/d/e/2PACX-1vRsNGb741vTBtSGlzbxnTsoZpFMs0l9ZMrD54uE4XGy6FvSMmNfp3RPWvDU3vI32iSIp07CEshGLo0M/pubhtml');
}else{
alert('Incorrect Password, please try again.');
return false;
setTimeout(function(){newWin.close()}, 5000);
}
}
</script>
The issue was with the timeout being within the else statement, when the new window have been created within the if. Now if you type in the password and click the button it should open the new tab and close after the time set in the timeout.
<input type="password" id="password"></input>
<button OnClick="validatePass()">Log In</button>
<script>
var newWin;
function validatePass() {
if (document.getElementById('password').value == 'Techsoc') {
newWin = window.open('https://docs.google.com/spreadsheets/d/e/2PACX-1vRsNGb741vTBtSGlzbxnTsoZpFMs0l9ZMrD54uE4XGy6FvSMmNfp3RPWvDU3vI32iSIp07CEshGLo0M/pubhtml');
setTimeout(
function () {
newWin.close()
}, 5000);
}
else {
alert('Incorrect Password, please try again.');
return false;
}
}
</script>
I have the following form:
#Html.BeginForm("ActionMethod","Controller",FormMethod.Post)
On submission I want to run a Javascript function, so I added the following:
#Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new { onsubmit = "myJsFunction()" })
But, it doesn't work... What am I doing wrong? Thanks!
You need this instead:
#using (Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new { onsubmit = "return myJsFunction()" }))
{
//form
}
Notice the using this makes the form self closing, without the using you need to close it as detailed in this MSDN article.
You can confirm javascript is called with this to isolate the problem:
#using (Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new { onsubmit = "alert('test')" }))
{
<input type="submit" value="test" />
}
This should pop up an alert.
If the first one fails and the second one works, there is a problem with your js script references. This would raise an error in your browser console.
Update
Instead of binding your form obtrusively, if you give your form an Id you could use the following jquery instead (jQuery reference):
#using (Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new { id = "target"}))
{
//form
}
<script>
$(function () {
$("#target").submit(function (event) {
event.preventDefault();
myJsFunction();
});
});
</script>
This would bind when the form when the document is ready.
#using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "form1Demo", onsubmit = "return CheckSubmit(event);" })){
//form
}
<script>
function CheckSubmit(e) {
var Name = $("#Name").val();
var Roll = $("#Roll").val();
var Price = $("#Price").val();
if (Name == "" || Roll == "" || Price == "") {
$("#msg").html("Please Enter All Values!");
swal("Validation Error!", "Please Insert All Values", "warning");
return false;
}
return true;
}
</script>
I have a click event, and within the event handler there's a function that suppose to return a string value
for example:
$('.customDropDownList li').click(function(){
var yourCurrentSeasonSelection = selectionReplaced(this);
//return var yourCurrentSeasonSelection from here.
});
function selectionReplaced(refT){
var valueRegistered = $(refT).find("a[href]").attr('href').replace('#', '');
....
return valueRegistered;
}
How do I get the return value after the click from the yourCurrentSeasonSelection variable?
Events don't have return values. You can do something like this though
$(".customDropDownList li").click(function(event){
selectionReplaced(this);
event.preventDefault();
});
function selectionReplaced(refT){
var link = $(refT).find("a[href]");
link.attr("href", function(idx, href){
return href.replace("#", ");
});
}
You can't "return" the yourCurrentSeasonSelection until the click has actually happened. Anything you want to do with that value has to go inside the click handler.
$('.customDropDownList li').click(function() {
var yourCurrentSeasonSelection = selectionReplaced(this);
//do something with yourCurrentSeasonSelection
});
After doing something I run this code:
var notification = webkitNotifications.createNotification(
'icon.png', // icon url - can be relative
'Done!', // notification title
'Just updated your list!' // notification body text
);
notification.show();
which of course pops up a notification into the users screen.
It there anyway to time this notification so that it auto-closes in X amount of seconds?
Thanks!
R
You can use notification.cancel();
var notification = webkitNotifications.createNotification('images/icon-48x48.png',"This is Title","Biswarup Adhikari Notification");
notification.show();
setTimeout(function(){
notification.cancel();
},2000);
Chrome notification will close automatically after 2000 milli sec or 2 sec.
You'll be able to call window.close() from inside the notification's HTML page. That will close the notification.
To close at a certain time, calling something like setTimeout( function () { window.close(); }, timeInMicroseconds); should be effective.
function show(title, message, icon) {
try {
icon = icon || 'src/img/icons/icon48.png';
var self = this;
var isClosed = false;
var notificationId = "posting_" + Math.random();
chrome.notifications.create(notificationId, {
type: "basic",
title: title + "!",
message: message,
iconUrl: icon
}, function (nId) {
});
setTimeout(function () {
if (!isClosed)
chrome.notifications.clear(notificationId, function (wasCleared) {
});
}, 3000);
} catch (e) {
alert(e.message);
}
}
ok, when i created notification remeber the id notificationId and settimeout clear this id
//Use requireInternaction and set it to true for notification to not to auto-hide.
function showNotification() {
var options = {
body: 'The Subtitles will Go Here',
requireInteraction: true
};
if (window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) { // status is "granted", if accepted by user
var n = new Notification('Title', options);
});
}
}