Hello I came across a weird behavior with an onclick attribute regarding form submission.
Page on Server:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en-us" >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Return Form Example</title>
<script type="text/javascript">
function doSomething(){
alert("hey");
return false;
}
</script>
</head>
<body>
<form action="submit.php" method="post">
<input type="submit" onclick="return doSomething()" value="click me!">
</form>
</body>
</html>
In this example, running on my server, when I click the submit button I get an alert saying hey and I stay on the current page. However, I tried to set this same example up on jsfiddle and I get an 404 error meaning the form was submitted. I cannot figure out why this occurs.
Here is the jsfiddle where I am trying to replicate the behavior on my server.
jsfiddle:
http://jsfiddle.net/46XSv/
You want to check the option "no wrap - in <head>" which is "Do not wrap the Javascript code, place it in section".
Select "no wrap - in <head>" under "Framework and extensions"
In this page you'll find the description of each of the options around the bottom: http://doc.jsfiddle.net/basic/introduction.html.
Also its a good practice to include semicolon at the end of your return statement, like the following:
<input type="submit" onclick="return doSomething();" value="click me!">
You should use onsubmit on the <form> element instead of onclick on the <input> element. It will work correctly.
Related
This question already has answers here:
Set the value of an input field
(17 answers)
Closed 6 years ago.
This is a .php file and I have tried several things to make this work, but I am new to javascript. When I run this with the document.write enabled, it shows me that the onclick event for the button is working. But for whatever reason, I cannot find any information about how to write to an input text element within a form. Does anyone know how this should work? Do I have to put the button inside the form? Thanks.
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function setValue() {
//document.write("122.0000");
document.getElementById("someid").innerHTML="222.0000";
}
</script>
<center>
<button onclick="setValue()">Write value</button><br>
<center><form action="something.php" method="post" id ="inputForm">
Value: <input type="text" id="someid" /><br>
<input type="submit" />
</form>
Change
document.getElementById("someid").innerHTML="222.0000";
to
document.getElementById("someid").value="222.0000";
This will set the value of the text input to 222.0000 instead of trying to change the innerHTML, which is the content between the opening and closing tags (non-existent for inputs).
Whenever the jQuery is triggered I recieve the error 500 Internal Server Error, does anyone have any ideas why the code below might be causing this?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="../meta/js/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('#form1').submit(function(e){
e.preventDefault();
alert('I clicked it');
});
});
</script>
</head>
<body>
<form name="form1" method="post">
<button id="button">grab user data</button>
<select></select>
</form>
</body>
</html>
I'm gonna guess its because of this variable:
<%=button.ClientID %>
There is nothing else (shown) that would signify anything else that would throw an error.
Can you clarify what you mean by 'jQuery is triggered'? Does that mean upon 'click' ?
Or just by loading this page (I assumed the later)
I would guess that it's giving the error with this line:
$('#<%=button.ClientID %>')
Hard code a value instead and test it:
$('#buttonID')
In order to achieve what you want this will do the job:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click',function(){
alert("i clicked it");
});
});
</script>
</head>
<body>
<button id="myButton">Click Me!</button>
</body>
</html>
$(document).ready is used to execute your code just after your page is rendered, then $('myButton') will get any element with an id "myButton", then you will use the method "on" to attach any event you want, in this case you will want to choose the "click" event, then you should give an anonymous function where you will put the code you would like to execute on that action.
Your button is inside a tag with action="". This will cause a postback to "/". If your server doesn't handle this correctly, you will get an internal server error.
if you only want the alert to show, you can call preventDefault on the jQuery event object. Se example below:
$(document).ready(function() {
$('#<%=button.ClientID %>').click( function(e) {
e.preventDefault();
alert("i clicked it");
});
});
EDIT:
Forget what i wrote above. It doesn't work. Instead, use the submit event on the form. Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="#{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script>
$(document).ready(function() {
$('#form1').submit(function(e){
e.preventDefault();
alert('I clicked it');
});
});
</script>
</head>
<body>
<form id="form1" method="post" action="">
<button id="button">grab user data</button>
<select></select>
</form>
</body>
</html>
you are attaching the submit event to #form1 but your form doesn't have an id, only a name. You must select the form by name, $("form[name='form1']") or give it an id of id="form1".
So can someone please tell why neither of these options will actually submit the form? I am trying to do something more complicated but I have boiled it down to this to try and figure out why I can't seem to get this form to submit using a click event and submit()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#submitButton').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
$('#submitLink').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
});
</script>
</head>
<body>
<form action="javascript:alert('submitted');" method="post" id="testForm">
<label>Name</label>
<input type="text" name="name" value="" />
<input type="submit" name="submit" value="Submit" id="submitButton" />
<p>Submit Form</p>
</form>
</body>
</html>
Thank you!
it's because the name of the submit button is named "submit", change it to anything but "submit", try "submitme" and retry it. It should then work.
Why not simply use the submit button to run the code you want. If your function returns false, it will cancel the submission.
$("#testForm").submit(function() {
/* Do Something */
return false;
});
If you have a form action and an input type="submit" inside form tags, it's going to submit the old fashioned way and basically refresh the page. When doing AJAX type transactions this isn't the desired effect you are after.
Remove the action. Or remove the form altogether, though in cases it does come in handy to serialize to cut your workload. If the form tags remain, move the button outside the form tags, or alternatively make it a link with an onclick or click handler as opposed to an input button. Jquery UI Buttons works great in this case because you can mimic an input button with an a tag element.
Using jQuery button click
$('#button_id').on('click',function(){
$('#form_id').submit();
});
Do you need to post the the form to an URL or do you only need to detect the submit-event? Because you can detect the submit-event by adding onsubmit="javascript:alert('I do also submit');"
<form action="javascript:alert('submitted');" method="post" id="testForm" onsubmit="javascript:alert('I do also submit');">...</form>
Not sure that this is what you are looking for though.
I'm having multiple iframes in one page each one contains a form , and i put the submit button outside the iframes , and when user press on submit all forms should be submited and then the page should be closed , any one can help me in this?
this function called onclick on submit button
function Save_Close()
{
if (window.frames.intake_pat_info_iframe && window.frames.intake_pat_info_iframe._Submit('Update')) {
window.frames.intake_pat_info_iframe._Submit('Update');
}
if (window.frames.intake_job_info_iframe && window.frames.intake_job_info_iframe._Submit('Update')) {
window.frames.intake_job_info_iframe._Submit('Update');
}
if (window.frames.intake_spine_his_iframe && window.frames.intake_spine_his_iframe._Submit('Update')) {
window.frames.intake_spine_his_iframe._Submit('Update');
}
if (window.frames.intake_past_med_history_iframe && window.frames.intake_past_med_history_iframe._Submit('Update')) {
window.frames.intake_past_med_history_iframe._Submit('Update');
}
....
<input type="button" id="" name="" value="Save & Close" onclick="Save_Close()"/>
thnx
As long as you can use Javascript and your iframes are all being served from the same server, it's not that hard. A completely pure inline JS approach looks like (this is using ASP.NET for the server-side stuff but the important bit is the onclick() handler in the button)
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>IFRAME form submit demo</title>
</head>
<body>
<iframe name="iframe1" src="my_form.aspx"></iframe>
<iframe name="iframe2" src="my_form.aspx"></iframe>
<iframe name="iframe3" src="my_form.aspx"></iframe>
<iframe name="iframe4" src="my_form.aspx"></iframe>
<input type="submit" value="Submit All IFrames"
onclick="for(var i = 0; i < frames.length; i++) { frames[i].document.forms[0].submitButton.click(); }" />
</body>
</html>
EDIT: now explicitly calls form.submitButton.click() instead of form.submit() to invoke functions bound to submit button's Click handler.
This is not easy to achieve.
Each IFrame is a different document, and a submit button will only work on a single form, the one that is belongs to.
The get this to work, you will need to collect you data from all IFrames using javascript to populate one or more hidden fields on the form that the submit button is on.
If the different IFrames are on different domains however, this will not be possible due to the same origin security policy.
I am trying to learn javascript/jquery, using firebug to debug and have built a page, which I have reduced to a minimal below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script language="JavaScript" "text/javascript">
function geoAddress() {
alert("start");
var postcode = $("#PostCode").val();
}
</script>
<title>Postcode</title>
</head>
<body>
<div class="page">
<h2>Create</h2>
<form action="/Venues/Create" method="post">
<fieldset>
<p>
<label for="PostCode">Postcode:</label>
<input id="PostCode" name="PostCode" type="text" value="" />
<input type="button" onclick="geoAddress();"/>
</p>
</fieldset>
</form>
</div>
</body>
</html>
I believe that this worked previously, but now although it does work (i.e. I press the button and get an alert) in firebug, on first loading I see a javascript error.
I have jquery-1.3.2.js loaded in the same directory as my file.
I seem to be struggling with firebug so would appreciate pointing in the direction of tutorials for the current version for javascript debugging. I can't even see a way to view the whole error message.
I would appreciate any help with what this error is and also pointers in the right direction for using firebug.
1st step - Can you make sure jQuery is being requested successfully. In firebug click the Net tab and it will show you all requests that are made and the failed ones will appear in red.