Develop Reference

Inputting data into text box upon click

I have a form in which users can talk on a chatroom. My problem is that I have a gallery in which users can select pictures.
My question is how could a user click a html link and for that html link to input text into the input so when the user clicks the link which says cat it inputs into the text field :cat.
This is the form I have so far:
<form method="POST" action="chat.php">
<input type="text" name="message"></input>
<input type="submit" />
</form>
This is the gallery:
<img src="cat.jpg"/>
So again, the question is how I could insert text into the text box once the user clicks the image of the cat?
Thank you for anyone who spends time on helping me solve this issue.

If you're using jQuery you could do something like this:
$('a.cat').click(function()
{
$('input[name="message"]').val(':cat');
});
In this case you would need to update the link with the following:
<a class="cat" href="#"><img src="cat.jpg"/></a>

You can create a js function and then call it with the anchor to change the value attribute of the input. Input type text should not have a closing tag either.
function changeChatInput(value) {
document.getElementById('chatInput').value = value;
}
<form method="POST" action="chat.php">
<input type="text" name="message" id="chatInput" />
<input type="submit" />
</form>
<a href="javascript: changeChatInput(':cat');">
<img src="cat.jpg" />
</a>

Here is a solution in JS (without jQuery):
http://jsbin.com/doqedodezo/3/edit?html,js,output
The image triggers a JS function and passes the text which is supposed to be added to the input field.
I added a id to the input to address it.

I'd use
$('a > img').click(function() {
var imgName = retrieveImgName($(this).attr('src'));
$('input[name="message"]').val(':' + imgName);
});
var retrieveImgName = function(imgPath) {
return imgPath.substring(0, imgPath.indexOf('.'));
};
Doing that you can extract the logic for retrieving the name based on the src attribute of the img.
So, if the logic changes for some reason, you can sobstitute it quite easily.

You can achieve your job by using this jQuery syntax.
<script type="text/javascript">
$('a > img').click(function(e){
e.preventDefault();
$('input[name="message"]').val(':cat');
});
</script>

How do you concatenate a string with a variable/pass to link?

I'm trying to make a simple page to send IR codes to an app on my phone (OneRemoteToControlThemAll). This is how the dev of the app shows to communicate with it via html, which works 100% fine.
>"Send codes using URI "otrta://code?id=xxx" or "otrta://script?id=xxx" - use it for HTML layouts!"
<button type="button">Left</button>
But, this only works with a pre-entered id. So, I want to have a text box with a button that when the button is clicked it sends the code entered in the box. I've looked around for different methods and tried many, none quite working. Here's my most recent attempt:
<script type="text/javascript">
function myfunction()
{
var code = "otrta://code?id=" + document.getElementById("textbox1").value;
return code;
}
</script>
html:
<input type="text" name="textbox1" Id="textbox1" style="width: 194px"/>
<button type="button" id="submit">Submit</button>
Right now on chrome on my PC this takes me to a page and outputs otrta://code?id=1234 or whatever numbers I had entered. On my phone the button does nothing. Any solutions on how to make it act the same as the others and work? It doesn't need to be perfect form, just something that will work, thanks for any help.

Your return value is getting discarded. You need to set the href property of window.location.
<script type="text/javascript">
function set_href() {
var code = "otrta://code?id=" + document.getElementById("textbox1").value;
window.location.href = code;
}
</script>
--
<input type='submit' onclick='set_href()'>

Try replacing the href itself:
function myfunction(link) {
link.href = "otrta://code?id=" + document.getElementById("textbox1").value;
}
<input type="text" name="textbox1" Id="textbox1" style="width: 194px" />
<button type="button" id="submit"><a href="#" onclick='myfunction(this);'>Submit</a>
</button>

Why does my HTML page re-draw, replacing my input?

I am trying to learn a little Javascript. I wrote the code below expecting to see the contents of the text box written to the page when the button is clicked. This does happen but very briefly as the page seems to redraw back to it's original values.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script>
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
}
</script>
</head>
<body>
<h1>Playing with Javascript and Forms</h1>
<form id="myForm">
Name: <input type="input" id="name">
<input type="submit" value="Submit" id="submit" onClick = "getData()">
</form>
<p id="space"></p>
</body>
</html>

