Friday, May 21, 2010

Javascript - How to create HTML and send to textareas on another site's form?

Hi. I'm a little clueless about Javascript, so I need some help.





What I want to do is create a page where a user can get a customized snippet of HTML that has user-chosen stuff through a color picker and drop-down menus, and then either display the result in a textarea, or better yet, send the code directly to the website form fields automatically.





The page the user sees can only use HTML %26amp; Javascript, unfortunately.





Anybody know how I could accomplish this (or find someone/someplace I could find out from)?

Javascript - How to create HTML and send to textareas on another site's form?
I'm having a little difficulty understanding the question but I'll give it a shot. Here's how I understand the issues:


1. You want to access some "user-chosen stuff" using JavaScript (such as a drop-down menu)


2. You want to use JavaScript to write to a textarea


3. You want to send some text to a different website





First, to access your "user-chosen stuff", you'll need to be a little more specific because it varies depending on what the "stuff" is. If you have a drop-down menu (AKA a %26lt;select%26gt; form element), you access its selected values with JavaScript like this:





%26lt;form action="somepage.ext" method="get" onsubmit="return doStuff(this);"%26gt;


%26lt;select name="drpdown"%26gt;


%26lt;option value="1"%26gt;First%26lt;/option%26gt;


%26lt;option value="2"%26gt;Second%26lt;/option%26gt;


%26lt;option value="3"%26gt;Third%26lt;/option%26gt;


%26lt;/select%26gt;


%26lt;input type="submit" value="Do Stuff" /%26gt;


%26lt;/form%26gt;


%26lt;script type="text/javascript"%26gt;


function doStuff(f) {


alert("You chose: " + f.drpdown[ f.drpdown.selectedIndex ].text+ " (" + f.drpdown[ f.drpdown.selectedIndex ].value + ")");


return false; // returning false stops the form from submitting


}


%26lt;/script%26gt;





Next, to write to a textarea, you do the same thing you would when writing to other form fields:





%26lt;form%26gt;


%26lt;textarea name="someText"%26gt;%26lt;/textarea%26gt;


%26lt;/form%26gt;


%26lt;script type="text/javascript"%26gt;


var df = document.forms[0];


if(df %26amp;%26amp; df.someText) {


df.someText.value = "your code goes here.";


}


%26lt;/script%26gt;





The last problem can be tricky because you may be dealing with security issues due to Cross Site Scripting limitations. I would need more information to know for sure what you are trying to do. The solution could be so easy that you just submit the form, using either the GET or POST method, to the remote site. If you are trying to access a remote site (as in, not from the same domain as your page) using JavaScript, forget it. There are ways to do that: using AJAX and a proxy, JSON, the Greasemonkey extension to Firefox, and other obscure techniques; but they are too hard to explain to someone who is new to JavaScript. It's much easier to use a frame or a target="_blank" in your form element and then just execute the document.forms[0].submit() method.





If you're still confused, send me an e-mail (in profile) and I'll try to help you out. Good luck.


No comments:

Post a Comment