I have specific html setup that looks like this
<table class="table">
<form action="" name="f_form" id="id_f_form" method="POST">
<input type="hidden" name="f1" value="555">
<tr onClick="javascript: submitform();">Block</tr>
</form>
</table>
Where the javascript function submitform() looks like this
function submitform() {
if (confirm("Do you want to proceed?")){
document.f_form.submit();
}
}
What I want is a general javascript function that works with every form and not only this form with the name="f_form". I really don't want to write a java function for each and every form :P.
This will use jQuery as it's easier to bind an event on multiple element.
$("form").on('submit',function(){
if(confirm("Do you want to proceed?")){
$(this)[0].submit();
}else{
return false;
}
});
Well for starters sort your HTML that is invalid HTML
Your code with valid required HTML, Body, head and DOCTYPE
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<table class="table">
<form action="" name="f_form" id="id_f_form" method="POST">
<input type="hidden" name="f1" value="555">
<tr onClick="javascript: submitform();">Block</tr>
</form>
</table>
</body>
</html>
use it at https://validator.w3.org/#validate_by_input
so for valid code it should be
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form name="f_form" id="id_f_form" method="POST">
<table class="table">
<tr onClick="submitform(this);"><td><input type="hidden" name="f1" value="555" />Block</td></tr>
</table>
</form>
</body>
</html>
As for your script with valid HTML you make it really easy using jQuery
function submitform(e){
if (confirm("Do you want to proceed?")){
jQuery(e).parent('form').submit();
}
}
Related
i am trying to pass the values from one html page to another html page but i am getting some errors..
below is my html page one code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function first() {
location.href = "onclick2.html";
}
</script>
</head>
<body>
<button onclick="first()" >Home</button>
<form action="onclick2.html" method="post">
<input type="text" name="sender" />
<input type="submit" value="send"/>
</form>
</body>
</html>
below is my html page 2 code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function first() {
location.href = "onclick.html";
}
</script>
</head>
<body>
<button onclick="first()">Home2</button>
<form action="onclick.html" method="get">
<input type="text" name="reciver" />
</body>
you can pass value in url and transfer it as given below :
location.href = "http://www.domainname.com/login.html?FirstName=admin&LastName=admin"
here is my html code.....
<!DOCTYPE html>
<html>
<title>Plot</title>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script>
function refilter()
{
var ch = document.getElementById('Choice').value;
//do something
}
</script>
</head>
<body>
<form action="save.php" name="myform" method="POST">
Select any station:<select id="Choice" name="choice">
<option value="None">Select</option>
<option value="option1">DELHI</option>
<option value="option2">MUMBAI</option>
</select>
<input type="button" onclick="refilter()" value="Submit!">
</form>
</body>
</html>
I wish to do two things:
1.save the "choice" entered by user, since I have to do further task using it and
2.call the "refilter" function.
As of now, I tried using php and store the "choice" in a text file but for that i need to change "input type=submit" and if I do so,
1.The function is not called.
2.the save.php file opens up, which i dont want. I wish to stay on the html page only.
I am a beginner to javascript and html and knew a little php, so tried my hand at that.
Is there anyway I can do both the tasks together?
You can do following with your code:
<!DOCTYPE html>
<html>
<title>Plot</title>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script>
<script>
window.onload = function() {
document.getElementById('test').onclick = function(event) {
document.getElementById('myform').submit();
// Do somthing
}
}
</script>
</script>
</head>
<body>
<form action="save.php" name="myform" id="myform">
Select any station:<select id="Choice" name="choice">
<option value="None">Select</option>
<option value="option1">DELHI</option>
<option value="option2">MUMBAI</option>
</select>
<input type="button" value="Submit!" id="test">
</form>
</body>
</html>
or you can follow: http://www.formget.com/form-submission-using-ajax-php-and-javascript/
Thanks.
The problem is that you want to have both the default behavior as well as your custom behavior.
Here's a simple solution you can try.
<form action="save.php" name="myform" method="POST" id="myform">
<input type="button" id="submit-btn" value="Submit" />
In javascript,
window.onload = function() {
document.getElementById('submit-btn').onclick = function(event) {
event.preventDefault();
refilter();
document.getElementById('myform').submit();
}
}
This will redirect the page to save.php anyway. If you don't want that, you can send a POST request via AJAX. Please find more about AJAX and post if you still face problems
I am trying to make this code work, I want the innerHTML to be changed but It's instantly changing and gets back to its initial state . Any help ?
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td>
<div id="text_this">123</div>
</td>
<td>
<button onclick="click_me();">Edit</button>
</td>
</tr>
</body>
</html>
Your form is getting submitted. Add a return false; to your button onclick event.
<button onclick="click_me(); return false;">Edit</button>
Or, make the button type='button' (This is the better option)
<button onclick="click_me();" type='button'>Edit</button>
The reason is because the button type is submit by default if a type is not specified.
From MDN,
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td><div id="text_this">123</div></td>
<td><button onclick="click_me();return false;">Edit</button></td>
</tr>
</table>
</form>
</body>
</html>
added a return false statement to the onclick event. without it, the form gets submitted and the page reloads
jsfiddle here
I come from MVC background and I have little experience with web forms.
I have established where the problem is, but so far I have been unable to fix this.
I have a form which is meant to execute Javascript function when body of the form loads. Please notice that head tag has a run at server attribute as it needs to use Request.QueryString.
The code is below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function doSomething()
{
// Use web forms to do something
var foo = <%= Request.QueryString["input"] %>;
}
</script>
<title>Foo</title>
</head>
<body onload="doSomething()">
<form id="MainForm" runat="server">
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
...
</td>
</tr>
</table>
</form>
</body>
</html>
I get the following error:
SCRIPT5007: The value of the property doSomething is null or undefined, not a Function object.
My guess is that something executes on a server or other way round. This has worked previously (over a year ago), so potentially something in a web config was overwritten. I have spent the most of day on this and had no luck so far.
Edit: Generated output is below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function doSomething()
{
debugger;
var o = crmForm.queryString;
}
</script>
<title></title>
</head>
<body onload="doSomething()">
<form name="MainForm" method="post" action="fooPage.aspx?input=queryString" id="MainForm">
<div>
// hidden fields
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
// inputs
</td>
</tr>
</table>
</form>
</body>
</html>
Instead of using the onload attribute of the body tag, you can also add the following code within the <script> tags:
if(window.addEventListener) window.addEventListener("load", doSomething, true);
else window.onload = doSomething;
I’m maintaining a site in ASP, one of the tasks is to set the focus on textbox on a page.
Here is what I have tried:
<script type="text/javascript">
<!--
document.psForm['password'].focus();
//AND
document.getElementById("password").focus();
-->
</script>
I didn't think this would work... and it doesn't:
<form id="psForm" action="logonpw.asp" method="post" defaultfocus="password">
This doesn't work:
<body onload="javascript:docuument.psForm.password.focus();">
Here is the form:
<form id="psForm" action="logonpw.asp" method="post">
<table border="0" cellpadding="5">
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="password" value="<%= password %>" size="50">
</td>
</tr>
</table>
</form>
Try this:
Add:
id="password"
to the input tag, then use:
document.getElementById("password").focus();
a) move
<script type="text/javascript">
<!--
document.psForm['password'].focus();
//AND
document.getElementById("password").focus();
-->
</script>
to bottom of page source.
b) fire code on load
<script type="text/javascript">
<!--
function handleOnLoad(){
document.psForm['password'].focus();
//AND
document.getElementById("password").focus();
}
-->
</script>
...
<body onload="handleOnLoad();">
and by the way, only the second onfocus would do any good.
<body onload="javascript:docuument.psForm.password.focus();">
should be
<body onload="javascript:document.psForm.password.focus();">
Check spelling...
<body onload="javascript:document.psForm.password.focus();">
document was misspelled