So I read here: https://api.jquery.com/submit/ that I can do this
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
in order to prevent the form to be submitted when the submit button is clicked. However, for whatever reason it is not working and I have no idea why. I tried to delete everything except for two inputs and tried pressing the submit button but it still didn't alert me. Anybody know how to fix this? Here is the rest of my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript">
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
</script>
<body>
<div>
<h1 id="header" align="center"> </h1>
</div>
<div id="wrapper1">
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">About Website</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" href="javascript:void(0);">Dear Friends</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" href="javascript:void(0);">Dear Reader</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">The People</a>
<h1 class="infoText" style="display:none"></h1>
</div>
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">Sign Up</a>
<div id="wrapper2" style="display:none">
<form id="validationForm">
<input class="infoPlaceholder" name="firstName" placeholder="First Name"/>
<input class="infoPlaceholder" name="lastName" id="addRightMargin" placeholder="Last Name"/>
<input class="infoPlaceholder" name="email" placeholder="Email"/>
<input class="infoPlaceholder" name="city" placeholder="City"/>
<input class="infoPlaceholder" name="state" placeholder="State"/>
<p></p>
<div id="wrapper3">
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="elderlyButton" href="javascript:void(0);">Elderly</a>
<div class="eacQuestion" id="elderlyText" style="display:none">How many elderly?</div>
<div>
<input class="countBoxes" id="elderlyBox" style="display:none" name="elderlyCount" placeholder="#"/>
</div>
</div>
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="adultButton" href="javascript:void(0);">Adults</a>
<div class="eacQuestion"id="adultText" style="display:none">How many adults?</div>
<div>
<input class="countBoxes" id="adultBox" style="display:none" name="adultsCount" placeholder="#"/>
</div>
</div>
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="childrenButton" href="javascript:void(0);">Children</a>
<div class="eacQuestion" id="childrenText" style="display:none">How many children?</div>
<div>
<input class="countBoxes" id="childrenBox" style="display:none" name="childrenCount" placeholder="#"/>
</div>
</div>
</div>
<div style="float:left">
<textarea class="comments" name='comment' id='comment' placeholder="Comments"></textarea>
</div>
<div style="float:right" id="hvr-float">
<input type="submit" id="submitButton" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</body>
I know my code is like super nasty... This is my first website that I am building. Please help! I am so lost!
Put your code within $( document ).ready() handler
$(document).ready(function(){
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
});
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready. ( Taken from : https://learn.jquery.com/using-jquery-core/document-ready/ )
This can be seen from your code that the code is in head element. So, when the page is loaded the script is executed when the form is not yet available in the DOM. To wait for the DOM to finish loading, you can use ready.
So, you need to use ready
$(document).ready(function () {
$("#validationForm").submit(function (event) {
event.preventDefault();
alert('test');
});
});
Or, you can also move the script at the end of body.
Related
I'm using the Facebook comments plugin in an MVC environment and it's crashing with a 500 error in the console when I add a comment. I do not get an error when all of the comments are loaded during page load. However, the comments are successfully added to the URL, so the error is happening after creating the create.
Here's relevant code, cleaned up as much as possible (JavaScript at the bottom)
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<div class="w-container">
<div id="allPosts">
#foreach (var post in ViewBag.Posts.Data)
{
<div class="w-row">
<div class="w-col w-col-12 w-col-medium-12 w-col-small-12">
<p>#post.MetaDescription ...</p>
</div>
</div>
<div class="w-row post-button">
<div class="w-col w-col-3 w-col-small-12">
<input type="hidden" class="postBodyHtmlHidden" value="#post.Body" />
<input type="hidden" class="postSlug" value="#post.Slug" />
<div class="fb-comments" style="display: none;" data-href="http://localhost:36998/blog##post.Slug" data-numposts="5"></div>
<input type="button" value="Continue Reading" class="btn btn-primary continue-reading-btn" />
</div>
</div>
}
</div>
<div id="postBody" style="display:none;">
<div class="w-row">
<div class="w-col w-col-12">
<input type="button" value="Back" onclick="AllPosts()" class="btn btn-primary" />
<br />
<div id="postHmtlDiv">
</div>
<div id="postCommentDiv">
</div>
</div>
</div>
</div>
</div>
<script>
$('.continue-reading-btn').on("click", function () {
var postHtml = $(this).closest('.w-row').find('.postBodyHtmlHidden').val();
var postSlug = $(this).closest('.w-row').find('.postSlug').val();
var postComment = $(this).closest('.w-row').find('.fb-comments').html();
$('#allPosts').css("display", "none");
$("#postHmtlDiv").html(postHtml);
$('#postCommentDiv').html(postComment);
$('#postCommentDiv .fb-comments').removeAttr('style');
$("#postBody").fadeIn("slow");
});
function AllPosts() {
$('#postBody').css('display', 'none');
$('#postHmtlDiv').html('');
$('#allPosts').fadeIn('slow');
};
</script>
I don't know how to debug this.
The error looks like this (again, this after adding a comment):
The answer was simple! This code is not valid!
<div class="fb-comments" style="display: none;" data-href="http://localhost:36998/blog##post.Slug" data-numposts="5"></div>
The data-href attribute
cannot be localhost. I changed it to something else and it worked!
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
No matter what I try I cannot get this to submit my search form
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox">
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit">
</div>
</div>
<!-- End search bar-->
</div>
</div>
<!-- /search_bar-->
</form>
</div>
This seems to work fine, BUT your HTML looks invalid. The form is not nested correctly and you have an extra tag.
Apparently, you just need to tidy up your HTML and the form will submit when you click the button.
$("form").submit(function( event ) {
alert( "Form submitted" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox" />
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit" />
</div>
</div>
<!-- End search bar-->
</form>
</div>
<!-- /search_bar-->
</div>
I have formatted your HTML correctly and as you can se, the form submits on click of the button.
Fiddle
<div class="container">
<div class="row" style="padding-top: 240px;">
<a href="#" class="btn btn-large btn-primary" rel="popover"
data-content="<form><input type="text"/></form>"
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JSfiddle
I'm guessing that I would store the form contents within a javascript function...
How do I contain a form within a bootstrap popover?
I would put my form into the markup and not into some data tag.
This is how it could work:
JS Code:
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
HTML Markup:
the popover link
<div id="popover-head" class="hide">
some title
</div>
<div id="popover-content" class="hide">
<!-- MyForm -->
</div>
Demo
Alternative Approaches:
X-Editable
You might want to take a look at X-Editable.
A library that allows you to create editable elements on your page based on popovers.
Webcomponents
Mike Costello has released Bootstrap Web Components.
This nifty library has a Popovers Component that lets you embed the form as markup:
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>
<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>
Demo
Either replace double quotes around type="text" within single quotes, Like:
"<form><input type='text'/></form>"
OR
Replace Double quotes wrapping data-content with single quote, Like:
data-content='<form><input type="text"/></form>'
<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" class="btn btn-primary" id="test">Top popover</a>
just state data-html="true"
like this Working demo http://jsfiddle.net/7e2XU/21/show/#
* Update: http://jsfiddle.net/kz5kjmbt/
<div class="container">
<div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content='
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JavaScript code:
$('a[rel=popover]').popover({
html: 'true',
placement: 'right'
})
ScreenShot
You can load the form from a hidden div element with the Bootstrap-provided hidden class.
<button class="btn btn-default" id="form-popover">Form popover</button>
<div class="hidden">
<form id="form">
<input type="text" class="form-control" />
</form>
</div>
JavaScript:
$('#form-popover').popover({
content: $('#form').parent().html(),
html: true,
});
Or try this one
Second one including second hidden div content to hold the form working and test on fiddle http://jsfiddle.net/7e2XU/21/
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<div id="popover-content" style="display: none" >
<div class="container" style="margin: 25px; ">
<div class="row" style="padding-top: 240px;">
<label id="sample">
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</label>
</div>
</div>
</div>
Open form
<script>
$('a[rel=popover]').popover({
html: 'true',
placement: 'right',
content : function() {
return $('#popover-content').html();
}
})
</script>
A complete solution for anyone that might need it, I've used this with good results so far
JS:
$(".btn-popover-container").each(function() {
var btn = $(this).children(".popover-btn");
var titleContainer = $(this).children(".btn-popover-title");
var contentContainer = $(this).children(".btn-popover-content");
var title = $(titleContainer).html();
var content = $(contentContainer).html();
$(btn).popover({
html: true,
title: title,
content: content,
placement: 'right'
});
});
HTML:
<div class="btn-popover-container">
<button type="button" class="btn btn-link popover-btn">Button Name</button>
<div class="btn-popover-title">
Popover Title
</div>
<div class="btn-popover-content">
<form>
Or Other content..
</form>
</div>
</div>
CSS:
.btn-popover-container {
display: inline-block;
}
.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
display: none;
}
I work in WordPress a lot so use PHP.
My method is to contain my HTML in a PHP Variable, and then echo the variable in data-content.
$my-data-content = '<form><input type="text"/></form>';
along with
data-content='<?php echo $my-data-content; ?>'
I'm trying to slideUp part of page by jQuery.
I use this code
$("#FirstPage").slideUp(1000);
I will hide FirstPage part of page,but not by time,I mean that it will hide suddenly not by 1000 ms.
the following code is FirstPage part,which should be hide after 1000ms and with slideUp.
<div id="FirstPage">
<div id="Login">
<form method="post" id="LoginForm">
<br />
<input type="text" name="username" id="username" />
<br />
<input type="password" name="passowrd" id="password" />
<br />
<input type="checkbox" name="invisible" value="TRUE" id="invisible" />
<br />
<img src="" /><input type="text" name="captcha" disabled="true" style="display: none"
id="captcha" />
<br />
<input type="button" value="Login ..." onclick="Ajax_Login()" />
</form>
</div>
<div class="OtherFeaturBig" id="WindowsVersion">
<img src="http://localhost/Files/Images/02.jpg" />
</div>
<div class="OtherFeaturBig" id="Advertisment">
<img src="http://localhost/Files/Images/02.jpg" />
</div>
<div class="OtherFeaturSmall" id="AboutUs">
<img src="http://localhost/Files/Images/03.jpg" />
</div>
<div class="OtherFeaturSmall" id="ContactUs">
<img src="http://localhost/Files/Images/03.jpg" />
</div>
</div>
where is my code problem?
This code works fine to slide your div up upon the click of a button:
$("#hide").click(function() {
$("#FirstPage").slideUp(1000);
})
As used in this jsFiddle with your HTML (I removed the non-functioning images): http://jsfiddle.net/jfriend00/JFRGr/.
So, the issue must have to do with either your code or the rest of your HTML, both of which you have not shared. If you want further help, please show us the actual code you are using and explain what triggers the code to run.
As Trikks said, make sure that you aren't calling slideUp before the page is fully loaded.
try
Ensure to run your code after document.ready so the DOM is really loaded. Also ensure that jQuery is loaded and 1sec = 1000 ms...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#FirstPage").slideUp(1000);
});
</script>