submit multiple forms - javascript

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.

Related

Iframe Navagation through textbox?

DON'T REPORT YET - READ FIRST
I'm trying to make a textbox and a button, then a iframe that whenever you press the button it goes to the URL in the textbox. I have tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="application/javascript">
function navigate() {
$('#iframe1').attr('src', $('#ifrmsite').val());
return false;
}
</script></head>
<body>
Enter website url below:<br/>
<form onSubmit="return navigate();" method="get" action="">
<input type="text" value="http://www.w3schools.com/" name="ifrmSite" id="ifrmsite"/>
<input type="submit" value="Submit">
</form>
<br /><br />
<iframe name="iframe1" id="iframe1" src="" width="600" height="700" scrolling="auto">
</iframe>
</body>
</html>
But... It doesn't work for me. You see, this script also changes the page url, and since I see this trough a iframe on my website, it just doesn't work. If anyone knows a way around this or a different way to do it, please tell me! :) have a nice day!
you can, you have many pure js options:
var el = document.getElementById('ifrm');
el.src = url; // assign url to src property
window.frames['ifrm'].location = url;
//or
window.frames['ifrm'].location.replace(url);
if is your page you can just make links
link
but remeber that will only work in the same origin.
"It is generally possible to load documents from other domains in iframes. However, it would not be possible for the containing document to make a reference to the document inside the iframe due to the restrictions of the Same Origin Policy. Also, the page from the other domain could contain code that would prevent its being loaded in your iframe."

How do I pass a variable through a hyperlink?

I would like to start off saying that I'm very new to programming. I am developing a site (www.example.com) that has multiple hyperlinks.
When a user visits my site I want all the links to be defaulted to the back office of another site (www.tvcmatrix.com/mhammonds) I use. How do I set the links to redirect to the query string value based on inputted text from a form that is on my site (www.example.com)?
In other words, if the url reads www.example.com/?user=abelliard, how do I make all the links on the site change to "www.tvcmatrix.com/abelliard"? If no query string is present, then I would like for the links to be www.tvcmatrix.com/mhammonds.
Here is a file on my site for the form called "form.asp"
<!DOCTYPE html>
<html>
<body>
<form action="viral.asp" method="get" name="input" target="_self">
Your TVC Matrix Associate ID: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Here is the "viral.asp" file in the "form.asp" file.
<%# language="javascript"%>
<!DOCTYPE html>
<html>
<body>
<%
var id = Request.QueryString("user");
Response.Write("Your URL is: www.mca.com/?user=" + id)
%>
</body>
</html>
Here is the last file and front end of the site called "front.asp"
I have 'viral' and 'form' down packed. The main thing I needed help with was the front end of the site that deals with the links.
I have no clue if I am even a tad bit close or way off track, but what I have isn't working at all so I know it's wrong.
<!DOCTYPE html>
<html>
<head>
<title>Main Site</title>
</head>
<body>
Click Here!
<iframe width="450" height="40" src="form.asp">
</iframe>
</body>
<script lang="javascript" type="text/javascript">
function tvcid() {
var username = document.getElementById('username');
if (username.value != "") {
tvcid = "username";
}
else {
tvcid = "mhammonds";
}
}
</script>
</html>
How do I pass a variable through a hyperlink?
For staters, you're not using a hyperlink, you're submitting a form.
Request.QueryString("user"); is looking for something on the querystring. You're using POST, which has form fields.
Use Request("user");, which will grab the value regardless of whether it's on the querystring or a POST field. If you want to force recognition of form fields only, use Request.Form("user");
Classic ASP code is executed server side when the page loads. You are submitting a form inside an iframe, and the result page is also displayed inside the iframe. This result can't change anything on the parent page because it has already been loaded. The easiest way around this would be to have all your code on the same page. I'll show you how to do this with VBS as the scripting language, it's what I'm used to, but it should be easy enough to use server side JS instead
<%# language="VBScript"%>
<%
Dim id
If Request("user") <> "" then
id = Request("user")
else
id = "mhammonds"
End if
%>
<!DOCTYPE html>
<html>
<head>
<title>Main Site</title>
</head>
<body>
Click Here!<br />
<% If Request("Submit") <> "Submit" then %>
<form method="get">
Your TVC Matrix Associate ID: <input type="text" name="user" />
<input type="submit" name="submit" value="Submit" />
</form>
<% else
Response.Write("Your URL is: www.mca.com/?user=" & id)
End If %>
</body>
</html>
If you really don't want to have to reload front.asp then you need to look at ajax, and add the relevant tag to your question

asp form run at server, does not let inner html button onlick setinterval work

I'm trying to get a server side button to do some stuff on the client side (id="formSrvBtn"), but for some reason the setInterval functionality does not work as expected (expression to evaluate is not evaluated), i've also tried using a client button instead of the server button (id="formCltBtn") which would also be a valid option but with the same unwanted result...
The only way to make it work is to put the button completely outside of the server side context (id="cltBtn") which is not a valid option in our real life scenario.
Heres is the html for a small aspx confirming all of the above:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
<!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 id="Head1" runat="server">
<script type = "text/javascript">
function dumb_setInterval() {
setInterval(function(){alert('dumb setInterval after 5000ms!');}, 5000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<p><asp:ImageButton id="formSrvBtn"
runat="server"
OnClientClick="dumb_setInterval();"
AlternateText="This server img button's setInterval does not work!"
>
</asp:ImageButton></p>
<p><button id="formCltBtn"
onclick="dumb_setInterval();"
>
This client button's setInterval does not work!
</button></p>
</form>
<p><button id="cltBtn"
onclick="dumb_setInterval();"
>
This client button's setInterval works!
</button></p>
</body>
</html>
Form (id="form1") needs to runat server in our real life scenario, so what i need is to get buttons (id="formSrvBtn" or id="formCltBtn") click event firing the setInterval correctly.
Here's the solution rep (for visual studio 2005, sorry...): https://github.com/RASMiranda/setIntervalRunAtServer
And here's the direct link to download the solution: https://github.com/RASMiranda/setIntervalRunAtServer/archive/master.zip
You need to ensure the default behaviour of OnClientClick on your ImageButton is not called, as this will force a postback. You can do this by returning false from your dumb_setInterval() method:
function dumb_setInterval() {
setInterval(function(){alert('dumb setInterval after 5000ms!');}, 5000);
return false;
}
Then adding a return statement to your attribute:
<asp:ImageButton id="formSrvBtn"
runat="server"
OnClientClick="return dumb_setInterval();"

Different behavior of the onclick attribute during form submission

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.

submit form on click event using jquery

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.

Categories

Resources