OnClick Simple Form Help Please

Discussion in 'JavaScript' started by wd_2k6, Mar 9, 2008.

  1. #1
    OK I have a text area which will contain an embed video code for the user to add the video to their own site :
    This is the basic Youtube Code which will be default in the textarea:
    <embed src=[B]"YOUTUBEURL"[/B] type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
    Code (markup):
    OK the YOUTUBEURL will be defined with something like this
    <?php echo $ytube; ?>
    Code (markup):
    The user can choose the colour of the video player so i need the code to dynamically update when an option is clicked. What i need is when a user clicks a colour the following code will be added directly after the YOUTUBEURL in the textbox.
    rel=0&color1=0x3a3a3a&color2=0x999999"
    Code (markup):
    There will be various colour codes. The above is an example of one of the colours.

    Lastly i need an option which if the user clicks it will append: &autoplay=1 to the end of the YOUTUBEURL. This can be added in conjunction with a colour.

    I know that onclick="this.form.text1.value=this.form.text1.value+'\n'+this.form.xyzvalue" will add the xyz value to the end of the textarea but i need the text to be added after the URL, i think that my code needs to be split up into 2 vars or something and then attach them at the end but i have no clue on how to do this.

    Many Thanks for any help, it is really appreciated.
     
    wd_2k6, Mar 9, 2008 IP
  2. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #2
    
    
    <html>
        <head>
    
          <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo/yahoo-min.js" ></script> 
           
          <!-- Event source file --> 
          <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/event/event-min.js" ></script> 
    
            <script type="text/javascript">
                
                function modifyUrl() {
    
                  var vid = document.getElementById("vid");
    
                  vid.src = vid.src + '?' + stuffToAppend();
    
                  alert(vid.src);
                }
    
                function stuffToAppend() {
                  return 'foo=bloo&bar=flar';
                }
                
    
                YAHOO.util.Event.onDOMReady(
                  function () {
                    var modifier = document.getElementById("urlModifier");
                    YAHOO.util.Event.addListener(modifier, "click", modifyUrl); 
                  }
                );
    
            </script>
        </head>
        <body>
    
            <embed id="vid" src="YOUTUBEURL" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
    
            <button id="urlModifier">Change Color</button>
    
        </body>
    </html>
    
    Code (markup):
     
    LogicFlux, Mar 9, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the help but i need it so that my textarea changes when the button is clicked. For example

    <form id="test1" name="test1">
        <textarea name="test1data">
    <embed id="vid" src="http://www.youtube.com/v/lz0VGkD3LHo" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
    </textarea>
    Code (markup):
    When the Change Colour button is clicked i need the colour to be added to the end of the url inside the text area, so the text area will become:

    <form id="test1" name="test1">
        <textarea name="test1data">
    <embed id="vid" src="[B]http://www.youtube.com/v/lz0VGkD3LHocolor1=0x3a3a3a&color2=0x999999[/B]" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
    </textarea>
    Code (markup):
    And also if the auto play button is clicked it will add &autoplay=1 to the end of the url?
     
    wd_2k6, Mar 9, 2008 IP
  4. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Oh, I misunderstood. You need regular expressions for that. I'll try to post something later if someone else doesn't first.
     
    LogicFlux, Mar 9, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    OK i appreciate you taking your time out I am also Googling on the subject trying to solve the problem.
     
    wd_2k6, Mar 9, 2008 IP
  6. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #6
    
    <html>
        <head>
    
          <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo/yahoo-min.js" ></script> 
           
          <!-- Event source file --> 
          <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/event/event-min.js" ></script> 
    
            <script type="text/javascript">
    
    
                function stuffToAppend() {
                  return 'foo=bloo&bar=flar';
                }
                
    
                YAHOO.util.Event.onDOMReady(
                  function () {
    
                    var urlChanged = false;
                    
                    var modifier = document.getElementById("urlModifier");
                    var test1data = document.getElementById("test1data");
                    
                    YAHOO.util.Event.addListener(modifier, "click", 
                      function () {
    
                        if (urlChanged)
                          return;
                        
                        var match = test1data.value.match(/\s+src=(\'|\")(.+?)(\1)\s+/);
    
                        var newUrl = match[2] + '?' + stuffToAppend();
    
                        test1data.value = test1data.value.replace(match[2], newUrl);
    
                        urlChanged = true;
                      }
                    ); 
                  }
                );
    
            </script>
        </head>
        <body>
    
            <button id="urlModifier">Change It</button>
    
            <form id="test1" name="test1">
              <textarea name="test1data" id="test1data" cols="70" rows="10">
                <embed id="vid" src="http://www.youtube.com/v/lz0VGkD3LHo" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
    
              </textarea>
            </form>
    
        </body>
    </html>
    
    Code (markup):
     
    LogicFlux, Mar 9, 2008 IP