Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Is there a better way of doing the same thing on multiple fields?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #45852
    Presto
    Participant

    Hey guys,

    Is there a better way to be doing this? Below is a snippet of code that I have fumbled to write so far, it works, but I would guess there has to be a better way to do it. I have a total of 12 image upload fields.

    jQuery(document).ready(function (){
    jQuery(“#photo0”).on(“change”, function(){
    jQuery(“#photoName0″).val(jQuery(this).val().replace(/C:\fakepath\/i, ”));
    });
    jQuery(“#photo0”).hover(function() {
    jQuery(“#photoBrowse0”).toggleClass(“btn-inverse”);
    });
    jQuery(“#thumbnail”).click(function() {
    jQuery(“#photoBrowse0”).toggleClass(“btn-inverse”);
    jQuery.get(“index.php?option=com_cswdownloads&task=removeimg&dir=32de910e0791bdd0&img=chris_80x80.jpg”,function(data,status){
    if(status == “success”){
    jQuery(“#photoName0”).val(null);
    jQuery(“#photo0”).val(null);
    }
    });
    });
    jQuery(“#photo1”).on(“change”, function(){
    jQuery(“#photoName1″).val(jQuery(this).val().replace(/C:\fakepath\/i, ”));
    });
    jQuery(“#photo1”).hover(function() {
    jQuery(“#photoBrowse1”).toggleClass(“btn-inverse”);
    });
    jQuery(“#deletePhoto1”).click(function() {
    jQuery(“#photoBrowse1”).toggleClass(“btn-inverse”);
    jQuery.get(“index.php?option=com_cswdownloads&task=removeimg&dir=32de910e0791bdd0&img=chris_85x85.jpg”,function(data,status){
    if(status == “success”){
    jQuery(“#photoName1”).val(null);
    jQuery(“#photo1”).val(null);
    }
    });
    });
    jQuery(“#photo2”).on(“change”, function(){
    jQuery(“#photoName2″).val(jQuery(this).val().replace(/C:\fakepath\/i, ”));
    });
    jQuery(“#photo2”).hover(function() {
    jQuery(“#photoBrowse2”).toggleClass(“btn-inverse”);
    });
    jQuery(“#deletePhoto2”).click(function() {
    jQuery(“#photoBrowse2”).toggleClass(“btn-inverse”);
    jQuery.get(“index.php?option=com_cswdownloads&task=removeimg&dir=32de910e0791bdd0&img=chris_100x100.jpg”,function(data,status){
    if(status == “success”){
    jQuery(“#photoName2”).val(null);
    jQuery(“#photo2”).val(null);
    }
    });
    });
    });

    #140473
    Kitty Giraudel
    Participant

    If it’s strictly the same code, try a loop.

    #140671

    1.) if you are using jQuery for no conflict mode try

    jQuery(document).ready(function($) {
    // You can use $ now.
    // Even for wordpress, or working with other libs.
    });

    2.) Check out this (http://codepen.io/doublea79/pen/yjkiB”Code Pen Link”) I have put together a couple of examples.

    3.) I did not tackle the .get url I think using the data-attr like Dillon recommended is probably your best bet. If that’s not an option I would create an object that holds the ID and the url to .get, but adding the data attribute would be way easier.

    4.) I have not check any of the code so it might be riddle with errors, but should get you started in the right direction.

    5.) if you are up for the challenge you might want to try writing this in using object literal routing for your .get urls.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.