newbie question: onchange select box inserts image to textarea

Discussion in 'Javascript' started by lawrence, Jun 1, 2004.

  1. lawrence

    lawrence Guest

    I've been trying to adapt this script to fit my needs, but I can't get
    it to work. I'm trying to put my values in the status bar so I can see
    if my variables have the right values, but I get an "Error on page"
    error, so I can't read anything in the status bar.

    What am I missing?




    function placeImageAtCursor(myField) {
    var imageName = '';
    var path = '';
    var myValue = '';

    imageName = document.forms.pdsForm.imagesToInsert.value;

    path = 'http://www.publicdomainsoftware.org/mcImages/';
    myValue = path+imageName;
    window.status= myValue;



    if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    } else if (myField.selectionStart || myField.selectionStart == '0')
    {


    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos) + myValue +
    myField.value.substring(endPos, myField.value.length);
    } else {
    myField.value += myValue;
    }
    }




    This is the form element that should be calling:


    <br>Insert an image: <select id="imagesToInsert"
    onchange="placeImageAtCursor(document.formName.fieldName);">
    <option value=""></option>
    <option value="">No choice made</option>
    <option value="emma.jpg">Emma sticks out her tongue</option>
    <option value="Ellen_and_Rob_cleaning_Bunkhouse_9-97.JPG">Rob Kurtz,
    Ellen, clean the bunk house in 1997</option>
    <option value="052898-31_Eryn_smoking_cigarette.jpg">Woman in
    red</option>
    <option value="publicPen_log.gif">Public Pen Logo</option>
    <option value="biglettuce.JPG">big lettuce</option>
    <option value="vegetables2.JPG">mod vegetables</option>
    <option value="vegetables2.JPG">mod vegetables</option>
    <option value="lettuce.JPG">lettuce</option>
    <option value="lettuce.JPG">lettuce</option>
    <option value="lettuceStripsCropped.JPG">lettuceStrips</option>
    <option value="lkImage03.jpg">Lawrence and his dad</option>
    </select>
    lawrence, Jun 1, 2004
    #1
    1. Advertising

  2. lawrence

    Lee Guest

    lawrence said:
    >
    >I've been trying to adapt this script to fit my needs, but I can't get
    >it to work. I'm trying to put my values in the status bar so I can see
    >if my variables have the right values, but I get an "Error on page"
    >error, so I can't read anything in the status bar.
    >
    >What am I missing?


    You seem to be missing the details of the error message.
    Most likely, it's complaining that you don't have forms
    by the names it's expecting. Your code expects the form
    that contains the select to be named "pdsForm" and for
    there to be another form named "formName" containing a
    field named "fieldName". If those don't exist, you're
    going to get errors.

    Also, the first two options are :

    <option value=""></option>
    <option value="">No choice made</option>

    That looks to me like two choices that both mean "no choice made".
    I would get rid of the first one.
    Lee, Jun 1, 2004
    #2
    1. Advertising

  3. lawrence

    lawrence Guest

    Lee <> wrote in message news:<>...
    > You seem to be missing the details of the error message.
    > Most likely, it's complaining that you don't have forms
    > by the names it's expecting. Your code expects the form
    > that contains the select to be named "pdsForm" and for
    > there to be another form named "formName" containing a
    > field named "fieldName". If those don't exist, you're
    > going to get errors.


    The error message, appearing in the status bar, is simply "Errors on
    page."

    I've cut the function down to this and still:



    function insertAtCursor(myField) {
    var imageName = '';
    var path = '';
    var myValue = '';
    var status = '';

    imageName = document.forms['pdsForm'].elements['imagesToInsert'].value;
    alert(imageName);
    window.status= imageName;
    }



    This is how the form starts:







    div class="onePanel">
    <form id='pdsForm' name='pdsForm' method='post'
    action='/robert/mcControlPanel.php' class='mcForm'>

    <input id="inputId1" type="hidden"
    name="formInputs[formSecurityRating]" value="associate"
    class="hiddenInput">




    <div class="formElement">
    Weblog to add entry to: <br>
    <select id="publicpenFormInput2"
    name="formInputs[cbBelongsToWhichPage]">
    <option value="x#x#x#blankx#x#x#">No choice made</option>
    <option value="3">Home</option>
    <option value="8">My photos</option>
    </select>



    </div>

    <p> <a href="createweblogEntriesLongForm.php">Use the long form?</a>
    </p>


    <div class="formElement">
    Type a headline:
    <div class="inputBoxTitle"><input id="inputId3" type="text"
    name="formInputs[cbHeadline]" value="" class="textInput">


    </div></div>




    <script language="javascript">




    function insertAtCursor(myField) {
    var imageName = '';
    var path = '';
    var myValue = '';
    var status = '';

    imageName = document.forms['pdsForm'].elements['imagesToInsert'].value;
    alert(imageName);

    }





    function wrapSelectionBold (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element) range.text = '<b>' +
    range.text + '<\/b>';
    }
    function wrapSelectionItalic (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element) range.text = '<i>' +
    range.text + '<\/i>';
    }
    function wrapSelectionBlockQuote (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element) range.text = '<blockquote>'
    + range.text + '<\/blockquote>';
    }
    function wrapSelectionBigHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element) range.text = '<h1>' +
    range.text + '<\/h1>';
    }
    function wrapSelectionSmallHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element) range.text = '<h4>' +
    range.text + '<\/h4>';
    }
    function wrapSelectionMakeALink (element) {
    var range = document.selection.createRange();
    address = prompt('What address?', '');
    address = '<a href=\"' + address + '\">';
    if (range.parentElement() == element) range.text = address +
    range.text + '<\/a>';
    }
    function wrapSelectionInsertImage (element) {
    var range = document.selection.createRange();
    address = prompt('Add address for image. If the image is on your
    site, look in Image Info.', '');
    address = '<img src=\"' + address + '\">';
    if (range.parentElement() == element) range.text = address +
    range.text;
    }
    </script>
    <input type="button" value="bold"
    onclick="wrapSelectionBold(this.form.inputId4)" />
    <input type="button" value="italic"
    onclick="wrapSelectionItalic(this.form.inputId4)" />
    <input type="button" value="blockquote"
    onclick="wrapSelectionBlockQuote(this.form.inputId4)" />
    <input type="button" value="big headline"
    onclick="wrapSelectionBigHeadline(this.form.inputId4)" />
    <input type="button" value="small headline"
    onclick="wrapSelectionSmallHeadline(this.form.inputId4)" />
    <input type="button" value="make a link"
    onclick="wrapSelectionMakeALink(this.form.inputId4)" />
    <br>Insert an image: <select id="imagesToInsert"
    onchange="insertAtCursor(document.formName.fieldName);">
    <option value=""></option>
    <option value="">No choice made</option>
    <option value="unroad_show_1.jpg">Unroad show</option>
    <option value="unroad_show_2.jpg">Unroad show 2</option>
    <option value="unroad_show_3.jpg">Unroad show 3</option>
    </select>




    <div class="formElement">
    Type your main content: <br/>
    <textarea id="inputId5" name="formInputs[cbMainContent]"
    class="textareaInput"></textarea>
    <p>HTML into symbols? <input type="checkbox" name="usingHtml"
    value="y" class="textareaCheckbox"></p>

    </div>
    lawrence, Jun 2, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Gnarlodious
    Replies:
    4
    Views:
    17,586
    elizas
    May 5, 2010
  2. palmiere
    Replies:
    1
    Views:
    396
    Erwin Moller
    Feb 9, 2004
  3. lawrence
    Replies:
    7
    Views:
    581
    lawrence
    Sep 29, 2004
  4. Replies:
    1
    Views:
    126
    Dr John Stockton
    Sep 27, 2006
  5. javelin
    Replies:
    1
    Views:
    105
Loading...

Share This Page