Forums

I was testing out my CC connection to a couple test forms and I noticed that when I went to edit them in CC from the front end, the javascript code that I used on the form doesn't work properly. However, when just submitting the form from the form link, the JS works perfectly every time.

I'm not sure what the reason could be for this but here's the part in the page source which includes the JS code in bold that's not working. This is the page source from the form edit.

<script src="http://www.cfbpredictions.com/components/com_chronocontact/js/jsvalidation2.js" type="text/javascript"></script>

<script type='text/javascript'>
var fieldsarray = new Array();
var fieldsarray_count = 0;window.addEvent('domready', function() {
elementExtend();setValidation("ChronoContact_top_25_weekly_pool_entry01001434", 0, 1, 0);});</script>
<script type="text/javascript">
elementExtend();
window.addEvent('domready', function() {
});
</script> <script type='text/javascript'>
//<![CDATA[
[b]/*<![CDATA[*/

function CngNu(ip){
var frm=ip.form;
if (!frm.nuary){
var eles=frm.elements;
frm.nuary=[];
for (var zxccnt=1,zxc0=0;zxc0<eles.length;zxc0++){
if (eles[zxc0].className&&eles[zxc0].className==ip.className){
frm.nuary.push([eles[zxc0],zxccnt++]);
}
}
}
for (var cng,zxc1=0;zxc1<frm.nuary.length;zxc1++){
frm.nuary[zxc1][0].value=frm.nuary[zxc1][0].value.replace(/\D/,'');
if (frm.nuary[zxc1][0].value==''||frm.nuary[zxc1][0].value<1||frm.nuary[zxc1][0].value>frm.nuary.length){
frm.nuary[zxc1][0].value=frm.nuary[zxc1][1]
}
if (frm.nuary[zxc1][0]==ip){
cng=zxc1;
}
}
for (var zxc2=0;zxc2<frm.nuary.length;zxc2++){
if (frm.nuary[zxc2][0]!=ip&&frm.nuary[zxc2][0].value==ip.value){
frm.nuary[zxc2][0].value=frm.nuary[cng][1];
frm.nuary[cng][1]=ip.value;
frm.nuary[zxc2][1]=frm.nuary[zxc2][0].value;
}
}
}

/*]]>*/
[/b]

<!-- Begin
function checkForm(form) {
var el = form.elements;
for(var i = 0 ; i < el.length ; ++i) {
if(el[i].type == "radio") {
var radiogroup = el[el[i].name]; // get the whole set of radio buttons.
var itemchecked = false;
for(var j = 0 ; j < radiogroup.length ; ++j) {
if(radiogroup[j].checked) {
itemchecked = true;
break;
}
}
if(!itemchecked) {
alert("Please choose an answer for "+el[i].name+".");
if(el[i].focus)
el[i].focus();
return false;
}
}
}
return true;
}
// End -->//]]>
</script>

Hi Bullfn33,

I'm not sure either but I suspect that the double CDATA tags may be the problem here as they exactly match the bold block.

Bob

The bold block is exactly what I have in my JS form text box so the extra CDATA tag(the first one) must be in a file somewhere. Where can I find this file to remove it? I already tried and removed the second CDATA tag, which was part of my code, and it did not correct the problem so I think it must be the first one.

thanks

Doing some more testing I noticed that the script works fine when creating a new record in CC or accessing the form from the CF link. The problem seems to come only when you choose edit record. The page source for entering a new record also has both CDATA tags so it must not be that.

Is there anything in the edit record file that could cause this JS interference?

anybody else?

It's definitely something in the edit record causing the inference. It's a number switching script which allows users to switch numbers between text boxes, and the numbers switch automatically on blur. In the edit record it works more times than not but it still gets it wrong sometimes and then the numbers get out of wack. I need it to work 100% of the time just like it does when filling out a new form. I really need to get this to work so my users don't have to submit a whole new record if all they want to do is edit one selection.

John

Hi,

Have there been any solutions to this problem?

I'm having the exact same issue: javascript code working fine in the chronoform is no longer working when using {edit_record} in CC.

Thanks in advance!

Daan

Hi Daan,

I tend not to use the {edit_record} link - I link directlyt to the form which seesm to work better.

Please post a link to the ChronoConnectivity listing so we can take a quick look.

Bob

Hi Bob,

Thanks for replying! I feared you would say that, however I have no clue how I could make a button appear for every row of the CC table and link to a form. That's why I'm so stubbornly holding on to the Edit_Record option. I'm sorry for the inconvenience 😟

The goal of the form is to have users upload their receipts and enter some extra information. They have the option to change some of the fields. When they enter an amount value, we calculate the value in Euro using Javascript to read the fieldvalues Amount and Currency. This worked in the simple CF form, but is no longer called when using the Edit_record CF form.

This is the code in the CC form's body:

<?php
switch ($MyRow->Status) {
  case 'Approved' :
    $color = 'green';
    break;  
  case 'Not Approved' :
    $color = 'red';
    break; 
  case 'Changed' :
    $color = 'orange';
    break;
  default:
    $color = 'white';
    break;
}

