Develop Reference

How would I go about changing the contents of a div after the user searches?

So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?

jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp

The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)

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>

Button click event not working while working with div container

I have a simple HTML button in my webpage having its HTML shown below:
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<input type="button" value="Finish" class="finish">
</div>
When I applied the onclick="checkValidity();" on my button it was not working but when I tried it with the container div of the input button it starts working.
I am unable to understand why it was not working while I called this function in button? Can anyone have any idea on it.
Interesting thing is that is working in another webpage on the input button too... !

First of all, checkValidity is a keyword. Stop using it. Change it to CheckIfValid or something like that.
Simple example in the jsfiddle. Check here
chck = function (obj)
{
alert('hi: ' + obj.id);
return true;
}
checkValidity is an event for input objects and returns true if the input has valid data. So, there is no scope for js event here.
It works on div because DIV is not an input element.
Let me know if you have any issues.

You have to surround that input tag inside a form tag.
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<form>
<input type="button" value="Finish" class="finish">
</form>
</div>

javascript -- capturing the value entered to use elsewhere

I have an image on the page.
When clicked on that, i am prompting for input and
writing that value entered on the page.
I've tried the following and some other things around it:
<form name="FORM_1" action="post">
...
<input type=text name=x >
...
<p>Click on the image to get enter the value</p>
<a href="", onClick="x=prompt('Enter a number')">
<img src='data:image/gif;base64,R0lGODhgjjhgAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/wD//////ywAAAAAIAAgAAAEkfDJSau9OOvNu//gBABJWYYXaa6JNY6ays6tBIjuq+/8fZe3XG8YhNlcCSKvxkP2gLuWMaOKrl7JKZXGPXFGXRPYuxl3seTYQ0bTpSuweBhN1dnCSRPVFlzj33AnfX5hZXyBXFprfXY5LD6MRR5Nh0aKeylTl5gpR4Mxm5WfoIsYoaaDLy4gPmuuoyFEKLO0tREAOw==' alt="Dance?" pagespeed_url_hash="2096625741">
</a>
</form>
How do I put the value of x to the form field x? What is the best way to do this?
Way too new to javascript.
TIA.
EDIT:
I am getting the entered value properly-- when i replace
x=prompt('Enter a number')
in the code with
alert(prompt('Enter a number'))
the value is there.

I'm stuck is how to put that value to the form field
Try this:
onClick="x=prompt('Enter a number'); document.getElementsByName('x')[0].value=x;"

Show Interactive Html elements on top of an anchor tag

I have a area surrounded by an anchor tag and it should be directed to anchor tag href wherever user clicks on that area. And also that area should contain a textbox and button control which should allow user to type some text and submit. The problem is when I click on the textbox or button it does a redirect to the page given in anchor tag.
<a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
<div style="">Title</div>
<div>
<input type="text" name="name">
<button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>
Please refer this jsfiddle.
I have created a simplified problem here.
However I found a solution for this by giving negative margin-top values. It is working but I am interested in a better solution. Because this solution is not scalable since the button and textbox are not inside the content div.
Each of these sections represent a item in a search result. When a user click on a search item it would navigate to single item page. At the same time users should be able to edit content from search results view by selecting edit option. When they select edit, a textbox and a button to submit should appear.

Unfortunately the HTML5 spec says about the <a> element:
Content model:
Transparent, but there must be no interactive content descendant.
What that means is, an <a> element is allowed to contain any elements that its parent is allowed to contain, except for things like <button>.
You'll need to find a way to get your <button> and <input> working outside of the <a>

Use this
<input type="text" name="name" onclick="return false;" />
Use this only if you don't want to change your markup.
The best solution is go with the semantics of HTML and style it. This way is not correct as Gareth pointed out.
In the case of your button
<button type="button" onclick="buttonClick(event);">Click Me!</button>
function buttonClick(e) {
alert('button clicked');
e.preventDefault();
}

Introduce a onclick for textfield and use stoppropagation method for a event. for ex ,
textfield.onclick = function(e) {
e.stopPropagation();
}
Another alternate is to use <div onclick="function()"> instead of <a> tag for what you think to achieve