Skip to main content
February 4, 2009
Question

Submit Button Vs anchor tag

  • February 4, 2009
  • 11 replies
  • 4830 views
Hello Everyone,

I am facing a problem with regarding to passing variables from one page to another using <a href>. I was trying the sample code as below:

index.cfm

<!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=iso-8859-1" />
<title>Untitled Document</title>


</head>
<script language="javascript">
function saySomething(arg)
{
document.myform.firstname.value = arg;
var last = document.myform.lastname.value;
alert(document.myform.lastname.value);
}
</script>
<body>
<form method="post" action="index1.cfm" name="myform">
<input type="text" name="firstname" id="firstname" value=""/>
<input type="text" name="lastname" id="lastname" value=""/>
<a href="index1.cfm" onclick="saySomething('me')">Click here</a>
</form>
</body>
</html>

index1.cfm

<cfoutput>Hello</cfoutput>
<cfparam name="myvariable" default="lavanya">
<cfif isdefined("form.firstname")>
<cfset myvariable = #form.firstname#>
</cfif>
<cfoutput>#myvariable#</cfoutput>
<cfoutput>#form.lastname#</cfoutput>

I am not able to retreive the value from the previous page. But when I replace the <A href> with the submit button, all works fine...How can I make it possible using <a href>?
This topic has been closed for replies.

11 replies

February 10, 2009
Hey Thanks all....I got it working.....
February 10, 2009
I did try this, it stops when first condition fails, but does not recognise the second function argument when first function return true.
Inspiring
February 9, 2009
Write a 3rd function that calls the first two.
February 9, 2009
I have written one more function to call other two functions as follows:

function all_functions(){
checkform(1);
saySomething('me');
}

Then called the main function as follows:

<a href="javascript:all_functions()">Click here</a>

I want the page to stop processing if the validation fails. The function that is checking the validation is checkform. I tried to place return false at the end of that function, but that does not seem to work...Can anyone suggest a right approach.....
Inspiring
February 4, 2009
Ok. I modified your code slightly and successfully tested it. Th key difference is in the link. There's no need to supply a URL/page in the href attribute and that may have caused some of the headaches, despite the return false in the onclick.

I used the javascript:void(0) instead. Then I removed the return false from the JS function (not needed). All worked.

Let me know if this now works for you.

INDEX.CFM
<!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=iso-8859-1" />
<title>Untitled Document</title>

</head>
<script language="javascript">
function saySomething(arg)
{
document.myform.firstname.value = arg;
document.myform.submit();
}
</script>
<body>
<form method="post" action="index1.cfm" name="myform" id="myform">
<input type="text" name="firstname" id="firstname" value=""/>
<input type="text" name="lastname" id="lastname" value=""/>
<a href="javascript:void(0)" onclick="saySomething('me')">Click me</a>

</form>
</body>
</html>

INDEX1.CFM
<cfoutput>Hello</cfoutput>
<cfparam name="myvariable" default="lavanya">
<cfif isdefined("form.firstname")>
<cfset myvariable = #form.firstname#>
</cfif>
<cfoutput>#myvariable#</cfoutput>
<cfoutput>#form.lastname#</cfoutput>.
February 4, 2009
Now it works with the following code.

index.cfm:
<!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=iso-8859-1" />
<title>Untitled Document</title>

</head>
<script language="javascript">
function saySomething(arg)
{
document.myform.firstname.value = arg;
var last = document.myform.lastname.value;
//alert(document.myform.lastname.value);
document.myform.submit();
return false;
}
</script>
<body>
<form method="post" action="index1.cfm" name="myform">
<input type="text" name="firstname" id="firstname" value=""/>
<input type="text" name="lastname" id="lastname" value=""/>
<!--- <input type="submit" value="go" /> --->
<a href="javascript:saySomething('me');">Click here</a>
</form>
</body>
</html>

index1.cfm:

<cfoutput>Hello</cfoutput>
<!--- make sure firstname is defined and has a value that isn't an empty string, if not, use "me" --->
<cfif isdefined("form.firstname") and Trim(form.firstname) neq "">
<cfset myvariable = #form.firstname#>
<!--- <cfelse>
<cfset myvariable = "me" /> --->
</cfif>
<cfoutput>#myvariable#</cfoutput>
<cfoutput>#form.lastname#</cfoutput>

