I have two forms in my page. I hide the form 2 using HTML inline style.
<form id="productionForm" name="productionForm" method="POST" style="display:none;">
I have input button on form 1.
<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />
I have JQuery code to load the form 2 on button click of form 1. My JQuery code is as follows.
<script type="text/javascript">
$(document).ready(function(){
$("#buttonProductionSummary").click(function() {
$("#productionForm").show();
});
});
</script>
When i click the button in the form one, the page get reloaded again, so the form 2 appears and disappers again. How to can i make the form 2 to appear when i click button on form 1.
You need to prevent the default behavior of the form:
$("#buttonProductionSummary").click(function(e) {
$("#productionForm").show();
e.preventDefault();
});
The problem is that clicking the button in form 1 is triggering a submission of the form (default event)... Hence, the page reloading. You should prevent that by using the submit event as your trigger, handle the form using AJAX and output the result to #productionForm before displaying:
$("#form1").submit(function() {
/* AJAX calls and insertion into #productionForm */
$("#productionForm").show();
return false;
});
as per my requirement i tried to display the form which is to be edit and hide all remaining forms using the following way;
<html>
<head>
<script>
$(document).ready(function(){
$("#what").click(function() { //event called
$(".hello").hide(); // to hide all forms
$('#ayyappa1').show(); //to dispaly needed form only
return false //option to stop
});
});
</script>
</head>
<body>
<form id ="ayyappa1 " class ="hello"> // declare class for every form
<input type="check" class="what"> // trigger of click event
</form>
<form id ="ayyappa2 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa3 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa4 " class ="hello">
<input type="check" class="what">
</form>
</body>
</html>
None of the answers above works, so I figured it out myself. This code works like a charm.
<button id="btn" class="editbutton" >Edit your Profile</button>
<form id="editForm" action="" method="post" name="editForm">
<input type="text" name="txtname" placeholder="enter your name">
</form>`
<script type="text/javascript">
$(document).ready(function(){
$("#editForm").hide();
$("#btn").click(function(e) {
$("#editForm").show();
$("#btn").hide();
});
});
</script>
Related
After I click the button or click the send button here's what happens:
HTML super simplified code:
<!DOCTYPE html>
<html>
<body>
<!-- Page Preloder -->
<!-- Header section -->
<header class="header-section">
<form class="header-search-form">
<input id= "searchBarP" type="text" placeholder="Search on divisima ....">
<button id= "searchIconP"><i class="flaticon-search"></i></button>
<script>
var searchBarP = document.getElementById("searchBarP");
searchBarP.addEventListener("searchP",function(){
alert("Trial");
});
</script>
</form>
</header>
<!-- Header section end -->
</body>
</html>
Here what happens before clicking the button:
After:
searchBarP.addEventListener("searchP",function(){
alert("Trial");
});
The first parameter of addEventListener should be an event. You have searchP which is the element. Try putting click instead.
Your button doesn't have a type and the default type, in this case, is "submit". Since you also didn't specify the form's method, it defaults to GET. This method appends all parameters to the URL after a question mark, that's why you see it after clicking the button.
Solution 1:
If you want both the button and the searchbar to perform the same action, listen for the submit event:
<form class="header-search-form" id="form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="submit" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const form = document.getElementById("form");
form.addEventListener("submit", function(e) {
e.preventDefault();
alert("Trial");
});
</script>
</form>
Solution 2:
Set the button's type to "button" in order to prevent it from submitting the form.
<form class="header-search-form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="button" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const searchBarP = document.getElementById("searchBarP");
searchBarP.addEventListener("searchP", function() {
alert("Trial");
});
</script>
</form>
Keep in mind, though, that your searchP listener won't work because there's no event called "searchP". If you want to separate the behaviour of clicking the button and hitting "enter" while typing in the search bar, you can do something like this:
<form class="header-search-form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="submit" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const searchIconP = document.getElementById("searchIconP");
const searchBarP = document.getElementById("searchBarP");
searchIconP.addEventListener("click", function(e) {
e.preventDefault(); //Remove this if you want to submit the form when you click the button
alert("Button click");
});
searchBarP.addEventListener("keydown", function(e) {
if (e.keyCode === 13){
alert("Search bar enter hit");
e.preventDefault(); //Remove this if you want to submit the form when you hit enter while typing in the search bar
}
});
</script>
</form>
Basically i have submitted the form data by using jquery event in order to prevent page reload. Now , the informations of the form are not being displayed?
$("#btn-ser1").click(function() {
$("#form").submit(function() {
alert("you are submitting" + $(this).serialize());
});
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body>
<form method="post" id="form">
First Name :
<input name="fname">Last Name :
<input name="lname">Address :
<input name="address">Contact No. :
<input name="contact">Country:
<input name="country">City:
<input name="city">
</form>
<button type="button" id="btn-ser1">Serialize</button>
</body>
</html>
You aren't submitting, neither preventing the default action. You need:
$("#btn-ser1").click(function () {
// remove this event handler « #1
// $("#form").submit(function (e) {
// prevent refresh or default action « #2
e.preventDefault();
// change $(this) to $("#form") as you are binding it to the button, not the form.
alert("you are submitting" + $("#form").serialize());
// submit to the server « #3
$.post("path/to/post", $("#form").serialize());
// });
});
You forgot to do the #1, #2 and #3 as mentioned.
Your button is the incorrect type. This only works with a "Submit" button. Use this HTML snippet instead:
<button type="submit" id="btn-ser1">Serialize</button>
The javascript does not submit the form. On clicking the alert is
called, even checked with the object and it is not null. But the
.submit() method does not submit the form. Stuck here for a long time.
<script type="text/javascript">
$(document).ready(function(){
$("label img").click(function(){
alert("11");
$("#" + $(this).parents("label").attr("for")).click();
});
$("input").change(uploadForm);
});
</script>
<script type="text/javascript">
function uploadForm(){
alert("1");
document.getElementById('UploadFileFormId').submit();
}
</script>
<form id="UploadFileFormId" action="UploadFile" method="post"
enctype="multipart/form-data"
style="width: 40px">
<label for="UploadFileId">
<img src="images/button_up_lo.png"
onmouseover="this.src='images/button_up_hi.png'"
onmouseout="this.src='images/button_up_lo.png'" />
</label>
<span id="uploadSpanId" class="hidden">
<input type="file"
name="UploadFileName"
id="UploadFileId"/>
<button type= "submit" id="uploadButtonId" name= "uploadButton" ></button>
</span>
</form>
Try <input type="submit">
Use $('#uploadButtonId').submit(); since you are using jQuery.
Element ID is case sensitive (uploadButtonId vs UploadFileFormId)
The uploadForm function, which will submit the form, will execute only when the value of the control changes. Is that what you are expecting?
Note that, in this scenario, if you select a file, then select the same file again, no onchange event will fire.
I want a javascript to redirect the embedded form below when the submit button is clicked
The form is below
<div class="o-form-header"><h2 id="o-form-title">Mail List Subscription Form</h2><p id="o-form-description">Please fill in and submit the form below to subscribe to our mailing list.</p></div> <form action="http://sendfree.com/subscribe.php" method="post" accept-charset="UTF-8"><div class="o-form-row"><label for="FormValue_EmailAddress">Email Address</label><input type="text" name="FormValue_Fields[EmailAddress]" value="" id="FormValue_EmailAddress"/></div><div class="o-form-row"><label for="FormValue_CustomField689">Your Name</label><input type="text" name="FormValue_Fields[CustomField689]" value="" id="FormValue_CustomField689"/></div> <input type="hidden" name="ret_s" value="44" /> <input type="submit" name="FormButton_Subscribe" value="Submit" id="FormButton_Subscribe"/><input type="hidden" name="FormValue_ListID" value="8085"/><input type="hidden" name="FormValue_Command" value="Subscriber.Add" id="FormValue_Command"/></form>
The javascript I use below but it not redirecting to google.com after the submit button is clicked
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
window.location.href="http://www.google.com"
}
</script>
Please Help
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
location.replace("http://www.google.com");"
}
</script>
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function(event)
{
window.location="http://www.google.com";
event.preventDefault();
}
Default action on form button click is submitting of form, so we should prevent it.
I used Eventlistener but not still redirecting, check what may be wrong as am not good in javascript
<script>
document.getElementById("FormButton_Subscribe").addEventListener("click", function(){
window.location.href=" http://www.google .com";
});
</script>
I want to do something when a form is submitted.
var ispostaction = false;
$("#myform").submit(function () {
ispostaction = true;
});
When the form is submitted the .submit(function ()) is not called.
Is there anything wrong that I'm doing? I have the form id as myform.
I would appreciate any help.
Here's my xhtml page. I'm using JSF 2
<form id="myform" class="someclass" enctype="application/x-www-form-urlencoded"
action="pagename.jsf" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
</form>
The jquery documentation:
The submit event is sent to an element when the user is attempting to submit
a form. It can only be attached to <form> elements. Forms can be submitted
either by clicking an explicit <input type="submit">, <input type="image">,
or <button type="submit">, or by pressing Enter when certain form elements
have focus.
Calling the submit function will not trigger the submit event. You can "fix" this by adding a hidden button which you click from jquery instead. Most, if not all, browsers unfortunately display the same behavior.
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<body>
<form id="myform" enctype="application/x-www-form-urlencoded"
action="posturl" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
<input type="text" value="a value" />
<input id="submit" type="submit" value="submit" style="display: none;" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").bind('submit', function() {
alert('');
});
$("#submit").click();
});
</script>
</body>
</html>