Forums

Hi,

I am trying to make a simple text area code validation. Correct Code = advance , incorrect=try again

I want my users to see one text filed to fill out, titled "secret code". If they enter the correct code it redirects them to an internal page. If they enter an incorrect code they are put in a loop back to the form screen.

I have researched other posts on this forum. These two seem to be the closest to my problem.
https://www.chronoengine.com/forums/posts/f2/t100733/basic-code-check.html?page=1 - more than I need.
http://www.chronoengine.com/forums/posts/f2/t97068.html - CV4 not same admin interface.

Here is what I have tried so far ...

Layout
I created a form named : "test_ajax_code_check"

Created two elements : "Text Box" and "Submit Button"

Text Box Field Name : "code"

Text Box - Validation - Custom function : "checkCode"

Submit Button ( Nothing Changed from Default)

Setup
On Load

Load JavaScript :

function checkCode() {
  var code;
  code = jQuery('#code').val();
  jQuery('#code').css('border-color', 'silver');

  jQuery.ajax({
    // send the code back to the server
    url: 'index.php',
    data: {
      'option': 'com_chronoforms5',
      'chronoform': 'test_ajax_code_check',
      'event': 'ajax',
      'tvout': 'ajax',
      'code': code
    }
  })
  // do this when data is received back
  .done(function( data ) {
    if ( data == 'invalid' ) {
      jQuery('#code').val('');
      jQuery('#code').css('border-color', 'red');
    } else {
      jQuery('#code').css('border-color', 'green');
      jQuery('#code').prop('readonly', true);
    }
  });
}

Html Render (Nothing Changed)

On Submit

Event Switcher :
Events: "code"
Code:

<?php
$codes = array( 
  'apple',
  'banana',
  'orange',
  'pear'
);
$reply = 'invalid';
if ( in_array($form->data['code'], $codes) ) {
  // code is valid
  $reply = 'valid';
}
echo $reply;
?>

** Not sure where else to put this code?

On Success : Email & Display Message
On Fail : Event Loop "load"

Here is a link where I am testing it out.
http://crackedtvstick.com/index.php?option=com_chronoforms5&chronoform=test_ajax_code_check

Don't know what else to try. I'm sure its simple and I'm just not getting but any help is greatly appreciated.

Thank you,

James

Hi James,

Sorry for the delay in replying.

The first link you posted is the one to follow. The bit you missed is this
[list=]To manage the server part we add a new event to the form - named 'ajax' here and add a Custom Code action with code like this [/list]
In the form Setup tab, click the green Add New Event button; give the event the name ajax; drag in a Custom Code action and put the PHP code in there (and not in the On Submit event).

Bob

Bob,

Its kind of working. I followed your instructions. The text filed is checking whats entered into the text box against my codes and changing the border either red or green depending if the correct code was entered.

Still even if a correct code is entered I get a pop up window saying "The value entered is not valid" , and nothing happens when I hit the submit button. My goal is to make it so if a correct code is entered pressing the submit button redirects you to a different page on the site.

Here is the link to what I got so far: codes are still ... apple, orange, banana, ect
http://dennis4lc.accountsupport.com/main/index.php?option=com_chronoforms5&chronoform=test_ajax_code_check

Not sure what to change or if I need to add something special to the submit event.

I greatly appreciate all your help I shall get you many coffees if we can get this working.

Thank you, James

Hi James,

All the JavaScript in the example does is change the border color and set to readonly if the code is valid. It looks as if you need to extend that to change a URL linked to the Submit button so that the user is redirected as appropriate.

The pop-up message is because you have the input set as Required, probably better to disable the submit button until a valid code is entered.

Bob

Bob,

It worked... 😀

I moved the "Load JavaScript" element to the "On Submit" event and removed the "event switcher" completely.


Then I edited the "Custom Code" element in the "ajax" event to...

<?php
$codes = array( 
  'apple',
  'banana',
  'orange',
  'pear'
);
$reply = 'invalid';
if ( in_array($form->data['code'], $codes) ) {
  // code is valid
  $reply = '<script type="text/javascript">
    // Javascript URL redirection
    window.location.replace("http://www.alledi.com");
</script>';
}
echo $reply;
?>

Here it is in action.
http://dennis4lc.accountsupport.com/main/index.php?option=com_chronoforms5&chronoform=test_ajax_code_check

Thank you for all your help Bob.

James

Hi James,

That's great - just for clarity, rather than build the JavaScript snippet in the Ajax event and send it back to the form you can doe the same thing in the existing script.

. . .
  // do this when data is received back
  .done(function( data ) {
    if ( data == 'invalid' ) {
      // do something
    } else {
      window.location.replace("http://www.alledi.com");
    }
  });
}

Bob