So I'm trying to get an alert through jquery code. I have 3 inputs so login.password and button and when writing your login and password you should get an alert (log+pass). The error that i'm getting is:
GET http://localhost/php5/jquery-3.3.1.min.js net::ERR_ABORTED.
Here is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> PHP </title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
var log=$("#login").val()
var pass=$("#password").val()
alert(log+pass)
})
})
</script>
</head>
<body>
<input id="login" placeholder="Login"><br>
<input type="password" id="password" placeholder="Password"><br>
<input type="button" id="send" value="send">
<div class="status"></div>
</body>
</html>
try to change
<script src="jquery-3.3.1.min.js"></script>
to
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it works for me
I add jquery.blockUI.js to my html page and I used it in the script. My HTML page is:
<form class="form-horizontal" role="form" id="form" method="POST" >
<button type="submit" class="btn btn-default btn_red" id="btnSubmit">Submit</button>
</form>
{% block customjs %}
<script src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ajaxStop($.unblockUI);
$(document).ready(function() {
$("#form").submit(function(){$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
});
</script>
{% endblock %}
This is not working in Firefox 50.1.0 version. When I use this into the submit block it will not work. I tried the onclick method in button.
<button type="submit" class="btn btn-default btn_red" id="btnSubmit" onclick="testing()">Submit</button>
<script>
function testing() {
$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
}
</script>
It did not worked. Finally I tried this also,
$("#btnSubmit").click(function(){$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
});
This is also not working in firefox. But worked in Chrome. So please give me a solution how to run this on firefox. I am creating a python django project and I can't continue my project without getting this done.
Thanks
Your first code snippet seems to have error, it's missing ending of document.ready(). Also have you tried preventing default on form submit.
I have tested this with preventDefault() and seems to be working on firefox and chrome. Withount preventDefault() there should be error on console after submit.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form class="form-horizontal" role="form" id="form" method="POST" >
<button type="submit" class="btn btn-default btn_red" id="btnSubmit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ajaxStop($.unblockUI);
$(document).ready(function(){
$("#form").submit(function(e){
e.preventDefault();
$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
})
})
</script>
</body>
</html>
The code from the answer before don't allow the execution of the form, at least in sails.js, but I erased the line e.preventDefault() and everything works.
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Multiple file upload in Sails</title>
</head>
<body>
<!-- enctype="multipart/form-data" -->
<form id="uploadForm"
enctype="multipart/form-data"
action="/file/upload"
method="post">
<input type="file" name="uploadFile" multiple/>
<input type="submit" value="submit"/>
</form>
<script type="text/javascript">
$(document).ajaxStop($.unblockUI);
$(document).ready(function(){
$("#uploadForm").submit(function(){
$.blockUI({ message: '<h4><img src="/images/6.gif" />Please wait...</h4>' });
})
})
</script>
</body>
</html>
if we push Html to the Dom , it will be display there but its not updated. is there any update function to jQuery ?
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
Anchor link not working when we push to the DOM , every answers must be appreciated ?
You should use the $(document).on('click', '.remove' instead:
$(function(){
$(document).on('click', '#add', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$(document).on('click', '.remove', function(){
alert('not working');
});
});
This way jQuery listens for click events on the document, and if the target element is .remove (for example) - the function will be triggered. It doesn't matter if the elements are added dynamically - the click event is always on the document, and jQuery will check the target element (and act accordingly).
Here is the update to your snippet:
$(function(){
$(document).on('click', '#add', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$(document).on('click', '.remove', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
You are attaching click event to element that does not exist in document.
You can use jQuery() to attach the event to the element when the element is dynamically created.
$(function() {
$("#add").on("click", function() {
var div = $("<div>", {
"class": "data",
html: $("<input>", {
type: "text",
value: "enter"
}),
append: $("<a>", {
href: "#",
"class": "remove",
html: "Remove",
on: {
click: function() {
alert("not working");
}
}
})
})
$(".outer").append(div);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div>
<!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
As per this question, I solved it by changing the line
$('.remove').on('click', function(){
to $('body').on('click','.remove', function(){
UPDATE: $('.outer').on('click','.remove', function(){
jQuery event handler .on() not working
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.outer').on('click','a.remove', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
The problem is that $('.remove') is not defined at the time you attempt to assign an Event to it. Change
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');;
});
});
to
$(function(){
$('#add').click(function(){
$('.outer').append("<div class='data'><input type='text' value='enter' /><a href='#' class='remove'>Remove</a></div>");
$('.remove').on('click', function(){
$(this).parent().remove();
});
});
});
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<meta charset='utf-8'>
<title>Untitled Document</title>
</head>
<body>
<div class='outer'>
<input type='button' value='Click me' id='add' />
</div>
</body>
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
<html>
<head>
<title>Quiz Application</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8">
function ready() {
if (document.getElementById("rb1").checked) {
alert("correct");
} else if (document.getElementById("rb2").checked) {
alert("incorrect");
} else {
alert("incorrect");
}
function prevpage() {
document.location=document.history.back();
}
}
</script>
</head>
<body id="body2">
<form method="post">
<center><h1>Quiz Application</h1></center><br><br>
<center>Is JAVA Object Oriented Language ?<br><br>
<radiogroup>
<input type="radio" id="rb1"/>Yes<br>
<input type="radio" id="rb2"/>No<br>
<input type="radio" id="rb3"/>May Be<br>
<input type="submit" id="sub" value="Freeze" onclick="ready();"/><br>
<input type="submit" id="next" value="Previous Question" onclick="prevpage();"/></center>
</radiogroup>
</form>
</body>
</html>
Above is my code for redirecting to first page which is not working .
Please help me for redirecting on first page.
I went through many options like window.location=-window.history.back(); ,window.history.back(1/-1) but none of them working.
Thanks in advance :)
Try this it should work
function prevPage() {
history.go(-1);
navigator.app.backHistory();
}
I'm new to HTML and developing and login form. Please find below the code I used. I want to import my JavaScript code into HTML form.please help me.
C:\Program Files\xampp\htdocs\forsiteSystem\thems\js\validation.js
function validateForm()
{
var x=document.forms["login"]["email"].value;
if (x==null || x=="")
{
alert("Email must be filled out");
return false;
}
}
C:\Program Files\xampp\htdocs\forsiteSystem\thems\login.html
<html>
<head>
<title>Login form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/validation.js">
</script>
</head>
<body>
<div>
<form name="login" action="" method="post" onsubmit="return validateForm()">
Email: <input type="text" name="email"><br>
password: <input type="text" name="pass"><br>
<input type="submit" id="Submit_button" >
</form>
</div>
</body>
</html>
Include your js file properly like this:
<script src="js/validation.js">
This code works for me.try
<html>
<head>
<title>Login form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/builder.js">
</script>
</head>
<body>
<div>
<form name="login" action="" method="post" onsubmit="return validateForm()">
Email: <input type="text" name="email"><br>
password: <input type="text" name="pass"><br>
<input type="submit" id="Submit_button" >
</form>
</div>
</body>
</html>
Your js file will be on same directory under js file with this name builder.js.
Code in js file is :
function validateForm()
{
var x=document.forms["login"]["email"].value;
if (x==null || x=="")
{
alert("Email must be filled out");
return false;
}
}
This tag should work:
<script src="js/validation.js"></script>
Script path should be.
<script src="js\validation.js"></script>
Js path shoulb be js/validation.js
<html>
<head>
<title>Login form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/validation.js" type="text/javascript">
</script>
</head>
<body>
<div>
<form action=".\login.php" method="post" onsubmit="return validateForm()">
Email: <input type="text" name="email"><br>
password: <input type="text" name="pass"><br>
<input type="submit" id="Submit_button" >
</form>
</div>
</body>
</html>
this is how you can add js correctly
<script type="text/javascript" src="js/validation.js"></script>