Jump to content

Problem With Javascript


niels

Recommended Posts

Hey everybody,

I'm implementing a captcha in a form I made. Now I want allow the user to regenerate a new captcha.

But instead of reloading the whole page I wanted to use a little bit javascript.

As you can see I'm using cakephp. But I suck in Javascript.

This is what I have so far

 <?php 
                 //My captcha image, showing properly
		echo '<img name="captcha" id="captcha" src="'.$this->Html->url(array('controller' => 'captcha','action' => 'index')).'" alt="Captcha" /><br/>';
                //input to type the captcha
		echo $this->Form->input('captcha',array('label' => 'Are you human ?'));
		// the link I want to use to reload
		echo '<a href="#" onclick="document.getElementById(\'captcha\').src = \''.$this->Html->url(array('controller' => 'captcha','action' => 'index')).'\';">Reload?</a>';
	?> 

The last line I echo out the URL, at this moment when I click the link the page scrolls to the top of the page.

Hopefully somebody can help me .

Regards,

Niels

Link to comment
Share on other sites

I highly recommend jQuery. This is a link to the relevant jquery function you can use to reload a DOM element (a div, for example) by ID.

Literally all it takes is:

$('#element_to_load_into').load('url_to_generate_captcha');

It is possible to get fancier with jquery (ie. wait for the DOM to finish loading, then attach an on-click handler to a button), but the above snippet will get the job done.

Link to comment
Share on other sites

The jumping is probably caused by the hash character within the anchor tag's href attribute. These generally cause the page to jump to the top. You can prevent this however by returning false in the onclick attribute.

Like so...

<a href="#" onclick="return false;">example</a>

or in your case...

echo '<a href="#" onclick="document.getElementById(\'captcha\').src = \''.$this->Html->url(array('controller' => 'captcha','action' => 'index')).'\'; return false;">Reload?</a>';

I would have to agree with PoyBoy's advice regarding the use of jQuery. Its use would allow for a much nicer solution.

Link to comment
Share on other sites

  • 2 weeks later...

Looks like what you want would need some Ajax...

So instead of having that button open a link, you have it create a new XMLHttpRequest that gets the output of that php page and then use getElementById to replace the innerHTML of the tag with the newly received html...

Sorry, I cant explain it that well... http://www.w3schools.com/XML/xml_http.asp

Link to comment
Share on other sites

Thanks for the response,

I didn't had the time to test it yet but this is what I come up with but I doesn't work.

Could somebody take a look at this code of mine.

<style>
	#reload{
		text-decoration: underline;
		cursor: pointer;
	}
</style>

<script type="text/javascript">
	$("document").ready(function(){
		$("#reload").click(
				function(){
					$("#captcha").load('/captcha');
					//$("#captcha").html('<img id="captcha" alt="Captcha" src="/captcha" name="captcha">');
					//$("#captcha").attr('src', "/captcha");
				}
		);

	});
</script>

<form id="ContactIndexForm" accept-charset="utf-8" action="/contacts"
	method="post">
	<div style="display: none;">
		<input type="hidden" value="POST" name="_method">
	</div>
	<fieldset>
		<legend>Contact formulier</legend>
		<div class="input text required">
			<label for="ContactName">Naam</label> <input id="ContactName"
				type="text" maxlength="60" name="data[Contact][name]">
		</div>
		<div class="input text required">
			<label for="ContactEmail">E-mail</label> <input id="ContactEmail"
				type="text" maxlength="60" name="data[Contact][email]">
		</div>
		<div class="input select">
			<label for="ContactSubject">Ongerwerp</label> <select
				id="ContactSubject" name="data[Contact][subject]">
				<option value="Evenement aanvraag">Evenement</option>
				<option value="Link aanvraag">Link</option>
				<option value="Reclame aanvraag">Reclame</option>
				<option value="Fotograag aanvraag">Fotograaf</option>
				<option value="Andere">anders ...</option>
			</select>
		</div>
		<div class="input textarea required">
			<label for="ContactMessage">Berich</label>
			<textarea id="ContactMessage" rows="6" cols="30" name="data[Contact][message]"></textarea>
		</div>
		<img id="captcha" alt="Captcha" src="/captcha" name="captcha"> <br>
		<div class="input text required">
			<label for="ContactCaptcha">Beste ene minsj ?</label> <input
				id="ContactCaptcha" type="text" name="data[Contact][captcha]">
		</div>
		<span id="reload">Nieue Figuur</span>
		<input id="ContactFoo" type="hidden" name="data[Contact][foo]">
	</fieldset>
	<div class="submit">
		<input type="submit" value="Versturen">
	</div>
</form>

Like I said I'm using cakephp so this isn't the whole page but I think it enough to get the picture.

I'm trying to reload the captcha part here.

Link to comment
Share on other sites

A few things:

1) look for what you need in a cakephp mod or whatever they are called.

2) It looks like your using jquery or cake is using jquery..are the files included on page or in the cakephp ini/cfg files?

3) The call to '/captcha' as the reload element most likely would have to be a actual path since cakephp in MVC system, there is a controller parsing everything to the proper location.

Link to comment
Share on other sites

Hi Niels,

I am going to provide a machine hacking solution which works better (humans <3 usability) if you are starting from scratch. It doesn't answer your javascript question (I suck at it too) and is perfectly fine if you dismiss it completely.

People are not very good at proving they are not machines (hence why you need reload). If you create a fake CAPTCHA system and hide it from view from humans (with a CSS class that has display:none) then ALL the machines will fill it out and you can catch that and return a success page, block the offender's IP and dismiss the comment or signup information. It is not necessarily easier to implement than a service like Re-CAPTCHA but it's ALL code based and CANDY for humans who hate CAPTCHA.

Good luck!

Marie-Lynn

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...