Thanks a lot for your help.....
February 9, 2009
Hey everyone,

I am facing another problem. When I add another javascript function for form validation and place that function just like in the code below it does not seem to recognise the second function. And even the first function does not trigger. Is this right way to call two javascript functions?

<a href="javascript:checkform(1);saySomething('me');">Click here</a>
Inspiring
February 4, 2009
Good deal.

Question for you, what are you looking to do with the JavaScript on the index.cfm page? Are you simply looking to force the firstname form value to "me"? Is there something else you're after there?

I think if we nail down what you want that JS code to do, it would be easier to add the JS back into that page and get it functioning properly.
February 4, 2009
Yes, I want to force the value of firstname with 'me'. I am writing a component and based on the value of firstname, would perform some action. So in the cfm page I would be using firstname as a hidden value which will get populated with 'me' upon clicking the link. Then I would be using this value in the .cfc page. I am going to have two links, but wanted to get the first link to have working. I mean instead of submit button, I will be using hyper links. I see that I get the page works perfect when using submit button but when I used hyperlinks its throwing element not found error.
Inspiring
February 4, 2009
Just to see if it submits correctly with all variables, try this code, it removes JS from the equation for the moment:

<!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=iso-8859-1" />
<title>Untitled Document</title>

</head>
<body>
<form method="post" action="index1.cfm" id="myform">
<input type="text" name="firstname" id="firstname" value=""/>
<input type="text" name="lastname" id="lastname" value=""/>
<input type="submit" value="go" />
</form>
</body>
</html>

index1.cfm:

<cfoutput>Hello</cfoutput>
<!--- make sure firstname is defined and has a value that isn't an empty string, if not, use "me" --->
<cfif isdefined("form.firstname") and Trim(form.firstname) neq "">
<cfset myvariable = #form.firstname#>
<cfelse>
<cfset myvariable = "me" />
</cfif>
<cfoutput>#myvariable#</cfoutput>
<cfoutput>#form.lastname#</cfoutput>.
February 4, 2009
yes that code works perfectly...
Inspiring
February 4, 2009
It could be that your form has the attribute name="myform" not id="myform". Azadi's code might not work unless you apply the id attribute to the form.

<script language="javascript">
function saySomething(arg)
{
document.myform.firstname.value = arg;
document.myform.submit();
return false;
}
</script>
<body>
<form method="post" action="index1.cfm" id="myform">

That said, I would not be inclined to submit this way (not that it's wrong or that Azadi's code/help is somehow incorrect). I would use, as Dan and I mentioned, the onsubmit event to do my submission and use a submit button over a link.
February 4, 2009
It throws the same error "Element lastname is undefined".
Inspiring
February 4, 2009
If you're getting that message, it would appear that the form is not actually being submitted.

Have you tried (on your index1.cfm page) to do the following?
<cfdump var="#form#" />
<cfabort />

If the form is being submitted, you should see the CFDUMP of the structure, etc.
Inspiring
February 4, 2009
If I might ask, what is the goal of "printing one text box value using javascript" on the same page of the form? I think we need a better understanding of what you're trying to accomplish to suggest a solution/approach.

Offhand, you could setup a JS function to run on submit (like what Dan mentions), like so:
<form action="myactionpage.cfm" onsubmit="return doStuff()">
...
</form>

<script>
function doStuff(){
alert(document.form.field.value);// a confirm here might make more sense but I'm not sure exactly what you're after
return true;
}

The key here is that the JS function doStuff() gets called on the on submit event. If it returns true (as I typed above), the form is submitted to the action page. If it returns false, processing is halted. This is the basic approach to JavaScript form validation (where the function returns false if something fails).

February 4, 2009
I did the same as suggested, but I keep getting, Element "Firstname" undefined on the page i am trying to print the output
Inspiring
February 4, 2009
so, basically, you want to submit your form with javascript.
how about googling that?

hint: document.myform.submit()

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/
February 4, 2009
Well, basically I want to print one text box value using javascript and then get the text box value one the second page after submit. I am able to do this using submit button, but I want to do that using anchor tag which I am not able to. I have tried the above suggestions, but I dont think thats what I am looking for.