Disable submit button until user clicks link

You know how most forms make you click yes in a checkbox to activate the submit button to agree to terms or something?

Well, Im looking to display a hyperlink and have the submit button activated only after the user actually clicks the link (will open in new window). Would this be written in javascript? If so, can anyone give me a good start?

Thanks.

 

yep, js

here is a small sample

 

Thank you. Thats very helpful. Now, how would I add on URL's to this? Like, if I want to list 2 or 3 URL's that need to be clicked before the user can continue. This is exactly what Ive been looking for...

 

Now, I have the following code:

<p><FORM METHOD="LINK" ACTION="submit2.php">
<input type="submit" name="but" id="but" value="Button" disabled><br>
<a href="javascript:;" onClick="document.getElementById('but').disabled=false;window.open('http://google.com')">Link</a><br>
<a href="javascript:;" onClick="document.getElementById('but').disabled=false;window.open('http://yahoo.com')">Link</a>
</form>
</p>

Code (markup):

Right now, when you click either link, the submit button is enabled. How do I make it where you have to click BOTH links in order to enable the submit button?


Thanks.

 

Make a flag for each link, probably the simplest method as there will not be many links.

e.g.

<script language="javascript">
function allLinksClicked() {
    if (link1clicked && link2clicked) {
        document.getElementById('btnSubmit').disabled = false;
    }
}
</script>
<a href="example" onclick="link1clicked = true; allLinksClicked();">Required link 1</a>
<a href="example" onclick="link2clicked = true; allLinksClicked();">Required link 2</a>

<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" disabled="disabled">

Code (markup):

Remember to make a fall-back for those not using JavaScript.

 

AWESOME! Thanks KRT! There will never be any more than 3-5 links, so this will work great.

*NOTE: Actually, this code is being inserted into a .tpl file, so the code you just gave does not work due to the "{".

Any ideas on how to make this work without using { or }??

 

hi again

you can include the code between <script> and </script> into an external file, and include the file in .tpl with <script src="file.js"></script>

 

Sorry sitefever, I saw this post before you edited and never saw it again because edits do not push the topic back to the top of the list.

Anyway, template files allow you to have literal code in there.

e.g. Smarty would allow you to insert the JavaScript code inside {literal} and {/literal} like so:

{literal}
<script type="text/javascript">
function allLinksClicked() {
    if (link1clicked && link2clicked) {
        document.getElementById('btnSubmit').disabled = false;
    }
}
</script>
{/literal}
<a href="example" onclick="link1clicked = true; allLinksClicked();">Required link 1</a>
<a href="example" onclick="link2clicked = true; allLinksClicked();">Required link 2</a>

<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" disabled="disabled">

Code (markup):