when I remove javascript my reset button works fine but when I load JavaScript its stops working.I have also tried making rest button using jQuery function. I have also tried using input type="reset" value="Reset"
but it is also not working. I have tried every thing that I know now I do not know what to do.
Please help
$(document).ready(function c () {
$("#f").click(function(event){
$("body").toggleClass("hi");
event.preventDefault();
});
});
$(document).ready(function c1() {
$("body").click(function(event){
$("p").toggleClass("hii");
event.preventDefault();
});
});
//reset funtion using jquery
/*$(document).ready(function re(){
$("form").click(function(event){
$("#r").reset(); //reset funtion using jquery
});
})*/
body{
font-size: x-large;
}
h2{
color: blue;
}
body.hi{
background:#242424;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="right"><input type="submit" id="f" name="night mode" value="night mode" onclick="c()" onclick="c1()"></div>
<h2>contact form</h2>
<form action="mailto:vwadhwa3#gmail.com" method="post" enctype="text/plain">
<label for="company">company's name<br>
<input type="text" id="company" name="company" autocomplete="companyname" placeholder="name" >
</label><br>
<label for="contact_person">contact person<br>
<input type="text" id="contact_person" name="contact person" autocomplete="contact person" placeholder="name">
</label><br>
<label for="email">email <br>
<input type="email" id="email" autocomplete="email" name="email" placeholder="xyz#abc.com"> <br>
<label >Subject</label>
<br>
<textarea name="subject" placeholder="Write something.."></textarea><br>
<button type="submit" value="Submit">Submit</button> reset button
I have also tried using input type="reset" value="Reset"
but it is also not working
<button type="reset" onclick="re()" id="r">Reset</button>
</form>
Your problem is that you are writing your $(document).ready() wrong. You do not declare a callable function as a parameter name to ready(). It should look like this:
$(document).ready(function() {
function myFunc(event) {
console.log("Function MyFunc() called");
}
});
Next you should only have one $(document).ready(). JavaScript does support multiple ready() declarations, but this just clutters up your code.
$( document ).ready()
Related
How do I solve the error cannot read property of 'addEventListener' of null ? when I add this code,document.getElementById("myForm").addEventListener("submit", SaveBookmark) in my JS file
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="button" id="submitBtn">Submit</button>
</form>
First please notice that you're calling DOM is loaded or duplicated formID.
This code is working fine. please change <button type="button"> to be <button type="submit" .../>
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", SaveBookmark);
function SaveBookmark() {
alert('success');
}
</script>
I'm by no means an expert but to avoid that error your JS should look like this
const myForm = document.getElementById("myForm");
if (myForm) {
myForm.addEventListener("submit", SaveBookmark)
}
This ensures that your form element exists before you add the event listener
Should work easily:
document.getElementById('myForm').addEventListener('submit', function() {
alert("yes!")
})
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
It does not work because you have a
<button type="button" id="submitBtn">Submit</button>
instead of:
<button type="submit" id="submitBtn">Submit</button>
and you're trying to reach submit event.
Anyway, i recommend you not to add event listeners due to resource wasting. Use it when it's the only option.
I let you another way to reach the same with default click eventlistener:
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn" onclick="saveBookmark()">Submit</button>
</form>
<script type="text/javascript">
function saveBookmark(){
alert ("Bookmark saved");
}
</script>
You'll click on submit button anyway so, use onclick event instead of creating an eventlistener. It works simplest and waste much less resources...
And remember to add action attribute to the form, trying to re-program defined behaviour will only make your software heavy and heavy on codelines and timeloads. Thats why know the language its important.
Hope it help!
When the user click on the form I am trying to show and hide a form and also trying to scroll down to see the form, the code that I have works after the first click. If i click for the first time it "shows the form but doesn't scroll down" after the first click it work fine. can someone explain me what am i doing wrong.
$('#showForm').click(function()
{
$('.formL').toggle("slow");
$('.formL').get(0).scrollIntoView()
});
HTML:
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
The problem is that in that function you try to scroll to the form while it's still not visible. To fix this, call scrollIntoView() in the callback of toggle() function. See the example here: https://jsfiddle.net/ux0qt5nn/
The issue is that on your first click, the element isn't there yet. Put the scroll function into a callback and you'll be good to go.
$('#showForm').click(function(){
$('.formL').toggle("slow", function() {
$('.formL').get(0).scrollIntoView();
});
});
$('#showForm').click(function(){
$('.formL').toggle("slow", function() {
$('.formL').get(0).scrollIntoView()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="buttonForm" id="showForm"><span>Click here to see form</span></button>
<br><br><br><br><br><br><br><br><!--Extra lines to show scroll-->
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
As explained in other answers, you are trying to scroll an element into view before it's visible and before it's reached its actual height. You can use the following approach to scroll to the amount necessary to display the form and still let the user see the animation. See comments in the code.
$('#showForm').click(function() {
var formL = $('.formL').show(), // show the form wrapper in order to get its height
formLHeight = formL.height(),
formLForm = formL.find('form').hide(); // hide the form itself instead
formL.height(formLHeight);
formLForm.toggle("slow", function() {
// optionally, reset the height
formL.height('auto');
});
// this line is only needed so that the code snippet will not scroll the
// outer browser window, but only the iframe content. If you're not in an iframe,
// you can just use the original scrollIntoView() approach instead
document.documentElement.scrollTop = formL[0].offsetTop;
// formL.get(0).scrollIntoView();
});
#spacer {
background: red;
color: #fff;
height: 80vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showForm">show form</button>
<div id="spacer">some long content</div>
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
Sorry for noobish question, i am new to html/javascript.
Lets say i have a from:
<form id="pass" >
<p>
Password: <input type="password" name="password" >
Username: <input type="text" name="username" value="User">
<input type="submit" value="Send" class=btn> <input type="Reset" class=btn>
</p>
</form>
And when button is pressed. I want to run function in script.js file, that for example clear the body.
What is the right way to do it?
Many thanks!
Add a code in your form tag as onsubmit="javascript: function_name();" example:
<form name="name" id="name" onsubmit="javascript: function_name();">
// your code
</form>
Now in your JS, write:
<script>
function function_name() {
alert("hi");
}
</script>
Download, include and use jQuery.
Give the button an id (for example, DoSomething) in your markup and call it like this:
$('#DoSomething').click(function() {
alert('my button works');
});
First of all, thank you for your kind help.
I have tried almost everything I found on stackoverflow but I cannot get this to work.
I created a form to send a text to the webmaster (instead of an email). So I have my index.php file
<style>
.result{
padding: 20px;
font-size: 16px;
background-color: #ccc;
color: #fff;
}
</style>
<form id="contact-form" method="post">
<div>
<input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="example#yourdomain.com" required="required" autocomplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea>
</div>
<div>
<input type="submit" value="Submit" id="submit-button" name="submit" />
*indicates a required field
</div>
</form>
<div class="result"></div>
And this is my jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#contact-form').submit(function() {
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){$(".result").appendTo(response)}
});
//return false;
});
});
</script>
The script does not work. If I put action = sendtext.php in the <form> it will work perfectly but it will take me to sendtext.php and echo the message.
What I want is to show the echo in the <div class="result"></div>.
Again thank you for your help.
UPDATE # 1
After a few comments...
this is what I have so far...
<script>
$(document).ready(function(){
$('#contact-form').submit(function(e) {
e.preventDefault();
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){$(".result").append(response)}
});
//return false;
});
});
</script>
Update 2
After reading all the comments and try different options, no success just yet! I did what #guy suggested, and it worked but I want to use form and submit.
Again, I appreciate all your time you put to help me out. Thank you!
The problem is that when you add sendText.php as the action, your jQuery will execute because the form is submitted so that will work... BUT it will also take you to the page of the form's action field. What you want to do is not call submit but just make a button instead and have the jQuery listen to a click on that button.
Instead of:
<input type="submit" value="Submit" id="submit-button" name="submit" />
Change it to a regular button:
<button id="submit-button">Submit</button>
Then in your jQuery, change the line
$('#contact-form').submit(function() {
to
$('#submit-button').click(function() {
Also, change appendTo to html and then the result should show up in your result div.
----EDIT----
This worked for me:
<style>
.result{
padding: 20px;
font-size: 16px;
background-color: #ccc;
color: #fff;
}
</style>
<div id="contact-form" >
<div>
<input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="example#yourdomain.com" required="required" autocomplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea>
</div>
<div>
<button id="submit-button">Submit</button>
*indicates a required field
</div>
</div>
<div class="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit-button').click(function() {
$.ajax({
type:"post",
url:"sendText.php",
data: $("#contact-form").serialize(),
success: function(response){
$(".result").html(response);
}
});
});
});
</script>
Use the the preventDefault() function so that the form doesn't do the redirection on submit.
After that, use append() instead of appendTo()
$('#contact-form').submit(function(e) {
e.preventDefault();
Change:
$(".result").appendTo(response)
to:
$(".result").append(response)
Can you try this,
$(".result").html(response);
instead of
$(".result").appendTo(response)
Jaavscript:
$(document).ready(function(){
$('#contact-form').submit(function() {
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){
$(".result").html(response);
}
});
return false;
});
});
Your appendTo in success callback is backward. In your example, you are trying to append the .result element to the response variable. Should be:
success: function(response){ response.appendTo(".result")}
I've been at this for two days and can't seem to get it. Basically, I'm using the JQuery Cookbook modal from scratch. My problem is the form html page loads fine but the code will not recognize my submit button. Here's the relevant parts of the code:
Separate HTML:
<div id="contact">
<form action="" id="register_form" method="post">
<p>First Name <br />
<input type="text" id="firstname" name="firstname" /></p>
<p>Last Name <br />
<input type="text" id="lastname" name="lastname" /></p>
<p>Username: <span class="micro">Must be a valid email address</span></span><br />
<input type="text" id="username" name="username" /></p>
<p><input type="submit" value="Register" id="register" /></p>
</form>
</div>
Here's the relevant parts of the modal code:
// Insert modal at end of </body>.
$('body').append('<div id="modal_wrapper"><!--[if IE 6]><iframe id="modal_iframe" frameborder="0"></iframe><![endif]--><div id="modal_overlay"></div><div id="modal_window"><div id="modal_bar"><strong>Modal window</strong>Close</div><div id="modal_content"><div id="contact"><form><p><input id="firstname" /></p><p><input id="register" /></p></form></div></div></div>');
$('#modal_content').load('mediaKitF.html#contact'.replace('#', ' #'), '', showModal);
$("input[type=text]").focus(function(){
// Select field contents
this.select();
});
$('input #firstname').focus();
$('#register').click(function () {
alert("hello there");
});
$('#modal_content').load() is an asynchronous method, which means that you are trying to attach your click event to the $('#register') element before receiving the new content. You need to either use $('#register').live('click', function() {}) or move the code attaching the click handler into your showModal function.