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>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Form.html</title>
<style type="text/css">
body {
margin: 30px;
}
</style>
</head>
<body>
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>
For Example,
In this page there are two forms. I want to get the form that has the input type = password. I don't want to get the form using its ID(getElementById) because I want to get a more general solution for getting the form, with input type = password out of multiple forms.
I have looked into document.forms.elements but I am not able to get to the solution. Please help.
Edit:
In this I have given a sample html code but my question is rather general. The answers given before this edit have used .parentNode() to get the parent node of the input tag. But if the input is under the tags such as <span> or <section> then the .parentNode() would not give the <form> tag. Keeping that in mind, how to get the form tag with input type = password from a page with multiple forms using Javascript DOM?
As your HTML stands now, you can try using querySelector() and parentNode like the following way:
var passForm = document.querySelector('input[type=password]').parentNode;
console.log(passForm);
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
The easiest way to do this is with jQuery.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
<script>
$("form>input[type='password']").parent();
</script>
</body>
Following code is working when I am passing a correct session ID to the viewstate. but not working without session ID. Is it possible what I am trying.
What I have tried is:---
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body >
<form id="login" name="login" method="post" action="http://thirdPartySite/jsf/security/login.jsp" >
<input type="hidden" name="login" value="login">
<div >
<input id="userName" type="hidden" name="userName" autocomplete="off" value="yyyyy">
</div>
<div >
<input id="password" type="hidden" name="password" autocomplete="off" value="xxxx" >
</div>
<div >
<input type="submit" name="j_id_jsp_623365074_6" value="Login" ><br>
</div>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="712612493959427831:-20824210214191552" autocomplete="off">
</form>
</div>
</div>
</div>
</body></html>
<!-- Load jQuery from Google CDN !-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Load jQuery Validation Code !-->
<script type="text/javascript" src="js/parsley-standalone.min.js"></script>
<form data-validate="parsley" data-show-errors="true" method="post" action="php/mail.php">
<input type="text" class="contact_field" placeholder="Your Name" name="name" data-required="true">
<input type="text" class="contact_field" placeholder="Your E-Mail Address" name="email" data-required="true">
<textarea class="contact_field" placeholder="Question or Comment" rows="8" name="message" data-required="true"></textarea>
<input type="submit" class="contact_button" value="Send!">
<input type="reset" class="contact_button" value="Reset">
</form>
Every time I try to submit form, no validation occurs. A blank form easily passes and send the e-mail. Any idea what I'm doing wrong with this 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!
I'm trying to write a sign up form using CodeIgniter and want to use the jquery datepicker for DOB, but the following isn't working. This is the entire page:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://localhost/cc/css/style.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="http://localhost/cc/jquery/css/dot-luv/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://localhost/cc/jquery/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<title>CC - Card Central</title>
</head>
<body>
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
<fieldset>
<legend>Create a new account!</legend>
<fieldset>
<legend>Personal Information</legend>
<form action="http://localhost/cc/index.php/account/create_account" method="post" accept-charset="utf-8">
<input type="text" name="firstname" value="" placeholder="First Name" />
<input type="text" name="middlename" value="" placeholder="Middle Name" />
<input type="text" name="lastname" value="" placeholder="Last Name" />
<input type="text" name="dob" value="" placeholder="Date of Birth" class="datepicker" />
</fieldset>
<fieldset>
<legend>Account Information</legend>
<input type="text" name="username" value="" placeholder="Username" />
<input type="text" name="password" value="" placeholder="Password" />
<input type="text" name="passwordconfirm" value="" placeholder="Password Confirm" />
<input type="submit" name="submit" value="Done!" />
</fieldset>
</fieldset>
</body>
</html>
You've forgotten to include the jQuery library :-)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Put that before the script tag that references jQuery UI and you should be good to go