$user=& JFactory::getUser();

$currentuser=$MyRow->cf_user_id;
$count;
if ($user->id == $currentuser)
{
$count=$count+1;
?>
<p class="blocknummer"><span class="bignumber"><?php echo 0, $count ?></span></p>
<table CELLSPACING="1" align="CENTER" BORDER="2" BORDERCOLOR=#ffcc00 RULES=NONE FRAME=BOX CELLPADDING="5">
<TH>Edit</TH>
<TH>Amount</TH>
<TH>Category</TH>
<TH>Date</TH>
<TH>Status</TH>
<TH>Comments</TH>
<TH>Currency</TH>
<TH>AmountEuro</TH>
<TH>Picture</TH>
<tbody>
<tr>
<td style="width": 10%;">{edit_record}</td>
<b><td>{Amount}</td></b>
<td><div>{Category}</div></td>
<td><div>{Date}</div></td>
<b><td><div style='color: <?php echo "$color"; ?>'>{Status}</div></td></b>
<td><div>{Comments}</div></td>
<td><div>{Currency}</div></td>
<td><div>{AmountEur}</div></td>
<td><img src="./images/Receipts/{Photo}" width="180" height="180" align="RIGHT" style="border: 0;" /> </td>
</tr>
</tbody>
</table>
<br>
<?php

}
else if($count==0)
{

echo "No Receipts found";
}
?>

The Edit_Record option refers to the ChangeData form which exists out of the following code:

<div class="form_item">
  <div class="form_element cf_multiholder" style="margin-left:0px!important;">
                <label class="cf_label" style="display: none;">Click Me to Edit</label>
    <table cellspacing="0" cellpadding="0" width="55%" title="" class="multi_container">
        <tbody width="100%">
            <tr width="100%">
                <td style="width: auto; vertical-align: middle; text-align: left;">
<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Required information</h1>
  </div>
  <div class="cfclear"> </div>
</div>
</td>
<td style="width: auto; vertical-align: middle; text-align: left;">
<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Upload picture file</h1>
  </div>
  <div class="cfclear"> </div>
</div>
</td>

            </tr>
        </tbody>
    </table>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_multiholder" style="margin-left:0px!important;">
                <label class="cf_label" style="display: none;">Click Me to Edit</label>
    <table cellspacing="0" cellpadding="0" width="67%" title="" class="multi_container">
        <tbody width="100%">
            <tr width="100%">
                <td style="width: auto; vertical-align: middle; text-align: left;">

<div class="form_item">
  <div class="form_element cf_datetimepicker">
    <label class="cf_label" style="width: 100px;">Date</label>
    <input class="cf_datetime required" title="" size="12" id="Date" name="Date" type="text" />
    
  </div>
  <div class="cfclear"> </div>
</div>
</td>
<td style="width: auto; vertical-align: middle; text-align: left;">
<div class="form_item">
  <div class="form_element cf_fileupload">
    <label class="cf_label" style="width: 100px;">Upload</label>
   
 <input class="cf_fileinput cf_inputbox" title="" size="20" id="file_7" name="Photo" type="file" />   
  </div>
  <div class="cfclear"> </div>
</div>
</td>

            </tr>
        </tbody>
    </table>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_multiholder" style="margin-left:0px!important;">
                <label class="cf_label" style="display: none;">Click Me to Edit</label>
    <table cellspacing="0" cellpadding="0" width="40%" title="" class="multi_container">
        <tbody width="100%">
            <tr width="100%">
                <td style="width: auto; vertical-align: middle; text-align: left;">
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 100px;">Category</label>
    <select class="cf_inputbox validate-selection" id="select_6" size="1" title=""  name="Category">
    <option value="">Choose Option</option>
      <option value="Train">Train</option>
<option value="Taxi">Taxi</option>
<option value="Flight">Flight</option>
<option value="Parking">Parking</option>
<option value="Lunch">Lunch</option>
<option value="Drinks">Drinks</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>
</td>
<td style="width: auto; vertical-align: middle; text-align: left;">
<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_9" type="submit" onClick="CalculateCurr(this.form)" />
  </div>
  <div class="cfclear"> </div>
</div>
</td>

            </tr>
        </tbody>
    </table>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 100px;">Amount</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="12" title="" id="text_3" name="Amount" type="text" onChange="CalculateCurr(this.form)"/>
  
  </div>
  <div class="cfclear"> </div>
</div>
<div class="form_item">

  <div class="form_element cf_dropdown">

    <label class="cf_label" style="width: 150px;">Currency</label>

    <select class="cf_inputbox" id="select_0" size="1" title=""  name="Currency" onChange="CalculateCurr(this.form)">

    <option value="EUR">EUR</option>

      <option value="USD">USD</option>

<option value="GBP">GBP</option>

<option value="RUB">RUB</option>

<option value="JPY">JPY</option>

<option value="INR">INR</option>

<option value="CNY">CNY</option>

 

    </select>

   

  </div>

  <div class="cfclear"> </div>

