What code could add/change to this submit button to change it's location on the page, and to make it into an image/button. I've tried several things without success. Thanks document.write("<form action='index.html?filename="+my_filename+"' method='POST'><input type='submit' name='record' value='record' id='record_button' /> Code (markup):
1) document.write is old-style, why isn't it in the markup or generated via the DOM? Kinda looks like something that should be built server-side, not client side. (in which case it's that 'javascript for nothing' I'm always going on about). 2) is that ALL that's in the form, or did you gut it down for presentation here? If so that may be something that should just be an anchor. 3) without seeing your entire code, it's hard to say how to move it, where to move it, or how to style it... though really to change it to a image all you should have to do (assuming it should be a form element, which I doubt with the getdata in the URL -- salty mix) is change this: <input type='submit' name='record' value='record' id='record_button' /> to this <input type='img' src='images/imagefile.png' alt="record' name='record' value='record' id='record_button' /> Though unless you have multiple submits, it's unlikely you should need name or value on it anymore. If it's the only input in the form it's doubtful it should even have an id on it either (since one usually doesn't have a label pointing at a submit) Really though, we need a lot more than you provided to help dial in the right answer.
Thanks for your reply. I tried <input type='img' src='images/imagefile.png' .... prior to posting originally -without success. Here's more of the code. It works successfully, although "old-style", any help just to add an image and change location of Submit, will be appreciated. <script type="text/javascript"><script type="text/javascript"> var my_filename = get_parm('filename'); var file = document.getElementById("form_filename"); file.value = my_filename; document.write("<form action='index.html?filename="+my_filename+"' method='POST'><input type='submit' name='record' value='Re-record' id='record_button' /></form>"); var flashvars = { source: my_filename, server: "rtmp://67.xx.ww.xx./", type: "video", streamtype: "rtmp", poster: "poster.png", autostart: "false", logo: "logo.png", logoposition: "top left", logoalpha: "30", logowidth: "130", logolink: "http://jaris.sourceforge.net", hardwarescaling: "false", darkcolor: "000000", brightcolor: "4c4c4c", controlcolor: "FFFFFF", hovercolor : "67A8C1" }; var params = { allowFullscreen: "false", allowScriptAccess: "always", bgcolor: "#000000", quality: "high", scale: "noscale", wmode: "opaque", seamlesstabbing: "false" }; var attributes = {}; swfobject.embedSWF("JarisFLVPlayer.swf", "player", "448", "336", "9.0.0","expressInstall.swf", flashvars, params, attributes); function get_parm(name) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) { return ""; } else { return results[1]; } } </script> Code (markup):
Ok that ALL looks like it belongs server side, not client side. Playing around with GET values client side is always a mess, particularly if you're trying to plug it into a form element that shouldn't even BE a form, but should be an ANCHOR. Gah, that's the type of scripting I'd put a bullet in my head before putting it on a website.
Thanks for your reply, although I'm still look for a solution. Any other help, to actually solve my problem, would be appreciated.
See I'd do this server-side -- first, at the top of the page before any output is done I like to build all the values I'm going to use. This is PHP, not sure what you are back-ending your site with. /* the following if statement should be a bit more robust in checking for a valid file */ if ( isset($_GET('filename')) && file_exists($_GET['filename']) ) { $flashFile=htmlspecialchars($_GET['filename']); } else $flashFile = false; Code (markup): Then since that's done before any output even starts, you can output your anchor (and that really should be an anchor, NOT a input) anywhere you want. Notice I also use a trap to make sure there is a value there. (something your script does not) if ($flashFile) echo ' <a href=index.html?filename=',$flashFile,'" class="reRecord"> Re-Record </a>'; Code (markup): Then for the flash file, I'd swing an axe at the client side "scripting for nothing" and generate a 'proper' Object tag. if ($flashFile) { $params = array( 'flashvars' => implode('&',array( 'source='.$flashFile, 'server=rtmp://67.xx.ww.xx./', 'type=video', 'streamtype=rtmp', 'poster=poster.png', 'autostart=false', 'logo=logo.png', 'logoposition=top left', 'logoalpha=30', 'logowidth=130', 'logolink=http://jaris.sourceforge.net', 'hardwarescaling=false', 'darkcolor=000000', 'brightcolor=4c4c4c', 'controlcolor=FFFFFF', 'hovercolor=67A8C1' )), 'allowFullscreen' => 'false', 'allowScriptAccess' => 'always', 'bgcolor' => '#000000', 'quality' => 'high', 'scale' => 'noscale', 'wmode' => 'opaque', 'seamlesstabbing' => 'false' 'movie' => 'JarisFLVPlayer.swf' /> ); echo ' <!--[if IE ]> <object type="application/x-shockwave-flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="450" height="225 " > <![endif]--> <!--[if !IE]>--> <object type="application/x-shockwave-flash" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="450" height="225" data="',$params['movie'],'" > <!--<![endif]-->'; foreach ($params as $name => $value) { echo ' <param name="',$name,'" value="',htmlspecialchars($value),'" />'; } echo ' <p> <a href=http://get.adobe.com/flashplayer/> Adobe Flash Player </a> is required to view this content. </p> </object>'; } Code (markup): That's what I consider the 'proper' way. Now, if you REALLY want to do this client side in scripting, it's the same general idea, This: <script type="text/javascript"><!-- function get_parm(name) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)", regex = new RegExp( regexS ), results = regex.exec( window.location.href ); return (results == null ? '' : results[1]; } var flashFilename = get_parm('filename'), flashFileShow = document.getElementById("form_filename"); flashFileShow.value = flashFilename; --></script> Code (markup): Needs to be run BEFORE you write out the anchor (or that goofy form for nothing) -- it's also bad practice to try calling functions before they are defined, which is why I moved it to the top. (It hangs execution waiting on the parser). You do that FIRST, you can then do this: document.write('<form action="index.html?filename='+flashFileName+'" method="post"><input type="submit" name="record" value="Re-record" id="record_button" /></form>'); Code (markup): bit of ugly for nothing, or this: document.write('<a href="index.html?filename='+flashFileName+"' class="reRecord">Re-record</a>'); Code (markup): Anywhere in the document you want so long as it's AFTER the variable is defined. Really though it should be added using the DOM via createElement and either insertBefore or appendChild -- then you can do it at the bottom as one big file. I mean, you could keep most of your code as-is, and instead of using document.write, you'd do something like: var target=document.getElementById('someElement'), newAnchor=target.insertBefore(document.createElement('a'),target.firstChild); newAnchor.className='reRecord'; newAnchor.href='index.html?filename='+flashFilename; Code (markup): That puts it at the start of #someElement... to put it at the end newAnchors definition would be: newAnchor=target.appendChild(document.createElement('a')); Code (markup): Using the DOM lets you insert it pretty much anywhere, from anywhere -- which is just part of why it's considered the 'proper' way of doing things as opposed to document.write. (The other being it only forces a reflow from that element down) REALLY though I would not do that in scripting client-side. Processing getData and building markup is the server's job!
Thanks for making an effort to educate me, and for the time spent providing it here. However, it's a bit over my head. You have many sections of code, I don't know what to replace with what. I'm sure to other coders it makes complete sense. I tried adding your code and replacing similar code with what you laid out, moved it to the top, etc. without success. Obviously, what I've done is wrong, but I am trying. For example I put this above the Form: <script type="text/javascript"> function get_parm(name) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)", regex = new RegExp( regexS ), results = regex.exec( window.location.href ); return (results == null ? '' : results[1]; } var flashFilename = get_parm('filename'), flashFileShow = document.getElementById("form_filename"); flashFileShow.value = flashFilename; document.write("<form action='index.html?filename="+my_filename+"' method='POST'><input type='submit' name='record' value='RE-record' id='record_button' /></form>"); </script> Code (markup): And I have this after the Form: <script type="text/javascript"> var flashvars = { source: my_filename, server: "rtmp://67.xxx.ww.xxx/", type: "video", streamtype: "rtmp", poster: "poster.png", autostart: "false", logo: "logo.png", logoposition: "top left", logoalpha: "30", logowidth: "130", logolink: xxxxxxx, hardwarescaling: "false", darkcolor: "000000", brightcolor: "4c4c4c", controlcolor: "FFFFFF", hovercolor : "67A8C1" }; var params = { allowFullscreen: "false", allowScriptAccess: "always", bgcolor: "#000000", quality: "high", scale: "noscale", wmode: "opaque", seamlesstabbing: "false" }; var attributes = {}; swfobject.embedSWF("JarisFLVPlayer.swf", "player", "448", "336", "9.0.0","expressInstall.swf", flashvars, params, attributes); } </script>