Forums

Hi,

I want to make script for editing uploaded images.

1.) I'm loading image names by DB record loader.
2.) In form I have hidden box with old images.
3.) Old images are showed in form and onClick they chage their CSS - border color to RED.
4.) How can I "onSubmit" get list of images with red border - and remove them from string ?

Hi Yinternet,

Alter the script that turns the border red to also add (or remove) the image id from a hidden form input. Then when the form is submitted you can read the read the values from the input and clean up the files.

Bob

Hi Bob and thank you🙂

this is that script in mootools.

http://jsfiddle.net/ynternet/pfJYh/8/

In chronoforms and joomla...
I added hidden input element with "Field Name" :

web_printscreens[]

This value I read by DB record loader from database.


Then, I added new custom HTML/PHP element with code :

<?php
echo "<label>Edit photos</label>";
if ( isset($form->data['web_printscreens']) && $form->data['web_printscreens'] ) {
 $files_array = explode( ",",($form->data['web_printscreens']));

  foreach ( $files_array as $photo ) {
    echo "<div style='padding:5px; display:inline-block;'>";
    echo "<img src='".JURI::root()."img_uploads/".$photo."' style='border:2px solid red; max-width:100px; max-height:100px' /><br />";
    echo "<input type='checkbox' name='".$photo."' checked="yes" />";
    echo "</div>";
  }
}
?>

And in Actions I added to the "onLoad" new Load JS action with this code :

window.addEvent('domready', function() {
var checks = document.getElements('input[type="checkbox"]');
var hidden = document.getElements('input[type="hidden"][name="web_printscreens[]"]')[0];
checks.addEvent('change',function(e){
    var checkbox = e.target;
    var img = checkbox.getPrevious('img');
    
    var checked = checkbox.get('checked');
    if(checked){
      img.setStyle('border','2px solid gray');
     //alert(img_name);
     // hidden.set('value',img_name);
    }
    else{
      img.setStyle('border',null);
     //alert(img_name);
     // hidden.set('value',img_name);
    }
    setInputHidden();
});
});

function setInputHidden(){
    var inputs_checked = document.getElements('input[type="checkbox"]:checked');  

    var arr_names = inputs_checked.get('name');
    hidden.set('value',arr_names.join(','));
    alert(hidden.value);
}

But it does not remove images.

I made some changes and updated my previous post.

Hi Bob and Max,

please can you please advise ?

What about my elements/actions configuration ? And what about mootools script ? Filed name (in hidden input) is right ?

Hi yinternet,

I rebuilt your code in another JSFiddle example.

Note (a) for the example the output is in a text input not a hidden input so that you can see it; and (b) it's a JSON encoded array so you'll need to use the PHP json_decode() to convert it back after the form is submitted.

Bob

Thank you Bob,

you know...

My first code works fine
http://jsfiddle.net/ynternet/pfJYh/8/

I have second version made in jQuery
http://jsfiddle.net/ynternet/kmMmy/6/

And your script is also good,
http://jsfiddle.net/GreyHead/pfJYh/21/

But these scripts are not working for me in chronoforms.😟

Hi ynternet,

My script works OK in ChronoForms because I built it there and then copied and pasted into JS Fiddle. The only change was to make the hidden result input into a text input for display.

Most likely you have a JavaScript error on the page.

Bob

Thanks Bob.

You are right... I had hidden checkbox in Joomla menu, and script gets value from this checkbox, and then animate border around this value as img. And tween makes error, becouse can not find img with that name...

This is solution.

checks = $$('.big_container input[type="checkbox"]');

Thanks again.
I think, this "removing selected images from DB" should be in FAQ.🙂