| SitePoint Sponsor |
i have a simple form in a html page.
the form successfully sends data to my database using asp.
currently sending details using
<input type="submit" value="Submit">
which as you know uses the small grey box Submit button.
what i would like instead, is that instead of using this default button to submit..
i could replace that with a roll over image, that is compiled of the 2 files
submit.gif and submit-white.gif
and when it is pressed, the form details are posted, how can this be done
Probably some Javascript would do the trick.
One way that comes to mind,
<a href="javascript:doSubmit();"><img src="...."></a>
and in your javascript function, you do the form displaying etc, then to submit just use <formName>.Submit
Did that help?
im using this format at the moment, sorry im a little dull. that page calls the below asp file, what would ii need to change??Code:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Industry Designer Questionnaire</title> </head> <body> <form action="designer.asp" method="post"> Do you think universities provide students with the necessary skills needed for the design world? <br> <input type="text" name="q1"><br><br> What are the main skills that you find newly graduated students are missing, but very necessary? <br> <input type="text" name="q2"><br><br> Why is there such a high demand for at least one years experience? <br> <input type="text" name="q3"><br><br> What skills do you find that are gained in that year? <br> <input type="text" name="q4"><br><br> Do you think live briefs are beneficial to students? <br> <input type="text" name="q5"><br><br> What advice would you give a person who is looking for a job in the field of graphic design? <br> <input type="text" name="q6"><br><br> Does your company offer internships/apprenticeships for graphic design students? <br> <input type="text" name="q7"><br><br> Your Name <input type="text" name="qname"> Your Email <input type="text" name="qemail"> <input type="submit" value="Submit"> </form> </body> </html>
Code:<%@language = "VBScript" %> <% myq1 = Request.form("q1") myq2 = Request.form("q2") myq3 = Request.form("q3") myq4 = Request.form("q4") myq5 = Request.form("q5") myq6 = Request.form("q6") myq7 = Request.form("q7") myname = Request.form("qname") myemail = Request.form("qemail") MyPath=Server.MapPath("database.mdb") Set conn = Server.CreateObject("ADODB.Connection") conn.Open "Driver={Microsoft Access Driver (*.mdb)};" & _ "DBQ=" & MyPath SQL = "INSERT INTO designer (question1, question2, question3, question4, question5, question6, question7, name, email) VALUES ('"&myq1&"','"&myq2&"','"&myq3&"','"&myq4&"','"&myq5&"','"&myq6&"','"&myq7&"','"&myname&"','"&myemail&"')" conn.Execute(SQL) %> <html> <head><title>Questionnaire Completed</title> </head> <body> <p>THANKS FOR YOUR TIME.</p> </body> </html>
On your first form, replace <input type="submit ... >
with
<a href="javascript:form.submit();"><img [put in your src here]></a>
I forget if submit needs () or not.. try it with and without.. but that should work.
<input type="image" src="something"> would also work, javascript free
put this code in <head> NO EDITING NEEDED HERE! and you could use an external link to the .js file if you don't want all this code to show immediately
and this code where your submit button is: the noscript is for browsers w/o js turned on.....still makes your page usable...simply replace the on .gif/off.gif with the name of your pics Good LuckCode:<SCRIPT TYPE="text/javascript"> <!-- // copyright 1999-2001 Idocs, Inc. http://www.idocs.com/tags/ // Distribute this script freely, but keep this // notice with the code. var submitRolls = new Object(); function submitroll(src, oversrc, name) { this.src=src; this.oversrc=oversrc; this.name=name; this.alt="Submit Query"; this.write=submitroll_write; } function submitroll_write() { var thisform = 'document.forms[' + (document.forms.length - 1) + ']'; submitRolls[this.name] = new Object(); submitRolls[this.name].over = new Image(); submitRolls[this.name].over.src = this.oversrc; submitRolls[this.name].out = new Image(); submitRolls[this.name].out.src = this.src; document.write ( '<A onMouseOver="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].over.src"' + ' onMouseOut="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].out.src"' + ' HREF="javascript:' ); if (this.sendfield) { if (! this.sendvalue) this.sendvalue = 1; document.write(thisform, ".elements['", this.sendfield, "'].value='", this.sendvalue, "';"); } document.write(thisform + '.submit();void(0);"'); if (this.msg)document.write(' onClick="return confirm(\'' , this.msg, '\')"'); document.write('>'); document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '" BORDER=0 NAME="' + this.name + '"'); if (this.height)document.write(' HEIGHT=' + this.height); if (this.width)document.write(' WIDTH=' + this.width); if (this.otheratts)document.write(' ' + this.otheratts); document.write('></A>'); if (this.sendfield) { document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">'); document.forms[document.forms.length - 1].elements[this.sendfield].value=''; } } //--> </SCRIPT>
BSL
Code:<SCRIPT TYPE="text/javascript"> <!-- var sr = new submitroll("submit_off.gif","submit_on.gif","mysubmit"); sr.write(); //--> </SCRIPT> <NOSCRIPT> <INPUT TYPE=SUBMIT VALUE="Go!"> </NOSCRIPT>
As what jimfraser has pointed use
<Input type="Image" src="image_path" name="imagename">
In asp u need to refer it with its x or y cordinates (like imagename.x)
in designer.asp...
add another Request
imagename = Request.Form("imagename.x")
If imagename <> "" Then
MyPath=Server.MapPath("database.mdb")
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Driver={Microsoft Access Driver (*.mdb)};" & _
"DBQ=" & MyPath
SQL = "INSERT INTO designer (question1, question2, question3, question4, question5, question6, question7, name, email) VALUES ('"&myq1&"','"&myq2&"','"&myq3&"','"&myq4&"','"&myq5&"','"&myq6&"','"&myq7&"','"&myname&"','"&myemail&"')"
conn.Execute(SQL)
End If
%>
<html>
<head><title>Questionnaire Completed</title>
</head>
<body>
<p>THANKS FOR YOUR TIME.</p>
</body>
</html>
nice help for asp
Posting Permissions
Bookmarks