how to change onclick="javascript:func-x()"
<input type="button" onclick="javascript:func-x()" value="MENU" id="btn">
to onclick="javascript:func-y()" with same id on javascript?
<input type="button" onclick="javascript:func-y()" value="MENU" id="btn">
I've tried:
var c = document.getElementById('btn'); //input#btn
// ...
But I don't know what to continue...
You can try to use setAttribute method, like this:
function func_x(input) {
console.log('I\'m func_x function');
input.setAttribute('onclick', 'javascript:func_y()');
}
function func_y() {
console.log('I\'m func_y function');
}
<input type="button" onclick="javascript:func_x(this)" value="MENU" id="btn">
Javascript :
document.getElementById("btn").attribute("onclick","javascript:func-y()");
Jquery :
$("#btn").attr("onclick","javascript:func-y()");
Related
I have been trying to call in a php variable into a jquery submit onclick event in such a way that when a reply is submitted, the id of the comment is captured to be processed by an ajax code.
$(document).ready(function() {
$("#submit").click(function(e) {
var rname = $("#rname").val();
var remail = $("#remail").val();
var rmessage = $("#rmessage").val();
var cid = $("#cid").val();
var post_id = $("#post_id").val();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" name="submit" id="submit'.$commnt_id.'" value="Reply This Comment" class="primary-btn text-uppercase" />
There are so many options to achieve this:
Solution 1 (by using data attribute):
<input type="submit" name="submit" data-commentID="<?=$commnt_id?>" value="Reply This Comment" class="primary-btn text-uppercase myBtnClass"/>
jQuery:
$(document).ready(function(){
$(".myBtnClass").click(function(){
var commentId = $(this).attr('data-commentID');
});
});
Solution 2 (by using onclick event):
<input type="submit" name="submit" onclick="mymethodCall(<?=$commnt_id?>)" value="Reply This Comment" class="primary-btn text-uppercase"/>
JavaScript:
function mymethodCall(commentId){
console.log(commentId);
}
In solution 1, using class name myBtnClass will help you, if you have multiple records.
Running Example:
$(document).ready(function(){
$(".myBtnClass").click(function(){
var commentId = $(this).attr('data-commentID');
alert(commentId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" name="submit" data-commentID="1" value="Reply This Comment" class="primary-btn text-uppercase myBtnClass"/>
Running Example 2:
function mymethodCall(commentId){
console.log(commentId);
}
<input type="submit" name="submit" onclick="mymethodCall(1)" value="Reply This Comment" class="primary-btn text-uppercase"/>
May can rewrite to
<input type="submit" name="submit" data-comment-id="'.$commnt_id.'"
and in js:
$('[name="submit"]').click(function(e){
console.log($(this).data('comment-id'));
Use this.id
$(document).ready(function(){
$("input[type='submit']").click(function(e){
console.log(this.id);
});
});
Also, when you use $("#submit") you're selecting the elements where the id is equal to submit instead of the elements that have the type equal to submit.
Working JSFiddle: https://jsfiddle.net/nrmwx315/
I have two textfields with different IDs as shown
<textarea id="textfield">Hello World</textarea>
This will be updated with the content of the first textarea
<input id="messageID">
This is my script
<script type=text/javascript>
function() {
var value = document.getElementById("textfield").value;
document.getElementById('#messageID').val(value);
alert(value);
}
</script>
This is the onclick button and nothing happens when I click it
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Kindly assist!
Three things I'm seeing wrong:
.val(value); is a jQuery' method, not javascript... you should change it to .value = value;
to call onclick="myfunction()" you should name it: var myfunction = function(){
The document.getElementById() method doesn't need sharp # before the name.
Hope it helps.
Try something like this:
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById('messageID').value=value;
alert(value);
}
<input type="button" value="Alert" onclick="myfunction()" type="button" class="btn btn-danger" id="button"/>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
The most important catch is whenever you declare function on button click you should define that function inside javascript.
<script type=text/javascript>
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById("messageID").value = value;
alert(value);
}
</script>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Here you go a working fiddle
https://jsfiddle.net/blazeeboy/fNPvf/
Its inner Html you are trying to get
<textarea id="textfield">Hello World</textarea>
<input id="messageID"/>
<button type="button" class="btn btn-danger" id="button" onclick="myfunction()">Alert</button>
function myfunction(){
alert(1);
var v = document.getElementById("textfield").innerHTML ;
document.getElementById('messageID').innerHTML = v;
alert(v);
}
I have a form which I want to hide or show dependent on the users decision. I got following functions in an external javascript file:
function hide_element() {
$("form").hide();
};
function show_element() {
$("form").show();
};
and this is how I call those functions:
<button type="submit" onclick="show_element;">show</button>
<button type="submit" onclick="hide_element;">hide</button>
<form>
...
</form>
Unfortunately this does not work. Do you have any clues why this is the case?
Since we are using jQuery I would like to propose this approach:
HTML:
<button id='toggleMyForm'>hide</button>
<form id='myForm'>First name:
<br>
<input type=" text " name="firstname " />
<br>Last name:
<br>
<input type="text " name="lastname " />
<br>
<input type="submit" value="Submit"/>
</form>
jQuery:
var myForm = $('#myForm');
var toggleMyForm = $('#toggleMyForm');
toggleMyForm.on('click', function(){
myForm.toggle();
myForm.is(":visible") ? $(this).html('hide') : $(this).html('show');
});
Test here: http://jsfiddle.net/urahara/obm39uus/
NOTE: don't put yourself in the position where you have multiple submit buttons in a <form>, you can distinguish between them by using value attribute, but still in my opinion it's better to keep clean design with one submit per form.
don't repeat jQuery fetching calls. make a handle of a element:
var myForm = $('myForm'); then use it like this e.g: myForm.show()
replace show_element with show_element() & hide_element with hide_element() like below:
<button type="submit" onclick="show_element();">show</button>
<button type="submit" onclick="hide_element();">hide</button>
Now you try to call variables named show_element and hide_element. These doesn't exist.
Function has to be called with brackets. If you have no params, use ().
<button type="submit" onclick="show_element();">show</button>
<button type="submit" onclick="hide_element();">hide</button>
I recommend you to use <button type="button" class="hide">Hide</button>
And, in the js file :
$('button.hide').click(function() {
$('form').hide();
}
Same thing for the show button.
You've to replace "show_element;" with "show_element();".
<button type="submit" onclick="show_element();">show</button>
<button type="submit" onclick="hide_element();">hide</button>
But why?
The () Operator Invokes the Function.
Using the example above, show_element refers to the function object, and show_element() refers to the function result.
Example:
Accessing a function without () will return the function definition:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
http://www.w3schools.com/js/js_functions.asp
With "show_element" you are able to store the function itself (in a variable for example), but you don't execute it.
is this pseudo-code?
If not I would rewrite it like:
$form = $('#form_id');
function hide_element() {
$form.hide();
$form.submit();
}
function show_element() {
$form.show();
$form.submit();
}
And then:
<button onclick="show_element();">show</button>
<button onclick="hide_element();">hide</button>
<form>
...
</form>
I removed the type submit because it is not good to have more than one submit. Actually both are outside the form. In case you want to submit it I would put it like this:
<button onclick="show_element();">show</button>
<button onclick="hide_element();">hide</button>
<form>
...
</form>
How to make the function only runs once per button?
if clicks in "click me" only works once, and the same for the other buttons.
Order not to put much code, I put an example..:
http://jsbin.com/apexod/2/edit
<input type="button" value="click me" onclick="hello('Jhon')"><br>
<input type="button" value="click me1" onclick="hello('Gerard')"><br>
<input type="button" value="click me2" onclick="hello('Kaoru')">
<script>
function hello(id){
alert("hello "+id);
}
</script>
A solution would be to register what buttons have been clicked :
<script>
var done = {}
function hello(id){
if (done[id]) return;
done[id] = 1;
alert("hello "+id);
}
</script>
(another one would be to use a utility lib like jQuery and its one function but this would be overkill for just that)
You can send the button element reference along to the function, and remove the event from the button:
<input type="button" value="click me" onclick="hello(this,'Jhon')"><br>
<input type="button" value="click me1" onclick="hello(this,'Gerard')"><br>
<input type="button" value="click me2" onclick="hello(this,'Kaoru')">
<script>
function hello(el, id){
alert("hello " + id);
el.onclick = null;
}
</script>
Demo: http://jsfiddle.net/Guffa/CDjGY/
Once executed you can override the function with an empty function
function hello(){
alert("hello " + id);
hello = function(){}
}
I have a complicated case here, but below is an example just to make it simple.
I have two buttons, each with their own onClick function. I want to call the onClick function of button A when I click on button B.
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="sayHiA()"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB()"></input>
Note that the event can be onClick() or onMouseUp()
p.s. I have to do it using only javascript. (NO jQuery). Thanks
<input type="button" onclick="fnc()"/>
<input type="button" id="message" onclick="alert('ok')" />
<script type="text/javascript">
function fnc()
{
document.getElementById("message").click();
}
</script>
are you looking for this?
<html>
<head>//I guess something like setTimeout(function,timeInMilliseconds)
<script language = "javascript">
function sayHiA(){
var v = document.getElementById('buttonB').getAttribute("onClick");
setTimeout(v,0);
}
function sayHiB(){
document.getElementById('para').innerHTML = 'wrote';
}
</script>
</head>
<body>
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="sayHiA()"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB()"></input>
<p id = "para">
Write Here
</p>
</body>
</html>
function sayHiB() {
sayHiA();
}
Did you tried this with an external js ? This is quite the most basic thing you can do in javascript.
I made you a jsfiddle : http://jsfiddle.net/pjDVP/4/
The html :
<input id='bta' type='button' value='button a'></input>
<input id='btb' type='button' value='button b'></input>
The js (with jquery laoded) :
$(function(){
$('#bta').click(function(){aORbClick();});
$('#btb').click(function(){aORbClick();});
})
function aORbClick(){alert('I clicked a or b');}
just call function sayHiA from sayHiB or call it after.
Call from sayHiB
function sayHiB()
{
sayHiA();
}
or after
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB(); sayHiA();"></input>
or easier way is to use jQuery, so you can do this
function sayHiB(){
if($('#id-of-a').attr('onclick'))
$('#id-of-a').click();
else if ($('#id-of-a').attr('onmouseup'))
$('#id-of-a').mouseUp();
}
function sayHiB(){
$('#buttonA').click();
}
Raw JS:
function sayHiB(){
var buttonA = document.getElementById('buttonA');
buttonA.onclick.apply(buttonA); // in onclick function you can get buttonA as 'this'
}
I'd probably make a generic function that switches on the button's name/id to figure out what to do - this would also make your code work independent of the event attribute used to call the function.
HTML:
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="myFunc(this)"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="myFunc(this)"></input>
JavaScript:
function myFunc(elem){
switch(elem.id){
case 'buttonA':
sayHiA();
break;
case 'buttonB':
sayHiB();
sayHiA();
break;
}
}
This would also help with any DOM manipulation you might need as the button which was clicked is passed to the generic function myFunc, allowing you to quickly access other attributes or nearby elements.