Why can't I submit my form? - javascript

I have a modal popup, that I want to hide when the 'shade' is clicked, but not when the contents are clicked. For this purpose I have:
$('#shade').click(function(){
$('#shade').fadeOut();
}).children().click(function(e){
return false;
});
The problem is I have a form inside that I want to submit, and this code prevents the form from submitting, so I have:
$('#shade-form-submit').click(function(){
document.getElementById('shade-form').submit();
});
However this results in the following error in the console:
[13:07:21.145] TypeError: document.getElementById(...).submit is not a function # ...
What's going on? For reference, my <form> tag:
<form action='.' method='post' id='shade-form'>
<div>
<input type='text' />
</div>
<div>
<div>
<input type='submit' />
</div>
</div>
</form>

You need to exclude form inputs from the click handler you have on children():
$('#shade')
.click(function(){
$('#shade').fadeOut();
})
.children().not(':input').click(function(e){
return false;
});

Related

After submit, input text disappears and reload the page(AJAX)

Why my page reloads even I used ajax to it and it also disappears my input text after clicking the submit button. I already used show to solve it but it doesn't work.
<form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
<input type="text" name="name" id="name">
<span id="namenotif" style="color:red;"> <span>
<br>
<input type="text" name="price" id="price">
<span id="pricenotif" style="color:red;"> <span>
<br>
<input type="submit" name="submit" id="save"><br>
</form>
<script>
$(document).ready(function() {
$(document).on("click","#save",function(){
var name = $("#name").val();
var price = $("#price").val();
if(name==""){
$("#namenotif").html("Enter a name");
$("#name").show("fast");
$("#save").show("fast");
}
else if(price==""){
$("#pricenotif").html("Enter a price");
$("#price").show("fast");
$("#save").show("fast");
}else{
$.ajax({
url:"addproduct.php",
type:"POST",
data:{name:name,price:price},
success:function(data){
alert("Successful");
}
});
}
});
});
</script>
add return false to end of function, that handle click event
Two solutions:
Change the button type='submit' to type='button'
or ( and preferably )
Change the event listener to listen for the form's onSumbit event then call event.preventDefault or in jQuery, I think you just do return false in the callback.
The form is being submitted I think, because it is the default behavior of submit button to submit the form, no matter if you used ajax or not. so you can prevent the default behavior by simple adding a code in jquery. Modify the code like this:
$(document).on("click","#save",function(e){
e.preventDefault();
...............
Rest of the codes can remain same. so only prevent the default action, it should work.
Its because of type="submit"
Use
<input type="button" name="submit" id="save"><br>
Or
<a href="javascript:void(0) id="save">
or
jquery's preventDefault();

Javascript innerHTML Not Posting

I am trying to get a function to print out whatever the user inputs into the text-box. I am using onClick as an attribute on my submit button. I know I set it up properly because it flickers the answer, but only for a split second. How can I get the input to stay on the page? Here's the code: HTML: Type what you want to post to the website!
HTML:
<div id="main_div">
<section id="leftbox">
<form name="mybox">
Type what you want to post to the website!:
<br />
<input type="textbox" size="15" maxlength="15" name="text" id="text">
<br />
<input type="submit" value="Submit!" onClick="doFirst()">
</form>
</section>
</div>
<div id="insert"></div>
Javascript:
function doFirst(){
text = document.getElementById('text');
insert = document.getElementById('insert');
if(text.value == "")
{
insert.innerHTML = "Please input something!";
return false;
}
else
{
insert.innerHTML = text.value;
}
}
try this:
Using type=button
<input type="button" value="Submit!" onClick="doFirst()">
OR using type=submit
<form name="mybox" onsubmit="doFirst(); return false;">
<input type="submit" value="Submit!">
</form>
Explain:
The action for onclick in submit button DO executed. You keep see the page does not have any changes, because of there are a FORM. And the key point: the form handle the submit action after the JS function doFirst() immediately. Adding the onsubmit in the form with return false to stop default action, means:
<form name="mybox" onsubmit="return false;">
<input type="button" value="Submit!" onClick="doFirst()">
</form>
To simplify the changes, use button instead of submit type, or using onsubmit instead of onclick in form trigger.
onClick="doFirst()"
gets converted into an anonymous function:
function(){ doFirst() }
and whatever that function returns determines if the submit should be completed or aborted, so you should use:
onClick="return doFirst();"
In other words, it's not enough that doFirst return something, whatever doFirst returns should be returned again inside the onClick.

Perform a clean submit by removing hidden divs

I am trying to perform a 'clean' submit, i.e. a submit that is invoked after removing all hidden divs from the form field.
Since this is a feature I am going to use more often, I shifted my code into the extend-part:
$.fn.extend({
bindCleanSubmit: function() {
$(this).submit( function(event) {
event.preventDefault();
$(this).find("div:hidden").remove();
console.log("trying to commit...");
return true;
});
}
});
Now, all divs are removed, the console event is triggered but at the end the submit has not performed.
Do you now the problem here?
I'm not sure what you are trying to do with preventDefault(), but if you remove it from bindCleanSubmit(), hidden divs will be removed from the form and it will be submitted normally. So given the following html:
<form id="myform" method="POST" action="/">
<input type="text" name="displayedInput" value="1"/>
<div style="display: none">
<input type="text" name="hiddenInput" value="1"/>
</div>
<button type="submit">Submit</button>
</form>
...and the updated plugin:
$.fn.extend({
bindCleanSubmit: function() {
$(this).submit( function(event) {
$(this).find("div:hidden").remove();
console.log("trying to commit...");
return true;
});
}
});
$('#myform').bindCleanSubmit();
...only the displayedInput value will be submitted to the server when myform is submitted.

my jquery form validation is not working as i hope it should

I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>

How to show/hide a form on button click in jquery?

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>

Categories

Resources