PDA

Click to See Complete Forum and Search --> : Functional Buttons

z28girl
11-18-2004, 09:41 AM
What is the HTML code for a button that is multifunctional. I want the submit button to not only email me the form (which I already have the code for) but that will print out another page without opening the actual page and forcing the user to manually print the page themselves.

HELP!!! please :(
Warren86
11-18-2004, 10:29 AM
For what it's worth:

<HTML>
<Head>
<Script Language=JavaScript>

var prnWindow = "";

function openPrnWindow(){

prnWindow = window.open("content.html","prnWin","toolbar=0,status=0,width=1,height=1")
prnWindow.print();
closePrnWindow();
}

function closePrnWindow(){

if (prnWindow.document.readyState == "complete")
{prnWindow.close()}
else{setTimeout("closePrnWindow()",2000)};
}

function printSubmit(){

openPrnWindow();
Form1.submit()
}

</Script>
</Head>
<Body>
<br>
<center>
<Form name='Form1' method='post' action='test.html'>
Here are the form fields
<br>
<input type=button value='Submit' onclick="printSubmit()">
</Form>
</center>
</Body>
</HTML>
z28girl
11-18-2004, 10:41 AM
WOW, how do you know all of that???

Im afraid that is a bit too complex for me. I already have my form made up and the html for the submit button is already in place, can you tell me what it is that I need to add to that submit button in order to make it print an additional page and where I put the name of the page I would like it to print? Thanks alot for your help!!
Warren86
11-18-2004, 10:51 AM
Yes, it's no longer an actual SUBMIT button, the text on it simply says Submit.

I just used an example form, that's all.

Change the Submit button line in your form to this:

<input type=button value='Submit' onclick="printSubmit()">

So, now it first calls the function printSubmit()

The page that will print is shown now in the very small window that opens, I used: "content.html" Change that to the document you want to print.

And you'll probably need to change this line, as well:

Form1.submit()

Change it to the NAME of your form. You can see that I named the demo form, Form1.

Okay?
z28girl
11-18-2004, 11:11 AM
Wow, I am totally impressed. Thank you so much, I have been pulling my hair out and reaching my deadline quickly. Thanks again.
Warren86
11-18-2004, 11:27 AM
You're welcome. Good luck with your project.
z28girl
11-18-2004, 02:08 PM
Ok, I think I must have done something wrong. I am using Yahoo Sitebuilder to build my form and when I open the file in wordpad to edit the HTML, I have no idea where anything should be inserted. I tried to type everything you sent me on a blank form but the only thing that shows up when I open it in my Sitebuilder is the HTML text.
What now?
Warren86
11-18-2004, 02:29 PM
I know nothing about Yahoo Sitebuilder.

You stated that you already had working form HTML.

In that markup you should have a line:

<input type=Submit>

There may be more to it than that, but that's the HTML for the form Submit button.

All you have to do is REPLACE that line with the HTML for the new button that I posted. This:

<input type=button value='Submit' onclick="printSubmit()">

Also, maybe your SiteBuilder didn't provide JavaScript tags in the Head.

Locate the Head part of your document. And then immediately below the opening <head> tag put the opening JS tag, if it's not already there.

<Script Language=JavaScript>

Then, further down the page, put the closing Script tag, it should be immediately ABOVE the closing HEAD tag:

</Script>
</head>

In between the Script tags, but the code I provided, the functions and the one variable declaration.

Okay?
z28girl
11-18-2004, 02:38 PM
Sitebuilder had already added the code to send the form to my email once someone clicks on the submit button, which is what I want it to do, but in addition to that I would like it to do something else as well.
I am going to try something easier, could you tell me what I need to add in order to just get the submit button to submit the form to my email, which the html for that is already in the form, but to create a link to another page as well?

Man this is hard stuff.:confused:
Warren86
11-18-2004, 03:01 PM
Create a link? Do you mean another button? A text link?

Well, I don't know... Try this instead of your existing Submit button.
There's no way of getting around changing the existing Submit button.

<input type=button value='Submit' onclick="sendEtc()">

and this is the sendEtc function:

function sendEtc(){
document.getElementById('linkBtn').innerHTML = "<input type=button value='New Link' onclick="getLink()">
myForm.submit();
}

Somewhere in your document, where you want the above link button to appear, put Span tags, like this:

<Span id='linkBtn'> </Span>

On Submit the button for the new link will appear.

Then you will need a function getLink(), for when the button is clicked.

function getLink(){
window.location = "somethingNew.html"
}

Make sense?
z28girl
11-18-2004, 03:11 PM
No, when the user clicks on the submit button, I want it to send me and email of that form AND I want it to open my order form.
I think I am going to throw up!!!:(
Warren86
11-18-2004, 03:28 PM
Ouch! This is all I have to offer you, concerning that. It opens the user's email client. Without using FormMail or server side code, this is the best I can do.

<HTML>
<Head>
<Script Language=JavaScript>

function sendMail(isForm){

isBody = "";
recipient = "me@someDomain.com";
isSubject = "Form Data";
isBody = "Name: " + isForm.personal.value +" --- ";
isBody += "Address: " + isForm.address.value +" --- ";
isBody += "City: " + isForm.city.value +" --- ";
isBody += "State: " + isForm.state.value +" --- ";
isBody += "Zip: " + isForm.zip.value;
document.forms.Send.action = "mailto:"+recipient+"?subject="+isSubject+"&body="+isBody+"&nbsp"
window.location = 'myOrderForm.html'
}

</Script>
</Head>
<Body>
<form name='Form1'>
Name <input name='personal' size=25><br>
Address <input name='address' size=30><br>
City <input name='city' size=15> State <input name='state' size=2><br>
Zip Code <input name='zip' size=4><br>
<input type=Reset>
</form>
<form name='Send' action=''>
<input type="submit" value="Send by Email" onclick="sendMail(document.Form1)">
</form>
</Body>
</HTML>

Do you see, there are two FORMS. Yours, with the data you want sent, and the form named SEND. This is the only way to do this. Do you see how the Send be Email button has (document.Form) for the onclick? You need to change that to your form name.

Okay?