Potential Problem (Need answer ASAP)

Sorry to post another topic. Whilst testing my forms. 6 step multiform. I have step navigation off. and let chronoforms handle the steps. If say the user fills in step 1. All *fine i might add* but then clicks the button to proceed to step 2....twice/three times, the majority of time it misses the next step out entirely. Is there anyway i can stop this happening?

Thanks for your time. Brad

Hi Brad,
Apart from enabling the step navigation, I could only suggest using a javascript snippet to disable the submit button once clicked, and/or write a notice to the user to only click once and no double/triple-clicking.
Unfortunately, the Multipage CFPlugin has no other means than a counter in the session storage to keep track on which step the user is completing, so more elaborate tests are difficult to achieve.

/Fredrik

Hi fredrick, thanks for your help

If i enable step navigation. What do i need to change in terms of code to make the buttons go to the next step?

Will enabling URL steps like that make my form more vunerable to bots stumbling on them. At the moment step 1 has logic tests on "what is the answer 2+2?) etc etc.

Thanks again.

Hi Brad,
To enable step navigation, you'll have to add a form input named ccformstep which should have the value of the step you'd like to proceed to. I'd suggest you make this a hidden one.

I doubt this should affect your logics-tests, as the form would usually be loaded on the first step anyway (thus the internal counter directs the submitted data to the first child form, before updating the counter to the new step and displaying the appropriate child form).

/Fredrik

Oh wait,
Forget all that I said about the step navigation. That only applies when you load the form, not when you submit it :/

Right now, I can't see any better solution than disabling the submit button upon clicking it :/
I'll post further if I get any better ideas..

/Fredrik

Thanks mate.

Ok, right say i want to disable the button onclick

<div class="form_item">
  <div class="form_element cf_button">
   <input value="Proceed to Step 2" name="button_20" input type=submit onclick="this.disabled=true;hidden1.name=this.name;hidden1.value=this.value;this.form.submit/>
  </div>
  <div class="cfclear"> </div>
</div>

As far as i know thats correct buts it not working any ideas?

And ive also had another problem with the onsubmit before box on multiform. When i use

<?php
$stu_firstname = JRequest::getWord('stu_firstname', '', 'post');
JRequest::setVar('stu_firstname', $stu_firstname, 'post');
?>

It just does not filter. Or seem to work at all. I cant figure it out, is it because its not in "post" and something to do with it being in an array when its multiform?

Thanks for any help

The onsubmit property does not work well with the validation-code in CF. I prefer something like this:

<input type="submit" name="button_20" id="button_20" value="Proceed to Step 2" />
<?
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('button_20').addEvent('click', function() {
    this.disabled=true;
  });
});";
$doc->addScriptDeclaration($script);
?>

Regarding the filtering, this must be run before the plugins are run. "On Submit - Before" usually does the trick, but unfortunately the multipage plugin is configured to run before this. Still, you could always try using the serverside validation box. It's not exactly what it's intended for, but it is evaluated prior any plugins.

/Fredrik

Hi fredrick your code works fine. Took abit of tweaking, as my php setup dosent allow short tags for scripting. So i was scratching my head for a while. then relised i just need to put <?php lol.

However lets say a user clicks presses the button and the live validation process. is ther away i can make the button reset. By using another button say of some sort. Like a reset but it jus reset the submit button so its ok to submit. Otherwise it effectly stops the user submitting if they didnt pass all the live validation b4 clicking submit. (EDIT:Sorry must be me i guess i could just add that code to another button and replace disabled = true with false?) I guess that would work?

On another note. You couldnt post me an example of server validation to filter using the server side validation, and maybe an if field is empty then add "error [this field] cannot be left blank" to an array and then at the end say if $errors > 1 then return $errors array.

Thanks again. Your being a great help🙂

Hmm..
I suppose we could try something like this:

<input type="submit" name="button_20" id="button_20" value="Proceed to Step 2" />
<?
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('button_20').addEvent('click', function() {
    this.disabled=true;
    setTimeout(1500, \"$('button_20').disabled=false\");
  });
});";
$doc->addScriptDeclaration($script);
?>

This should restore the submit-button 1.5s after a user clicks it.. Should be sufficient enough to stop the notorious double-clickers.

As for Serverside Validation, there's a very trivial example on the validation tab, though I guess we could extend it alittle bit..

<?php
$errors = array();

//Test if 'thefield' is empty, if it is, add an error message to your $errors array...
if (empty($_POST['thefield'])) {
  $errors[] = "error: thefield cannot be left blank";
}
...
//Test if there are any elements in our $errors array. If so, implode it to a string and send it back..
if (!empty($errors)) {
  return implode('<br />', $errors);
}
?>

/Fredrik

    setTimeout(1500, \"$('button_20').disabled=false\");

Dosent seem to be working. Ive tested it across multi browsers. Just to make sure it wasnt firefox.

<?php
$errors = array();

if (empty($_POST['stu_firstname'])) {
  $errors[] = "error: Students first name cannot be left blank";
}

if (empty($_POST['stu_surname'])) {
  $errors[] = "error: Students surname cannot be left blank";
}

if (!empty($errors)) {
  return implode('<br />', $errors);
}
?>

Right ive added what potentially my code could display, how can i modify that to do the equivlent of JREQUEST getWord and then SET Var. Or maybe just ensure the field contains regular expressions a-z 0-9 or throw up a error.

Thanks Brad

Oops, switched the order of the arguments.. 😶
Should be:

setTimeout(\"$('button_20').disabled=false;\", 1500);

To extend the serverside validation with the filtering, I suppose something along these lines should work:

<?php
$errors = array();

if (empty($_POST['stu_firstname'])) {
  $errors[] = "error: Students first name cannot be left blank";
} else {
  JRequest::setVar('stu_firstname', JRequest::getWord('stu_firstname', ''));
}
...

If you'd rather use regular expressions, I'd suggest you have a readup on PHP's PCRE functions (such as preg_match). A short example though..

<?php
$errors = array();

$pattern = "/^[a-zA-Z0-9]+$/";
if (empty($_POST['stu_firstname'])) {
  $errors[] = "error: Students first name cannot be left blank";
} elseif (preg_match($pattern, JRequest::getString('stu_firstname', ''))) {
  $errors[] = "error: Students first name may only contain letters A-Z and digits 0-9";
}else {
  JRequest::setVar('stu_firstname', JRequest::getWord('stu_firstname', ''));
}
...

And so on...

/Fredrik

That code works fantastic!!

Thanks for all your help tonight you've saved me a bunch of time and helped me out alot in terms of syntax. Which is something im struggling with. Its like i get the write bits of code i just cant get the syntax correct on them.

Could i just pick your brains 1 last time tonight, having spoke to bob, he told me joomla has a browser sniffer that i could use to detect java. Is ther any easy way i can put some script in step1 form. that will throw up a message if it dosent detect java. With the idea being that i want users to have live validation while filling out the form.

Brad

Lets see...

I'd add something like this in the Form HTML code:

<?php

jimport('joomla.environment.browser');
$browser = &JBrowser::getInstance();

if (!$browser->hasFeature('javascript')):

?>
<h1>Sorry!</h1>

<p>We cannot detect that your browser is javascript-capable. Unfortunately, this service requires Javascript to be available in your browser.</p>

<?php else: ?>
form content here...
<?
endif;
?>

Ohh, btw, this:

if (test):
  code;
endif;

is merely an alternate syntax of this:

if (test) {
  code;
}

/Fredrik

Thanks fredrick ill try that code. Have you any idea why this code is not working on step 2. :s (excatly the same on step 1) except the button name is diffrent but ive adjusted that.

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Proceed to Step 3" name="button_36" type="submit" />
<?php
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('button_36').addEvent('click', function() {
    this.disabled=true;
setTimeout(\"$('button_36').disabled=false;\", 3000);
  });
});";


$doc->addScriptDeclaration($script);
?>

Thanks. Brad

EDIT :: SORRY FREDRICK. my bad ive forgot to add the id="button_xx" to each submit button on the diffrent forms.

Dont suppose you know how accurate the joomla sniffer is. Obviously i will do alot of testing. But if it has known problems then ill leave it out for the sake of going to sleep tonight at a decent time lol.

Fredrick

The code for checking the browser feature, dosent seem to be executing properly. It always jumps to the elseif(part of the script).. even when i have noscript on in firefox which blocks java.

Is that code right ive tried playing about but i cannot win with it.

Brad

Well,
I dug around in the code for the JBrowser class, and it seems the tests are only based on the provided Useragent string. Changing the script-settings won't affect this, and thus JBrowser could be more thought of what capabilities a browser has, rather than have active.

One way around, I suppose, would be to place the whole form code within a div-tag with the visibility-property set to "hidden". Then use a Javascript snippet to alter that to "visible":

<?
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('showform').setProperty('visibility', 'visible');
  $('noform').setProperty('visibility', 'hidden');
});";
$doc->addScriptDeclaration($script);
?>