It does this because the form is being fully submitted and the page reloads. To stop it, change the onclick to:
onClick = "return getData()"
and your function to return false with:
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
return false;
}
jsFiddle example
This will prevent the form from submitting and allow your code to run.

Your form submits. To avoid it try adding return false at the end of "getData" function and change onClick = "getData()" to onClick = "return getData()"
Demo: http://jsfiddle.net/6gAkL/

Your javascript seems to be working fine.
The problem is after the JS is ran the HTML kicks in and submits the form POSTing it's data to the POST target (None as currently set).
If you don't want the form to be posted when you click that input you probably should remove the: type="submit"
Edit:
This would be most appropiate:
< input type="button" value="Submit" id="submit" onClick = "getData()" >

Setting innerText with Javascript only applies momentarily

So I am learning Javascript, and I'm having a problem:
I can set the innerText of a paragraph element. But immediately the web-browser undo's my work!! Meaning the web-page completely reverts back to the state it was in as if I had loaded the page afresh.
<html>
<body>
<form>
<input type="submit" onclick="GetCurrentLocation()" value="Get Current URL" />
</form>
<p id="CurrentURL">Current URL:</p>
<script>
function GetCurrentLocation()
{
var myCurrentLocation = window.location.href;
var curLocP = document.getElementById("CurrentURL");
curLocP.innerText = "Current URL: " + myCurrentLocation;
}
</script>
</body>
</html>
So above I set the innertext in the last line of the function, and in the UI I can see the correct, expected text:
Current URL: C:\Users...\Projects\test.html
flash and then disappear simply leaving me with:
Current URL:
I'm running this on Google Chrome.

Browser submits the form and refreshes the page. That's why you loose changes. Change your input type from submit to button
<input type="button" onclick="GetCurrentLocation()" value="Get Current URL" />

Add a return:false to your JavaScript to prevent the form from being submitted and reloading the page (and making it look like the change disappears when in reality it's just reloading):
<input type="submit" onclick="GetCurrentLocation();return false" value="Get Current URL" />
jsFiddle example

The browser submits the form that's why the refresh happens.
If you need to use a submit button you can use event.preventDefault()
function GetCurrentLocation(event)
{
event.preventDefault();
var myCurrentLocation = window.location.href;
var curLocP = document.getElementById("CurrentURL");
curLocP.innerText = "Current URL: " + myCurrentLocation;
}

Is it possible to delete iframe after upload

I currently use an iframe in an AJAX upload form, my question is once the file has uploaded to the iframe it appends the data to a div, so would i be safe to say i can remove the iframe once the load has completed?
my js is
$("#formsubmit").click(function (event) {
event.preventDefault();
var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');
$("body").append(iframe);
var form = $('#theuploadform');
form.attr("action", "uploader.php");
form.attr("method", "post");
form.attr("enctype", "multipart/form-data");
form.attr("encoding", "multipart/form-data");
form.attr("target", "postiframe");
form.attr("file", $('#userfile').val());
form.submit();
$("#postiframe").load(function () {
iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
$("#textarea").html(iframeContents);
$("#postiframe").remove(); // i thought this would do it but it doesn't
});
return false;
});
Also even though i have event.preventDefault(); if i remove the return false at the bottom it still submits the form (refreshes to new page).
my html is:
<div id="uploadform">
<form id="theuploadform" action="">
<input id="userfile" name="userfile" size="50" type="file" />
<input id="formsubmit" type="submit" value="Send File" />
</form>
</div>
<div id="textarea"></div>
So to summarize my questions:
Is it possible to delete the iframe after an upload once it has copied to the "textarea"
if so the $("#postiframe").remove doesn't work
does anyone know why when i remove return false, it reloads the page instead of using the event.preventDefault(); at the beginning
Thank you in advance.

Your <iframe> is being appended to the window document through JavaScript after page load, use:
$(document).find('#postiframe').remove();
That'll transverse through the DOM and find your newly appointed <iframe>, and then remove it dynamically from the DOM as hoped.
Try <input type="button" /> to treat the form instead of <input type="submit" />, if you still want to handle the <input type="submit" /> form submission still, try:
$('#theuploadform').submit(function(event){
event.preventDefault();
});
function instead, that'll allow jQuery to prevent the default behaviour of the entire form and all it's child elements.