Develop Reference

Simple Javascript code (function) is not working

The simple javascript is not working. When I test the code in live preview (chrome), it says "ThfJ8q9:58 Uncaught ReferenceError: textpage is not defined
at HTMLButtonElement.onclick (ThfJ8q9:58)"
What I am trying to do is to change the background image of the div "chat" when the button is clicked to the new image specified.
HTML:
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JAVASCRIPT DOCUMENT:
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('full-convesation-
MRP.png')";
}

Could use something like this to listen for a click on the button
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" id="btns"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
var btntrigger = document.getElementById('btns');
btntrigger.addEventListener('click', function(){
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
})
Or have a closer look at your syntax on the orginal, fixed here:
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()">
<img class="submit-button-img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
}
:)

Get Selected Filename in dynamic input file fields using jQuery/JavaScript

I have dynamic input type file fields which can be added more by clicking on add more
I have scripted to get file name when it is selected, but it is working for only first field not for other fields.
So how to get all file names when it is selected?
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logo').change(function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>

you are adding elements dynamically but when you add you are not attaching an event handler to these new elements. To fix this you can use event delegation, by attaching the event to parent .logos.
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logos').on('change', '.logo', function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>

Refer Jquery .on('change') not firing for dynamically added elements
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logos').on('change', 'input:file', function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>

Javascript not work in require php file on Class "content" AdminLTE

I have 2 page chemical_data.php and chemical_selectAll.php. I will test alert() on click button but button id = "test1" not show alert('1')
chemical_data.php
<script>
$(document).ready( function() {
$('#OutputALLResult').load('chemical_selectAll.php');
$('#test').click(function(){
alert('1');
});
});
</script>
<!-- Main content -->
<section class="content">
<div class="col-md-12">
<div id="OutputResult"></div>
</div>
<hr>
<button class="btn btn-default" type="button" id="test">testClick</button>
<div id="OutputALLResult">Empty Data</div>
</section>
chemical_selectAll.php
<script>
$(document).ready( function() {
$('#test1').click(function(){
alert('1');
});
});
</script>
<button class="btn btn-default" type="button" id="test1">test1</button>

I not changed any code. But in my local server this works well. You can check what error occurred

Unable to fire javascript event OnClick of checkbox

So I have a checkbox control that I cannot get to fire an OnClick event. I've tried a number of different ways: Binding the event onload and adding the event as a parameter in the <input type="checkbox"> tag.
Here is my most recent iteration of code. I'm trying to fire an Alert just to confirm that it changed.
<section class="border-bottom">
<div id="approx" class="content">
<h3>This is my approximate location</h3>
<div class="form-control-group">
<div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no">
<input type="checkbox" />
</div>
</div>
</div>
</section>
JavaScript:
$('input[type="checkbox"]').bind('click', function() {
alert("OK");
})
I also wouldn't mind being able to run it via the following input:
<input type="checkbox" onclick="runMyFunction(); return false;" />

You should use one of the following methods:
.click(function() { ... })
.change(function() { ... })
.on('click', function() { ... })
HTML:
<div section class="border-bottom">
<div id="approx" class="content">
<h3>This is my approximate location</h3>
<div class="form-control-group">
<div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no">
<input type="checkbox" id="checkbox" />
</div>
</div>
</div>
</section>
JavaScript:
$('#checkbox').change(function() {
alert("OK");
});

Some of the plugins require:
$("#checkbox").on('change', function() {
// content
});
or look for the manual of your plugin (sometimes you need to use: pluginName.change exchange for change)

First use your jquery function inside $(document).ready function to make sure the dom is ready like :
$(document).ready(function () {
$('input[type="checkbox"]').bind('click', function () {
alert("OK");
})
});
https://jsfiddle.net/4fmL1zfr/8/

How hide div if another div is open use javascript

i have div like this use javascript :
<script>
$(document).ready(function(){
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
$("#btnmsg-2").click(function(){
$(".msgid-2").show();
});
$("#btnmsg-3").click(function(){
$(".msgid-3").show();
});
$("#btnmsg-4").click(function(){
$(".msgid-4").show();
});
});
</script>
<div>NAME : ABCDEF <button id="btnmsg-1">message</button></div>
<div class="msgid-1" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : GHIJKL <button id="btnmsg-2">message</button></div>
<div class="msgid-2" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : MNOPQR <button id="btnmsg-3">message</button></div>
<div class="msgid-3" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : STUVWX <button id="btnmsg-4">message</button></div>
<div class="msgid-4" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
if i click button id="btnmsg-1" then div class="msgid-1" show, and then i click button id="btnmsg-3" then div class="msgid-3" show but div class="msgid-1" not hide or close,my question how hide the div if another div is open?

Instead of using separate handlers for each, you can use the related positioning of the elements along with classes to group them to show/hide
ie, Add a class like btnmsg to all the buttons and msgedit to all the div's that have to be shown/hidden. Now register a click handler to .btnmsg elements, from your markup the .msgedit element to be shown is the next sibling of the clicked button so show that then hide all other .msgedit elements.
$(document).ready(function() {
var $edits = $('.msgedit')
$(".btnmsg").click(function() {
var $this = $(this).parent().next().show();
$edits.not($this).hide()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>NAME : ABCDEF
<button class="btnmsg" id="btnmsg-1">message</button>
</div>
<div class="msgid-1 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : GHIJKL
<button class="btnmsg" id="btnmsg-2">message</button>
</div>
<div class="msgid-2 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : MNOPQR
<button class="btnmsg" id="btnmsg-3">message</button>
</div>
<div class="msgid-3 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : STUVWX
<button class="btnmsg" id="btnmsg-4">message</button>
</div>
<div class="msgid-4 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>

Please add same classes to similar elements, and then use this jQuery code instead:
$(document).ready(function(){
$(".btnmsg").click(function(){
$(".msgid").hide();
$(this).parent().next(".msgid").show();
});
});
See the complete DEMO working: https://jsfiddle.net/lmgonzalves/n5f78kqs/

jsBin demo
don't use msgid-1, msgid-2 etc... cause it defeats the purpose of classNames. Use only msg
Same goes for your buttons. Remove the buttons IDs. use Class class="btn"
Don't use inline styles. Use <style> instead or call-to an external stylesheet.
HTML
<div class="btn">
NAME : ABCDEF <button>message</button>
</div>
<div class="msg">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send">
</div>
CSS:
.msg{
display:none;
}
See how more readable is now your code?
jQuery:
var $msg = $(".msg"); // Get all .msg DIVs
$(".btn").on("click", "button", function( e ){
$msg.hide(); // Hide all
$(e.delegateTarget).next().show(); // Show next
});

You can do this by calling hide() on the elements you would like to hide.
For example, you would make the following change:
// Old
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
//New
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
$(".msgid-2").hide();
$(".msgid-3").hide();
$(".msgid-4").hide();
});
A cleaner way to do this would be to give all of your messages a "message" class, then your onClick handlers would look like this:
$("#btnmsg-1").click(function(){
$("#message").hide();
$(".msgid-1").show();
});
Hope that helps!