</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Additional information</h1>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Specifieke comments</label>
    <textarea class="cf_inputbox" rows="3" id="text_10" title="" cols="30" name="Comments"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<?php $status = Changed ?>
<input value=<?php echo "$status" ?> id="hidden_8" name="Status" type="hidden" 

<input value="" id="hidden_1" name="Cf_id" type="hidden" />

<input value="" id="hidden_9" name="AmountEur" type="hidden" />

Which internally calls the fuction CalculateCurr() after clicking the submit button

<!--

function CalculateCurr(frm) {
var AmountEur = 5
        // Get the currency

        form_field = frm.elements[6]

        Curr = form_field.value

        // Get the amount

        form_field = frm.elements[5]

        Amount = parseInt(form_field.value)

if(Curr=="USD") {AmountEur=Amount/1.3239}

else if(Curr=="JPY") {AmountEur=Amount/111.261451}

else if(Curr=="RUB") {AmountEur=Amount/41.565414}

else if(Curr=="CNY") {AmountEur=Amount/8.8271181}

else if(Curr=="INR") {AmountEur=Amount*0.0164868948}

else if(Curr=="GBP") {AmountEur=Amount*0.848545058}

else {


AmountEur = Amount


}

I hope this covers what information you require?

Thanks again for the support!
Sincerely,
Daan

Hi Draw,

The code for making a direct link is in the View Details doc here. The link to 'edit details' is exactly the same except that you link to a copy of the form with the appropriate record preloaded.

Bob

Hi Greyhead,

Thanks for the response!

I've now attempted to link to the form as you suggested,however none of the values are being preloaded.
I'm linking correctly using http://localhost/joomla/index.php?option=com_chronocontact&chronoformname=ChangeData&cf_id=43.
And I've turned the profile plugin on.

However the code isn't converting the values.

    <input class="cf_datetime required"title="" size="12" id="Date" name="Date" type="text" value={Date} /> 

Results in simply showing {Date} in the field.

I've been reading on the forum the last two hours but can't seem to find a similar issue...

I came across this one post that could be of assistance where you suggest using some code to retreive the record: http://www.chronoengine.com/forums.html?cont=posts&f=12&t=15835#p40438. Is this what I'm missing? I've tried to add it in, but to no avail.

I'm sorry, I'm afraid I got totally lost😟

Hi Draw.

What settings do you have on the Profile Plug-in Configuration tab? Can you post a screenshot here?

Bob

Hi GreyHead,

Thanks, that made the values enter correctly
However, I'm encountering a new issue.
All of this was in an attempt to recalculate the value in Euro if someone switches the currency when updating a record. This was coded in javascript, however it is still not working, even though I'm not using the {edit_record} function.

Basically, after editing, users press the submitbutton, which has an onClick function call.

<input value="Submit" name="button_9" type="submit" onClick="CalculateCurr(this.form)"/>

The javascript code in the form (posted in the above post) fills the AmountEur field at the end

frm.AmountEur.value = round_decimals(AmountEur, 2)

However none of this happens, he simply fills the AmountEur field with whathever I tell him to fill it in the form HTML code.

<input value=10 id="hidden_9" name='AmountEur' type="hidden" />

This is rather vital to our project, could you please shed some light on this issue? I was hoping it would be solved by redirecting instead of using the edit_record option😟

Thanks in advance!
Daan

Hi Draw,

Sorry, now I'm completely lost. I can't see how the JavaScript problem links to the Profile page.

If you want to track the currency change then you are better adding it to whatever input selects the currency. The OnSubmit event is also used by the LiveValidation and doesn't always have the result you might expect.

Bob

Hi Greyhead,

Thanks for the response.
I've already tried adding it to the respective fields as on onChange event, but to no avail again.
Basically this is the situation:
- There's a CF input form with working javascript
- The exact same CF (in terms of content) used to edit data using the profile page plugin no longer calls the javascript function.

The only difference I see between the two is the use of the profile page plugin. And perhaps that no new record is written, but I don't see how that would effect the javascript call.

Could it be that the issue is not CC's {Edit_record} but the use of the profile page plugin?

Hi Draw,

Please post a link to the form with the Profile Page plug-in so we can take a quick look. I can't see that the plug-in would make a difference to this.

Bob

Hi Greyhead,

I've sent you a personal message which includes link and login details.
Thanks for wanting to help!

Draw

Hi Draw,

There's a JavaScript error on the Profile Page linked form. FireBug shows

illegal XML character
[Break On This Error] <<!--

This links to the HTML comments in the script

<script type='text/javascript'>
//<![CDATA[
<<!--

function CalculateCurr(frm) {
var AmountEur = 5
// Get the currency
form_field = frm.elements[6]
Curr = form_field.value
// Get the amount 
. . .
//-->//]]>
</script> 

Bob

Hi Greyhead,

What a stupid mistake! It's working correctly now!

I'm now wondering whether it was the same error that caused it to malfunction when using CC's {Edit_record}. I don't think so, but it's worth checking. Once I find the time, I will test that and come back with final conclusions to resolve this thread.

Thanks for your patience and understanding, the support on these fora is absolutely stunning!

Sincerely,
Draw