SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    onclick help needed

    I hope the title makes sense to the question.

    First, I am a complete novice when it comes to Javascript.

    Now, a CMS that I am working with has functionality that allows a user to click on an button to add html tags to a textarea, exactly like a WYSIWYG editor, but on a simplier note. Currently the CMS allows the user to input a filepath in a promt, then an alt/title text in another prompt and send the information back to the textarea (ex - <img src="filepath" alt="alt text">) - very similar to the insert image button in the forum postings.

    What I would like it to do is upon clicking the input button, open the full prompt in a empty div with a select box and an input box, then a submit box to send the information back to the main javascript function to make the html tags

    This image should outline how I envision this to function.


    My question is how to do it, or how would one undertake something like this? I can get the select box and alt/title input from a php function, no problem.

    It is the javascript that I have the issue with.
    1. Place the html in a empty div and allowing AJAX or AHAH to send the certain select boxes to the empty div onlcick of the tag button? No clue here with AJAX/AHAH
    2. Switch the information in the bottom div when different tag button is clicked. Same as above?
    3. Can the prompt have a select box (my searching tells me no, and I should try for a modal box, but I feel this may be too heavy for what I want)

  2. #2
    SitePoint Evangelist priti's Avatar
    Join Date
    Aug 2006
    Location
    India
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You can try as follow

    1.create a empty DIV with style display:hidden .

    2.On button click do following
    a.Change the style of div to block i.e now it will be visible on the form.
    b.Use DOM to dynamically create the Select-box and other form elements.

    Ex:document.getElementById('divid').innerHTML='<select><option value="me">me</option></select>';

    AJAX is needed when you want response from your database or your want server's side input.For show/hide of divs on click and creating element on fly you don't need ajax.Hope it gives you needed pointers.

    Thanks.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    priti,

    Thanks that should get me started. Now how would I pass the selected information and inputted information to the javascript functions (sorry if it is a basic question)

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Perhaps this article will be of help.
    Quirksmode - Edit Text
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul, Thanks, though I am lost as to where in the page will it help me pass the information to javascript?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The article has a saveEdit function from where you can perform ajax behaviour to send the update to a server-side script which would then update a database of some kind.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hmmm... let me post my code. If you see the previous code had a prompt, I just need to pass the selected item and information in the input box passed to the script



    *EDIT* - nevermind... Thanks Paul.. the link I needed was: http://www.quirksmode.org/js/forms.html
    Last edited by centered effect; Oct 4, 2008 at 01:02.

  8. #8
    SitePoint Evangelist priti's Avatar
    Join Date
    Aug 2006
    Location
    India
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    priti,

    Thanks that should get me started. Now how would I pass the selected information and inputted information to the javascript functions (sorry if it is a basic question)
    I am little confuse ?

    Why you need to pass information to javascript function ????

    In javascript you can read your form element i mean document.getElementById('elementid').value or frm.formelementname.value.

    If not wrong then you want to send the selected values to server to insert or edit might be!!!!

    i.e you need to DO AJAX POST.

    let me know what exactly you are worried with?

    Thanks


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
  •