<!--button gets clicked with ID="Import_audit" -->
$('#import_audit').click(function() {
$.post("edit_audits.php?action=import", function(data) {
//need HTML to go into DIV with id = "import_audit_table"
$('#import_audit_table').html(data);
});
});
<!--JQuery -->
<script src="../bootstrap/jquery/1.12.2/jquery.min.js"></script>
<!--button-->
<input type="button" value="Transfer Audit" id="import_audit" /> <!--div-->
<DIV id="import_audit_table"></DIV>
How can I make it so that when I click a button Jquery can load HTML into a DIV?
From mpf82, answer works. I had to put the script on the bottom of the page:
<input type="button" value="Transfer Audit" id="import_audit" />
<DIV id="import_audit_table"></DIV>
<style>
$(document).ready(function(){
$('#import_audit').click(function(){
$('#import_audit_table').load("edit_audits.php?action=import");
});
});
</style>
Related
The problem is simple, I just can't find a way to solve it. I just to display a text with a click of a button but when the page is reloaded I want the text to still be displayed without clicking the button again. My code is the following:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<div id='result' style: 'display:none;'>
<p></p>
</div>
<form method="post" action="#">
<input type="button" value="Show" id='button'/>
</form>
<script type="text/javascript">
$(document).ready(function(){
var div1Show = localStorage.getItem('div1_show');
if (div1Show) {
$("#div1").remove();
} else {
$("#div1").show();
}
$("#button").click(function(){
$("#result").text("Complete");
$("#div1").show();
localStorage.setItem('div1_show', 'true');
});
});
</script>
You are placing a string into the cookie just change the following line
localStorage.setItem('div1_show', 'true');
To a boolean
localStorage.setItem('div1_show', true);
Here is my code, how can I show the image? When I run the web page, it only shows the two buttons but no image...Should I call the function inside my html?
<html>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array()
var which=0
photos[0]='images/title.gif'
photos[1]='images/pinkrice.png'
function backward(){
if (which > 0){
which=which-1
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which=which+1
document.images.photoslider.src=photos[which]
}
}
</script>
<head><title>How to Play?</title></head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>
I Edited your code. Test this. Now are working. You need a container to show your image. document.images only store your images on cache. you need a tag to show. Download files here
<html>
<head>
<title>How to Play?</title>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array();
var which=0;
photos[0]='images/title.gif';
photos[1]='images/pinkrice.png';
function backward(){
if (which > 0){
which=which-1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
function forward(){
if (which<photos.length-1){
which=which+1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
</script>
</head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<img id="SliderPhoto" src="images/title.gif" />
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
On clicking the radio button nothing happens, why?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="jquery.js">
$("input[name='check1']",$('#Search_By')).change(function()
{
alert('yo');
});
</script>
</head>
<body class="well">
<form action="/abc/readservlet" method="post">
<div class="well" id="Search_By">
<h3><b/>Search BY</h3>
<input type="Radio" name="check1" value="Search BY Key"> Key<br/><br/>
<input type="Radio" name="check1" value="Search By Tablename"> Tab_name
<br/>
</div>
On clicking radio button nothing happens...
If your <script> tag has a src attribute, its contents will be ignored, so your code isn't going to actually run at all.
You need to put your code into a separate script tag and run the code when the document is ready:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Search_By input[name='check1']")).change(function() {
alert('yo');
});
});
</script>
Or put both of those script tags at the very bottom of the <body> tag.
The javascript code to create the onchange handler should be as follows. Try it out.
...
$("#Search_By input[name='check1']").change(
function()
{
alert('yo');
});
...
I'm trying to get the line of codes below to fadeOut the form with the class ".quote" and replace it with the DIV that has the class ".thanks." when the button is clicked. it only works when you click on the input area but doesn't fadein div.thanks.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".quote, .thanks").click(function(){
$('form:fadeIn(:.thanks)').fadeOut (5000);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: hide;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
I'd also like to know how to make it get the visitors name and insert it in div.thanks.
I think this is what you are looking for...
$(".quote").click(function(){
$(this).fadeOut(5000, function(){
$(".thanks").fadeIn();
});
});
You need to use CSS to position both elements in the same location. Typically this involves using position:absolute and setting left: and right: CSS styles. Once that's set up correctly, you can use jQuery's fadeIn and fadeOut as you expect.