Drop down value to Textbox (Not HTML Event Handlers) - javascript

Basically, I'm working with static HTML that is written in stone. I cannot add an onclick to the dropdown menu, which is usually what I would do.
The following is what I have:
<script type="text/javascript">
function replicate() {
var tb1 = document.getElementById("ctl00_ContentPlaceHolder1_DropDownList_Country_17");
var tb2 = document.getElementById("ctl00_ContentPlaceHolder1_TextBox_State_19");
tb2.value = tb1.value;
}
</script>
Of course, this works fine for the actual "transfer" of data from the drop down to textbox, but it never gets executed. Usually I would execute the function "onclick" in the HTML, but I cannot do that. Is there another way to "listen" for a click on that dropdown?

Just register the handler:
document.getElementById("yourdropdownID").onchange = replicate;

can you use JQuery? Link to JQuery (like all javascrip files) and do the following in a script tag somewhere (or add to your current script tag.
<script>
$(document).ready(function(){
//Use the ID of the control here:
$("#ct100_ContentPlaceHolder1_DropDownList_Country_17").change(function(){
replicate();
});
});
<script>

Related

hooking up button in JS without using the onclick event

<button id=trainingbutton document.getElementById("trainingbutton").addEventListener("click",
}); ></button>
function(){
trainingbuttonclicked=()=>document.getElementById("trainingbtn").innerHTML = "Hello World";
Completely new to JavaScript and am trying to hook up a button to show an alert. Above is my HTML first and my app.js is below. I would like to try to hook up the event without using a simple onclick event handler. My preferred method would be either the event handler or the inner HTML method. Any advice appreciated. I know it's something simple but maybe Ive been staring at it too long, because I can't see the answer
You need your script tag in order to insert an eventlistener, like so
<script>
const button = document.querySelector('#trainingButton"); // # id's and . for selecting a
class in the dom (document object model)
button.addEventListener('click', function(event) {
const string = 'some string';
alert(string);
});
</script>
Your Button id should only contain a string like trainingButton so that it becomes <button id="trainingButton">
> the script tag should be placed in the bottom of your body tag, in order for the DOM to load properly before any javascript runs
for more info
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
You need to separate your HTML from your javascript. You can either have them in separate files or in the same.
If you'd like them in the same file you can do the following. (Note: the script has to be after the button because we want it to run after the button has been created)
<button id="trainingbutton">Training Button</button>
<script>
var trainingbutton = document.getElementById("trainingbutton");
trainingbutton.addEventListener('click', function(event) {
trainingbutton.innerHTML = "Hello World";
});
</script>
You can also define the script above between the script tags in a seperate file (*.js) and link it to your HTML file using <script src='*.js'></script>. As you add more to your HTML and JS it can help to organize.

Ajax toolkit HTML Editor value set on page load

am using HTML Editor (ajax toolkit) in my asp.net application.
Problem: my problem is when I want to assign or set the value to HTMLEditor on page load but it is not working(code below).
but with the same code I can retrieve or get the value successfully.
JavaScript:
<script type="text/javascript">
$(document).ready(function ()
{
document.getElementById("ContentPlaceHolder1_Editor1_ctl02").contentWindow.innerHTML = "Some value from db";
// not working :(
});
function getValue()
{
var content = document.getElementById("ContentPlaceHolder1_Editor1_ctl02_ctl00").contentWindow.document.body.innerHTML
// this working perfect.
}
function copyText()
{
document.getElementById("ContentPlaceHolder1_Editor1_ctl02").contentWindow.innerHTML = "Some Value from another div";
// working perfect.
}
</script>
My problem is I am not able to set the value in HTML Editor in document ready function. but the same way I can copy content of another div and I am able to set that text inside HTML Editor.
please give me suggestion how can I set the value in HTML Editor inside the document.ready event
Thanks,
It could be a timing issue because the html editor, when it loads, does have some javascript to run. You could try
window.setTimeout(document.getElementById("ContentPlaceHolder1_Editor1_ctl02").contentWindow.innerHTML = "Some value from db",0);
to place your code at the end of the stack.

Javascript replace content innerhtml on click with integrated PHP tag

I am trying to replace the content of a DIV once the button inside that DIV is clicked, (basically replacing the button, which retreives a PHP variable:
<div id="buttonholder">
Publish
</div>
I am trying to replace it with an unpublish button after a post is published (when the button above is clicked):
function publish(status){
document.getElementById("buttonholder").innerHTML = 'Unpublish';
}
It does not work however ... What am I doing wrong ?
Your code syntax is wrong. Use like below.
function publish(status){
document.getElementById("buttonholder").innerHTML = 'Unpublish';
}
Add a button id and then do:
$(function() {
$("#buttonId").click(function() {
$("#buttonHolder").html(" html to replace with ");
});
});
Also you can use the $("#buttonHolder").html(" html to replace with "); instruction in your onClick function as well.

JavaScript: changing the value of onclick with or without jQuery

I'd like to change the value of the onclick attribute on an anchor. I want to set it to a new string that contains JavaScript. (That string is provided to the client-side JavaScript code by the server, and it can contains whatever you can put in the onclick attribute in HTML.) Here are a few things I tried:
Using jQuery attr("onclick", js) doesn't work with both Firefox and IE6/7.
Using setAttribute("onclick", js) works with Firefox and IE8, but not IE6/7.
Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return is code passed to eval().
Anyone has a suggestion on to set the onclick attribute to to make this work for Firefox and IE 6/7/8? Also see below the code I used to test this.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var js = "alert('B'); return false;";
// Set with JQuery: doesn't work
$("a").attr("onclick", js);
// Set with setAttribute(): at least works with Firefox
//document.getElementById("anchor").setAttribute("onclick", js);
});
</script>
</head>
<body>
Click
</body>
</html>
You shouldn't be using onClick any more if you are using jQuery. jQuery provides its own methods of attaching and binding events. See .click()
$(document).ready(function(){
var js = "alert('B:' + this.id); return false;";
// create a function from the "js" string
var newclick = new Function(js);
// clears onclick then sets click using jQuery
$("#anchor").attr('onclick', '').click(newclick);
});
That should cancel the onClick function - and keep your "javascript from a string" as well.
The best thing to do would be to remove the onclick="" from the <a> element in the HTML code and switch to using the Unobtrusive method of binding an event to click.
You also said:
Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return in code passed to eval().
No - it won't, but onclick = eval("(function(){"+js+"})"); will wrap the 'js' variable in a function enclosure. onclick = new Function(js); works as well and is a little cleaner to read. (note the capital F) -- see documentation on Function() constructors
BTW, without JQuery this could also be done, but obviously it's pretty ugly as it only considers IE/non-IE:
if(isie)
tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value)));
else
$(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index
Anyway, just so that people have an overall idea of what can be done, as I'm sure many have stumbled upon this annoyance.
One gotcha with Jquery is that the click function do not acknowledge the hand coded onclick from the html.
So, you pretty much have to choose. Set up all your handlers in the init function or all of them in html.
The click event in JQuery is the click function $("myelt").click (function ....).
just use jQuery bind method !jquery-selector!.bind('event', !fn!);
See here for more about events in jQuery
If you don't want to actually navigate to a new page you can also have your anchor somewhere on the page like this.
<a id="the_anchor" href="">
And then to assign your string of JavaScript to the the onclick of the anchor, put this somewhere else (i.e. the header, later in the body, whatever):
<script>
var js = "alert('I am your string of JavaScript');"; // js is your string of script
document.getElementById('the_anchor').href = 'javascript:' + js;
</script>
If you have all of this info on the server before sending out the page, then you could also simply place the JavaScript directly in the href attribute of the anchor like so:
Click me
Note that following gnarf's idea you can also do:
var js = "alert('B:' + this.id); return false;";<br/>
var newclick = eval("(function(){"+js+"});");<br/>
$("a").get(0).onclick = newclick;
That will set the onclick without triggering the event (had the same problem here and it took me some time to find out).
Came up with a quick and dirty fix to this. Just used <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>
Hope this helps

How to get div from second page display in first page

In my main.html page I have a button. When that button is clicked, I need to get the content of another page.
The target page has five divs, I need to catch one div and display that div data in main.html page.
Use Javascript and JQuery. See http://docs.jquery.com/Manipulation or specifically http://docs.jquery.com/Ajax/load
To be precise use something like this:
$("#yourdiv").load("/yourpage.html #section");
jQuery can do this very elegantly:
<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script>
//only when the DOM has been loaded
$(document).ready(function() {
//bind to button id="myButton" click event
$('#myButton').click(function() {
//populate div id="myDiv" with specific div (div id="someDiv") from another page
$('#myDiv').load('/anotherPage.html #someDiv');
});
});
</script>
See jQuery Ajax/load
As long as the second page is on the same domain, you can use AJAX techniques. For example, using Prototype you could do something like this:
new Ajax.Request('http://url.of.second/page', {
method: 'get',
onSuccess: function(transport) {
//make a regular expression to grab the required HTML fragment
var re = /<div id="otherdiv">(.*)</div>/i;
//extract the fragment from transport.responseText
var found = transport.responseText.match(re);
//add the fragment to targetdiv on current page
$('targetdiv').innerHTML=found[1];
}
});
Jiri's answer is spot on.
http://docs.jquery.com/Ajax/load
is the exact jquery link.
Thanks Jiri...

Categories

Resources