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
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>
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 am trying to validate my form using parsley.js, I am working as the official good book says to do so but due to some reasons (that I obviously don't know right now), it is not working.
Here is the code
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required />
<label>Email </label>
<input type="text" name="email" class="form-control" data-type="email" data-trigger="change" required />
<label>Password </label>
<input type="text" name="lname" class="form-control" data-type="password" required />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
Here is the Plunkr link.
I dont know how to save it so I'm posting it here:
I changed the jquery version, the parsley version (you used an old one), and also added the css from parsley site. Your tag attributes were wrong. this works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parsley JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://parsleyjs.org/src/parsley.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.4/parsley.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-parsley-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required="true" />
<label>Email </label>
<input name="email" class="form-control" type="email" data-parsley-trigger="change" required="true" />
<label>Password </label>
<input name="lname" class="form-control" type="password" required="true" />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
The problem was is was using data-required instead I have to use data-parsley-required and also instead of data-validate="parsley" it should be data-parsley-validate="parsley"
Plunkr modified
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>
I am try to apply the jquery ui effect on a button, this is my head
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/travelbuddy.css" rel="stylesheet" media="screen">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-selectify.js"></script>
<link rel="stylesheet" href="css/selectify.css" />
<script src="js/myfunctions.js"></script>
</head>
Everything seems to be loaded since there is no error in the Chrome console and I can see the files in the resources of the inspector.
Here is the part where I have my button:
<div class="container" >
<div class="row-fluid" >
<div class="span6" id="MyProfile">
<h1>Your profile</h1>
<form action="" method="post" id="registerform">
<p>
<label for="firstname">Firstname</label>
<input class="inputfields" type="text" name="firstname" id="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input class="inputfields" type="text" name="lastname" id="lastname" />
</p>
<p>
<label for="email">Email</label>
<input class="inputfields" type="email" name="email" id="email" />
</p>
<p>
<label for="phonenumber">Telephone number</label>
<input class="inputfields" type="tel" name="phonenumber" id="phonenumber" />
</p>
<p>
<label for="birthday">Birthday</label>
<input class="inputfields" type="datetime" name="birthday" id="birthday" />
</p>
<p>
<label for="selectgenre">Genre</label>
<select id="selectgenre">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
<p>
<label for="cities">Where do you live?</label>
<input class="inputfields" type="text" name="cities" id="cities" />
</p>
<input id="saveprofile" type="submit" value="A submit button">
</form>
</div>
<div class="span2 offset1" id="MyPhoto">
</div>
</div>
</div>
And in my function I simple have:
$( "#saveprofile" ).button();
I also tried:
jQuery( document ).ready(function( $ ) {
$( "#saveprofile" ).button();
});
but didnt work. Any idea what I am missing?