<div id="showform" style="visibility: hidden;">
...form content here...
</div>
<div id="noform">
I'm sorry, but the page you are trying to access requires your browser to support Javascript
</div>

/Fredrik

I fredrick ive placed this javescript inside java box on the form code. But dosent seem to be effective any ideas?

function hide(noform) {
document.getElementById(noform).style.display='none';
}
function show(showform) {
document.getElementById(showform).style.display='';
}

Brad

I believe you are confusing function argument lists with objects within the DOM.

The code you posted will work, as long as you call it like this:

hide('noform');
show('showform');

But that's because we pass the strings 'noform' and 'showform' as an argument to either function, which is then substituted in the command within the created function. You could write those functions like this instead with the identical behaviour:

function hide(item) {
  document.getElementById(item).style.display='none';
}
function show(item) {
  document.getElementById(item).style.display='';
}

I belive you were rather thinking of something along these lines?

function myfunc() {
  document.getElementById('noform').style.display='none';
  document.getElementbyId('showform').style.display='';
}

That said, hide and show are rather common names of functions, so there is also the risk of name conflicts.

/Fredrik

Thanks once more that works like a charm.

You know the disable submit once press code. is ther away i can embed into that say to change button text to "validating".

That is my last question . Honestly🙂... Thanks for all your time tonight. They should make you support if your arnt already cause i dont fink i would have managed it without you.

Brad

Sure,

<?php
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('submit').addEvent('click', function() {
    this.disabled=true;
    this.value="Validating..";
    setTimeout(\"$('button').disabled=false; $('button').value="Submit";\", 3000);
  });
});";

$doc->addScriptDeclaration($script);
?>

/Fredrik

Hmm its just throwing up server error 500. When i put that extra code in so i simplified it down to

<?php
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('button_20').addEvent('click', function() {
    this.disabled=true;
    this.value="validating...";
setTimeout(\"$('button_20').disabled=false;\", 6000);
  });
});";
$doc->addScriptDeclaration($script);
?>

I just took the extra timeout to return the label value to "submit". But even the code above is not processing correctly. with the extra line this.value="validating...";

Any ideas?
Brad

Oops..
Forgot to escape " in two places...
Change this line:

    setTimeout(\"$('button').disabled=false; $('button').value="Submit";\", 3000);

into this:

    setTimeout(\"$('button').disabled=false; $('button').value='Submit';\", 3000);

/Fredrik

ironically id just been tampering with that. This is my updated code but its still playing up.

<div class="form_item">
  <div class="form_element cf_button">
   <input type="submit" name="button_20" id="button_20" value="Proceed to Step 2" />

<?php
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('button_20').addEvent('click', function() {
    this.disabled=true;
    this.value="validating...";
    setTimeout(\"$('button_20').disabled=false; $('button_20').value='Proceed to Step 2';\", 6000);
  });
});";
$doc->addScriptDeclaration($script);
?>

What you think?

Same thing with this line:
this.value="validating...";

Change the " into ' or escape them as \"

Basically, we're creating a String in PHP, which we store in $script. This variable is then passed to the $doc->addScriptDeclaration() method to have it inserted into the generated HTML document.
Since we use "" as delimiter of strings in PHP, we'll have to escape any " inside the string (or in our case, use ' instead).

