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 :)

why isn't my jquery altering css attributes on button push?

I have an file "dashboard.html" that I am trying to manipulate with jQuery. The contents are such:
<div id="dashboard">
<span id="contracts">
<div id="make-offer">
<button onclick="getDetails()">add</button>
</div>
<div id="offer-type" style="visibility:hidden">
<form action="">
"Offer what for what???"
<button id="add-good" onclick="addGood()">good</button>
<button id="add-service" onclick="addService()">service</button>
</form>
</div>
</span>
</div>
I am trying to hide the "make-offer" div upon clicking the button and show the "offer-type". However, when I run the following js file, the divs do not change their visibility, though my test message is successful.
function getDetails(){
console.log("getting details.");
$("#make-offer").css("visibility:hidden");
$("#offer-type").css("visibility:visible");
}
Can anyone spot what I'm doing wrong? thanks.

You're calling .css() improperly. Two choices:
$("#make-offer").css("visibility", "hidden");
or
$("#make-offer").css({ visibility: "hidden" });
The second way allows you to set more than one property at a time.
When you pass just one parameter, you're asking jQuery to give you the current value of that CSS property.

jQuery does things a little differently
function getDetails(){
console.log("getting details.");
$("#make-offer").css("visibility", "hidden");
$("#offer-type").css("visibility", "visible");
}

submitting form using jquery

got a problem and cant find the solution.
I am writing a chat. When a new user opens my site (a new session) a div popes out and the user is asked to fill in his name.
The form works fine when I use an input submit. I want it to work without the submit button, I want it to work when i press a div.
here is my code
html:
<form name="form" id="form" action="index.html" method="post">
<span id="nspan">First name:</span> <input type="text" id="firstname" name="name">
<div name="enter" id="enter">Submit</div>
</form>
the jquery:
$(document).ready(function(){
$("#enter").click(function () {
$("#form").submit();
});
});

nevermind is correct - no problem with that code.
Here's the JSFiddle to prove it: http://jsfiddle.net/8Xk7z/
Maybe you problem is that the id "form" is to general a name, and you already used it for another form.
Another thing, why not use a button or a link? You can style it like you want. Be careful when you use thing for what they are not suppose to be used for, it my give unexpected side effects.
In your case, you may only be able to login to you chat using a mouse, that would exclude blind people. You would also not be able to use the tabulater to get to the login "button". And last, if you are blind and uses a screen reader your would actually not know that there is at login "button", as the reader would not recognize the div as something you can click.
I would recomend using the button-tag like this
<button id="enter">Submit</button>
Or the a-tag like this
<a href id="enter">Submit</a>
If you don't like the predefined styling of them you may always override the styling.

try to define jquery at top of the page
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Then put your script at next.
still issue.
Please check your other function on same page works fine or not.

How do I use this JQuery code to clean input fields of their content onclick of reset button?

Code:
<script type="text/javascript">
$(".reset_form").click(function() {
$(this).closest('form').find("input, textarea").val("");
});
</script>
Button:
<div class="reset_form">
<a class="anchor_link">
<span class="reset_button">
Reset
</span>
</a>
</div>
Using the code above I want to be able to clean input fields of their content when a user clicks on reset_form. However, being new to JS/JQuery I am unsure as to how to accomplish this since I am not using an input button but a div that looks like a button.
Question
How can i tweak my code so that when a user clicks on .reset_button that the fields will be cleared?

<div class="form-container">
<form>
<input type="text" />
<textarea></textarea>
</form>
<div class="clear-form">
<span class="reset_button">Reset form</span>
</div>
</div>
$(document).ready(function() {
$('.clear-form').on('click', function() {
$(this).closest('.form-container').find('input, textarea').val('');
});
});
Fiddle

In order to help you use the DOM traversal selectors like closest() and find(), it is first necessary to know roughly where your form is in relation to the .reset_form <div>, does it have an ID attribute (which makes it very easy to select the form), etc.
However, assuming there is only one form on the page, then this code will work:
Working jsFiddle example
$(".reset_form").click(function() {
$('form').find("input, textarea").val("");
});
As Jedediah mentions below, the above code will reset/clear all forms on the page. If you only wish to clear one specific form, then you can specify an ID in your form tag, thus:
<form id="justthisform"> ... </form>
You can clear only that form by modifying the active line as follows:
$('#justthisform').find("input, textarea").val("");

If you want to clear all elements in the form (radio reset to defaults, dropdowns, etc) you can use the native reset on the form DOM object but use jquery to find it like this:
<script type="text/javascript">
$(".reset_form").click(function() {
$(this).closest('form')[0].reset();
});
</script>

Well one thing to note is that HTML forms natively support resetting via a reset function in the browser:
$(".reset_form").click(function() {
$(this).closest('form')[0].reset();
});
But yeah if your function isn't working then it looks like your (fake) button isn't embedded within the form itself. jQuery's .closest() function will find the form if you do
$(this).closest("form")
So the only thing you need to fix is finding that form.

clone html form WITH values

I am trying to duplicate a form after it has been filled out. So the user fills out the form then hits submit. then a new window opens with the full html form, images, and styling included AND the values so they can print the filled out version. i tried .html() and .clone(). but neither seem to work.
any help is much apperciated. and please don't hesitate to ask questions.

Edit: Post your code for creating the popup.
You may need to use val() to copy the values over.
http://jsfiddle.net/Na6GN/2/
$('#myForm :input').each(function() {
$(this).clone().appendTo('#newForm').val($(this).val());
});

Its working fine:
JS:
$('btnclone').click(function() {
var mywindow = window.open();
$(mywindow.document.body).append($('form').eq(0).clone());
});
Html Code
<form>
<input name='test' />
</form>
<input type="button" value="Clone" name="btnclone" id="btnclone" />