If I have a form which have 2 buttons , and when I click Button1 then it will be action="submit1.php" , if Button2 then action="submit2.php".
I tried this:
<script language="javascript">
function Button1()
{
document.Form1.action = "submit1.php"
document.Form1.target = "iframe1";
document.Form1.submit();
}
function Button2()
{
document.Form1.action = "submit2.php" ;
document.Form1.target = "iframe2";
document.Form1.submit();
}
</script>
Somewhere in the <body>:
<div style="visibility:hidden">
<iframe NAME="iframe1" WIDTH="40" HEIGHT="40"></iframe>
<iframe NAME="iframe2" WIDTH="40" HEIGHT="40"></iframe>
</div>
And in the form:
<form name="Form1" id="Form1" method="post">
<input type="submit" name="Button1" onclick="Button1();">
<input type="submit" name="Button2" onclick="Button2();">
</form>
It's not working , am I make anything wrong?
Thank you.
If I have a form which have 2 buttons , and when I click Button1 then it will be action="submit1.php" , if Button2 then action="submit2.php".
I tried this:
<script language="javascript">
function Button1()
{
document.Form1.action = "submit1.php"
document.Form1.target = "iframe1";
document.Form1.submit();
}
function Button2()
{
document.Form1.action = "submit2.php" ;
document.Form1.target = "iframe2";
document.Form1.submit();
}
</script>
Somewhere in the <body>:
<div style="visibility:hidden">
<iframe NAME="iframe1" WIDTH="40" HEIGHT="40"></iframe>
<iframe NAME="iframe2" WIDTH="40" HEIGHT="40"></iframe>
</div>
And in the form:
<form name="Form1" id="Form1" method="post">
<input type="submit" name="Button1" onclick="Button1();">
<input type="submit" name="Button2" onclick="Button2();">
</form>
It's not working , am I make anything wrong?
Thank you.
Share Improve this question edited Dec 21, 2011 at 12:10 RageZ 27.3k12 gold badges71 silver badges76 bronze badges asked Dec 21, 2011 at 12:08 Irene LingIrene Ling 1,9714 gold badges26 silver badges42 bronze badges 2- What exactly is not working? Are you saying nothing happens when you click the buttons, or something happens but the wrong thing (if so what?), or...? – nnnnnn Commented Dec 21, 2011 at 12:16
- @nnnnnn I;m so sorry for my late response.If I click the button it will just like refreshing the page.However it fixed now , thank you. – Irene Ling Commented Dec 22, 2011 at 23:39
4 Answers
Reset to default 5You have two issues
EITHER
change the buttons to type="button"
OR
remove the submit from the functions
Plain JS (using the simpler forms access):
<script language="javascript">
function Button(theButton) {
var theForm = theButton.form;
if (theButton.name=="Button1") {
theForm.action = "submit1.php"
theForm.target = "iframe1";
}
else {
theForm.action = "submit2.php"
theForm.target = "iframe2";
}
}
</script>
<form method="post" action="nojsavailable.php">
<input type="submit" name="Button1" onclick="Button(this);" />
<input type="submit" name="Button2" onclick="Button(this);" />
</form>
Unobtrusively (remended):
<script language="javascript">
window.onload=function() {
var buttons = document.getElementsByName("button");
for (var i=0;i<buttons.length;i++) {
buttons[i].onclick=function() {
var idx = i+1;
var theForm = this.form;
theForm.action = "submit"+idx+".php"
theForm.target = "iframe"+idx;
}
}
}
</script>
<form method="post" action="nojsavailable.php">
<input type="submit" name="button" id="button1" />
<input type="submit" name="button" id="button2" />
</form>
User small nameing for the functions. Javascript seems to be confusing Button1 function with Button1 object. So your solution would be
<script language="javascript">
function button1()
{
document.Form1.action = "submit1.php"
document.Form1.target = "iframe1";
document.Form1.submit();
}
function button2()
{
document.Form1.action = "submit2.php" ;
document.Form1.target = "iframe2";
document.Form1.submit();
}
</script>
and in form
<form name="Form1" id="Form1" method="post">
<input type="button" id="Button1" name="button1()" />
<input type="button" id="Button2" name="button2()" />
</form>
I remend using element.setAttribute('attributeName','attributeValue'); instead. Also, you don't need to use form.submit(); in this case, the submit button will submit the form anyway, just need to return true in the onclick method.
Try:
function Button1()
{
document.getElementById('Form1').setAttribute('action',"submit1.php");
document.getElementById('Form1').setAttribute('target',"iframe1");
}
function Button2()
{
document.getElementById('Form2').setAttribute('action',"submit2.php");
document.getElementById('Form2').setAttribute('target',"iframe2");
}
this would be your final code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript">
function button1()
{
document.Form1.action = "http://www.google."
document.Form1.target = "iframe1";
document.Form1.submit();
}
function button2()
{
document.Form1.action = "http://www.yahoo." ;
document.Form1.target = "iframe2";
document.Form1.submit();
}
</script>
</head>
<body>
<form name="Form1" id="Form1" method="post">
<input type="button" value="btn1" name="Button1" onclick="button1()">
<input type="button" value="btn2" name="Button2" onclick="button2()">
</form>
</body>
</html>