/Fredrik

My bad! Should have noticed that. Thanks Fredrick. Wel im pritty much done now. Thanks for everything you've done for me tonight.

Brad

Didnt fink id end up posting again. Right this is a snapshot of some of my server side validation code. Now when fields are empty it throws up the errors. However it wont filter the infomation when i check submissions in the database ive got ";',.," characters. When getWord and SetVar should have filtered. I swapped around get - and set as they were the other way around before but its made no difference?

<?php
$errors = array();

if (empty($_POST['stu_firstname'])) {
  $errors[] = "error: Students first name cannot be left blank";
} else {
  JRequest::getWord('stu_firstname', JRequest::setVar('stu_firstname', ''));
}
if (empty($_POST['stu_surname'])) {
  $errors[] = "error: Students surname cannot be left blank";
} else {
  JRequest::getWord('stu_surname', JRequest::setVar('stu_surname', ''));
}
if (!empty($errors)) {
  return implode('<br />', $errors);
}
?>

Hi Brad,

This code isn't quite the same as Fredrik posted earlier in the thread - somehow the set & get have switched places.

if (empty($_POST['stu_firstname'])) {
  $errors[] = "error: Students first name cannot be left blank";
} else {
  JRequest::getWord('stu_firstname', JRequest::setVar('stu_firstname', ''));
}

Try this instead:

$stu_firstname = JRequest::getWord('stu_firstname', '', 'post');
if ( $stu_firstname ) {
  JRequest::setVar('stu_firstname', $stu_firstname);
} else {
  $errors[] = "error: Student's first name cannot be left blank";
}

Bob

Thanks bob that works.

<?php
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('button_3').addEvent('click', function() {
    this.disabled=true;
    this.value='Validating Answers';
    setTimeout(\"$('button_3').disabled=false; $('button_3').value='Proceed to Step 2';\", 6000);
  });
});";
$doc->addScriptDeclaration($script);
?>

Ive been using this code. Along with a standard submit button. All the ids match up and it works fine in firefox but dosent work in Internet Explorer 7. The box changes text to validating but, goes no further and then resets back to proceeed.

Brad

Hi Brad,

Here's an answer to test. IE seems to cause major problems if you try to mess with submit buttons so I resorted to switching buttons after the time out. You'll see below that there are two buttons, the first of type='button' so that it doesn't submit; the second is type='submit'.

<?php
if ( !$mainframe->isSite() ) {return;}
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('button_3').addEvent('click', function() {
    this.setProperties ({
      value: 'Validating Answers',
      disabled: true
    });
    setTimeout('onTimeout()', 6000);
  });

});
  function onTimeout() {
    $('submit_1').setStyle('display', 'none');
    $('submit_2').setStyle('display', 'block');
  };
";
$doc->addScriptDeclaration($script);
?>
<!-- form html here -->
<div class="form_item" id='submit_1'>
  <div class="form_element cf_button">
    <input value="Submit" id="button_3"  name="button_3" type="button" />
  </div>
  <div class="cfclear"> </div>
</div>
<div class="form_item" id='submit_2' style='display:none;' >
  <div class="form_element cf_button">
    <input value="Proceed to Step 2" id="button_3a"  name="button_3" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Bob

PS This will fail if JavaScript isn't enabled. If this is a concern then you could reverse the display settings and set them with the script onLoad. This would leave the submit button displayed if there is no JavaScript.