SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to deal with square brackets in form field ID and name in javascript

    I am just trying to copy input of one form field to another when the user checks a box. Similar to billing and shipping address forms.

    The problems is that the fields' name and id have square brackets. I've tried forward slashes, quotes, dots, etc. and nothing seems to work. I'm a beginner so just poking around in the dark but has to be a way to do this?

    I've tried just removing the brackets to see if the script itself works and it does so has to be those darn brackets!

    I am unable to change the id and name on the actual form unfortunately...

    Thanks in advance for any help!

    Code:
    < script language = "javascript" type = "text/javascript" >
    
    function FillForms(f) {
    
    if (f.fillform.checked == true) {
    
        f.title[ko_KO].value = f.title[en_US].value;
    
        f.description[ko_KO].value = f.description[en_US].value;
    }
    
    if (f.fillform.checked == false) {
    
        f.title[ko_KO].value = '';
    
        f.description[ko_KO].value = '';
    }
    
    }
    </script>
    
    <input type="checkbox" onclick="FillForms(this.form)" name="fillform">
    <div>
    <label for="title">Title *</label>
    </div>
    <input id="title[en_US]" type="text" name="title[en_US]" value="">
    <div>
    <label for="description">Description *</label>
    </div>
    <textarea id="description[en_US]" name="description[en_US]" rows="10" class="uniform"></textarea>
    <div>
    <label for="title">Title *</label>
    </div>
    <input id="title[ko_KO]" type="text" name="title[ko_KO]" value="">
    <div>
    <label for="description">Description *</label>
    </div>
    <textarea id="description[ko_KO]" name="description[ko_KO]" rows="10" class="uniform"></textarea>

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi fsr678,

    In this situation, you can refer to the form elements like this: f.element['title[en_US]'], so your code would become:
    Code JavaScript:
    function FillForms(f) {
        if (f.fillform.checked == true) {
            f.elements['title[ko_KO]'].value = f.elements['title[en_US]'].value;
            f.elements['description[ko_KO]'].value = f.elements['description[en_US]'].value;
        }
     
        if (f.fillform.checked == false) {
            f.elements['title[ko_KO]'].value = '';
            f.elements['description[ko_KO]'].value = '';
        }
    };

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thank you for the reply! I've tried but I must be doing something wrong because it's still not working.

    http://jsfiddle.net/fsr678/TnWVr/1/

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Your jsfiddle is missing <form> tags around your form elements, which is breaking the script. You can try out a working example here: http://jsfiddle.net/LAn2g/

  5. #5
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANK YOU!!!!!

    I have been searching for an answer to this for 2 days and so frustrated at myself for my lack of knowledge! Really appreciate the lesson!

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    No worries, I'm glad I could help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •