My code to call a jquery function when a form is submitted is never being called. I've checked the format of the code over and over again, and everything seems in order.
Any clue how to fix this?
Thanks
HTML:
<form class="form" role="form" id="experimentform">
<label for="name">Study Name</label>
<input class="form-control" type="text" name="name" placeholder="Experiment Name" id="name">
<label for="description">Study Description</label>
<textarea class="form-control" name="description" rows="4" cols="20" id="description" placeholder="description"></textarea>
<label for="numparticipants">Number of Participants</label>
<input class="form-control" type="number" name="numparticipants" id="numparticipants">
<input class="btn btn-success" type="submit" name="submit" value="Create">
</form>
jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
$(document).ready(function() {
$("#experimentform").submit(function(event) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
You absolutely cannot put code between <script></script> tags while also including an external file within the same <script> tag.
Should be...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#experimentform").submit(function(event) {
event.preventDefault();
alert( "Handler for .submit() called." );
});
});
</script>
Note: Typically, the .preventDefault() is the very first item within the function. See: event.preventdefault documentation
$(document).ready(function() {
$("#experimentform").submit(function(event) {
event.preventDefault();
alert("Handler for .submit() called.");
});
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form" role="form" id="experimentform">
<label for="name">Study Name</label>
<input class="form-control" type="text" name="name" placeholder="Experiment Name" id="name">
<label for="description">Study Description</label>
<textarea class="form-control" name="description" rows="4" cols="20" id="description" placeholder="description"></textarea>
<label for="numparticipants">Number of Participants</label>
<input class="form-control" type="number" name="numparticipants" id="numparticipants">
<input class="btn btn-success" type="submit" name="submit" value="Create">
</form>
Related
How can I add "error" class to the fieldset(s) too if their input's are have "error" class?
I'm trying to achieve this as the following, but it's adding the "error" class to every fieldsets no matter if the input is have the "error" class or not.
$('#submit').click(function(e) {
e.preventDefault();
$('input').each(function() {
if($(this).hasClass("error")){
$("fieldset").addClass("error");
}
});
});
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="form-holder">
<fieldset>
<legend>First name</legend>
<input type="text" class="form-control" name="firstname" placeholder="First name" required>
</fieldset>
</div>
<div class="form-holder">
<fieldset>
<legend>Last name</legend>
<input type="text" class="form-control error" name="lastname" placeholder="Last name" required>
</fieldset>
</div>
<div class="form-holder">
<fieldset>
<legend>Email</legend>
<input type="email" class="form-control error" name="email" placeholder="Email" required>
</fieldset>
</div>
<input type="submit" id="submit" value="Send">
The code is doing what you are telling it to. When you say $("fieldset").addClass("error"); it means to add the error class to all fieldset elements.
What you need to do is find the fieldset that is the parent of the input which has the error class. In your example this would be:
$('#submit').click(function(e) {
e.preventDefault();
$('input').each(function() {
if($(this).hasClass("error")){
$(this).closest("fieldset").addClass("error");
}
});
});
The closest() method will travel up the DOM looking for the first element which matches the selector. So it should find the closest fieldset parent to the input.
Try targeting the parent fieldset explicitly by using the parent selector. (And also cache the jQuery'd this var.)
$('#submit').click(function(e) {
e.preventDefault();
$('input').each(function() {
var $this = $(this);
if ($this.hasClass("error")) {
$this.parent("fieldset").addClass("error");
}
});
});
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="form-holder">
<fieldset>
<legend>First name</legend>
<input type="text" class="form-control" name="firstname" placeholder="First name" required>
</fieldset>
</div>
<div class="form-holder">
<fieldset>
<legend>Last name</legend>
<input type="text" class="form-control error" name="lastname" placeholder="Last name" required>
</fieldset>
</div>
<div class="form-holder">
<fieldset>
<legend>Email</legend>
<input type="email" class="form-control error" name="email" placeholder="Email" required>
</fieldset>
</div>
<input type="submit" id="submit" value="Send">
in the below code click() is not working
what is the problem i have tried $("login").on("click",function(){}); function also not still not working
<html>
<head>
<!--- Links --->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<!--html-->
<title>Test Page</title>
<script>
$("#login").click(function() {
alert("hai");
});
</script>
</head>
<body onload="$('#reg').toggle();">
<div id="user-area">
<div class="btn-area">
<button id="btnlgn" class="btn btn-outline-primary" onclick="toggleReg()">Login /Register</button>
</div>
<div id="forms">
<div class="form" id="reg">
<form class="form-sigin" id="register">
<input type="text" class="form-control" placeholder="Email" id="email">
<input type="name" class="form-control" placeholder="Full Name" id="name">
<input type="password" class="form-control" placeholder="password" id="password">
<input type="password" class="form-control" placeholder="Re-enter password" id="conPassword">
<input type="tel" class="form-control" placeholder="Mobile Number" id="number">
</form>
<button class="btn" id="register">Register</button>
</div>
<div class="form" id="lgn">
<form class="form-sigin" id="sigin">
<input type="text" class="form-control" placeholder="Email" id="emaillgn">
<input type="password" class="form-control" placeholder="password" id="passwordlgn">
</form>
<button class="btn" id="login">Login</button>
</div>
</div>
</div>
</body>
</html>
i am trying to display an alert when the button is pressed
<script>
$("#login").on("click", function() {
alert("hai");
});
</script>
this is also not working
You're executing your jQuery before the elements exist on the page. Either move your code to the end of the page before the closing </body> tag, or wrap it in a document ready call:
$( document ).ready(function() {
$("#login").click(function() {
alert("hai");
});
});
You should write javascript codes end of the body tags. If you use between head tags, use below.
<script>
$(function() {
$("#login").click(function() {
alert("hai");
});
});
</script>
I have a VERY simple email form (for a members-only page for a private club) to send email blasts. The code is simply:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../../tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
</head>
<body>
<h1>Email Blast</h1>
<form method="post">
<input type="hidden" name="from" value="blast#club.com" />
<input type="hidden" name="to" value="blast#club.com" />
<input type="hidden" name="reply" value="from#club.com" />
<input type="hidden" name="bcc" value="Tester <test#club.com>" />
<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>
<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>
<br/><input type="submit" value="Send Email" name="submit">
</form>
</body>
<script type="text/javascript">
jQuery(document).ready(function() {
tinymce.init({selector:"textarea.tinymce"});
});
</script>
For some reason the page simply isn't rendering the textarea.tinymce as I would expect, but there are no error messages in the JS Console and all the breakpoints are hit as I would expect.
What am I missing?
You should place your script tag inside the body tag, just before closing it.
If you put anything after closing your body tag, the browser will ignore it.
Look at the example below - if you place the script tag inside the body tag, it works like a charm:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.5/tinymce.jquery.min.js"></script>
</head>
<body>
<h1>Email Blast</h1>
<form method="post">
<input type="hidden" name="from" value="blast#club.com" />
<input type="hidden" name="to" value="blast#club.com" />
<input type="hidden" name="reply" value="from#club.com" />
<input type="hidden" name="bcc" value="Tester <test#club.com>" />
<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>
<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>
<br/><input type="submit" value="Send Email" name="submit">
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
tinymce.init({selector:"textarea.tinymce"});
});
</script>
</body>
</html>
how to fire submit button click automatically on page load..
<form id="loginForm" name="loginForm" method="post" action="http://www.streamuj.tv/login">
<input type="text" name="username" value="user" size="22" tabindex="3" id="name" class="logintext">
<input name="password" type="password" value="pass" class="logintext" id="password" tabindex="4" size="22">
<input type="submit" name="action_login" value="Spustit zdarma" onclick="return foo();" />
</form>
Add an id to the submit button and fire the click using click().
an example would be like
<input type="submit" id="my_btn" name="action_login" value="Spustit zdarma" onclick="return foo();" />
and fire the click in onload() as below
document.getElementById("my_btn").click();
<input type="button" name="action_login" value="Spustit zdarma" onclick="foo(this.form);" /> //pass your form parameter to your function.
<script type="text/javascript">
function foo(form) {
form.submit(); //submit your form
}
</script>
So your form will be submitted.
insert below in your <head>..</head>
<head>
<!--.... your other code here ... -->
<script src="jquery-1.11.3.min.js"></script>
<script language="javascript">
$(function () {
$('form').submit();
});
</script>
</head>
The code inside $(function() { ... }); will automatic run after page is loaded.
<form id="loginForm" name="loginForm" method="post" action="http://www.streamuj.tv/login">
<input type="text" name="username" value="user" size="22" tabindex="3" id="name" class="logintext">
<input name="password" type="password" value="pass" class="logintext" id="password" tabindex="4" size="22">
<input type="submit" name="action_login" value="Spustit zdarma" onclick="return foo();" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "#loginForm" ).submit();
});
</script>
How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!