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);
}
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 know this question has been asked already.
However, when I follow the answer given to that question it doesn't work.
This is my JS function and the relevant HTML
function myFunction() {
document.getElementById("submit").innerHTML = "LOADING...";
}
<input class="textbox" type="number" id="number">
<button onclick="myFunction(document.getElementById("number").value)" class="Button" >Submit</button>
<p id="submit"></p>
<script type ="text/javascript" src="../src/index.js"></script>
Strangely none of the answers recommended separating the HTML and JavaScript, so that's what I'll do. It's considered a best practice to not inline JS in your HTML.
const button = document.querySelector('button');
button.addEventListener('click', myFunction, false);
function myFunction() {
console.log(document.getElementById('number').value);
document.getElementById("submit").innerHTML = "LOADING...";
}
<input class="textbox" type="number" id="number">
<button class="Button">Submit</button>
<p id="submit"></p>
Try this...
Get the value insert the function.... It will display your desire output....
function myFunction() {
var number = document.getElementById("number").value;
document.getElementById("submit").innerHTML = "LOADING...";
}
<input class="textbox" type="number" id="number">
<button onclick="myFunction()" class="Button" >Submit</button>
<p id="submit"></p>
<script type ="text/javascript" src="../src/index.js"></script>
Like the earlier answer, you need to use single quote around 'number'. Another thing, you need to add parameter val in the myFunction(val) in the index.js.
function myFunction(val) {
document.getElementById("submit").innerHTML = "LOADING...";
console.log(val);
}
I thought, You used inside double quote("), using double quote("). So Please change double quote inside single quote(') or single quote inside double quote("). More over button default type is submit...
Change following
<button onclick="myFunction(document.getElementById("number").value)" class="Button" >Submit</button>
Into
<button onclick="myFunction(document.getElementById('number').value)" class="Button" >Submit</button>
or
<button onclick='myFunction(document.getElementById("number").value)' class="Button" >Submit</button>
javascript
function myFunction() {
document.getElementById("submit").innerHTML = "LOADING...";
}
Into
function myFunction(num) {
var n = num;//Get the number into your javascript function
document.getElementById("submit").innerHTML = "LOADING...";
}
<input class="textbox" type="number" id="number">
<button onclick="myFunction(document.getElementById('number').value)" class="Button" type="button" >Submit</button>
<p id="submit"></p>
<script type="text/javascript">
function myFunction(num){
var n = num;
console.log(n);
document.getElementById("submit").innerHTML = "LOADING...";
}
</script>
Default type of the button element is submit (and it is ok; the data will be submitted to the server). If something should be done before submission then it could be processed like this.
function myFunction(element, evn) { //here you can rename parameters
//evn is click event, element is the button clicked
evn.preventDefault(); //don't submit form at this moment
document.getElementById("submit").innerHTML = "LOADING...";
//now it is safe to submit the form
//setTimeout is for demonstration purpose
setTimeout(function() {
element.form.submit();
}, 1000);
}
<!-- form tag supposed to be open -->
<form method="get" action=".">
<input class="textbox" type="number" id="number" name="numData">
<!--name attr is required to send data to the server -->
<!-- note the arguments sent to the function.
Don't change them -->
<button onclick="myFunction(this,event)" class="Button">Submit</button>
<!-- form tag may be closed here or later -->
</form>
<p id="submit"></p>
<script type="text/javascript" src="../src/index.js"></script>
I want to set value to form input using function then POST the value. How can I do this?
JS:
function saveSignature() {
$('#signature').empty();
var dataUrl = $('.js-signature').jqSignature('getDataURL');
$('#signature').append($('<p>').text(dataUrl));
$('#data').jqSignature('getDataURL');
}
I tried to make it like this but it doesn't work.
<form action="add.php" method="post">
<input id="data" type="hidden" name="data" value="id='data'">
<button id="saveBtn" class="btn btn-default" onclick="saveSignature();" disabled>Save Signature</button>
</form>
you can use http://api.jquery.com/val/ to modify the value of an input.
<script>
function saveSignature() {
$('#signature').empty();
var dataUrl = $('.js-signature').jqSignature('getDataURL');
$('#signature').append($('<p>').text(dataUrl));
$('#data').val(dataUrl);
}
</script>
function signature () {
var somevalue = 'xyz';
$(['name=data']).val(somevalue);
...
}
In my code
<script>
$(document).ready(function(){
$("#btn").on('click', function() {
var caretPos = document.getElementById("txt").selectionStart;
var textAreaTxt = $("#txt").val();
var txtToAdd = $("#btn").val();
$("#txt").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
})
});
</script>
HTML
<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
<input type="button" id="btn" value="Bye" />
<input type="button" id="btn" value="TC" />
I want to give these values in textarea. But it is only giving value of Ok button. How I can give each button values in textarea
You have the same id on elements. ID's must be unique. You can use class and end to this:
$(".btn").on('click', function() {
$("#txt").val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt" rows="5" cols="10"></textarea>
<input type="button" class="btn" value="OK" />
<input type="button" class="btn" value="Bye" />
<input type="button" class="btn" value="TC" />
try this
html
<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
<input type="button" id="btn" value="Bye" />
<input type="button" id="btn" value="TC" />
javascript
$('input#btn').click(function()
{
$('#txt').val($('#txt').val()+this.value); // append the value of each button
})
Demo here
<textarea name="insert" rows="5" cols="30" id="insert" onblur="myFunction()"></textarea>
<button class="myvalue" id="myvalue">Ok</button>
<button class="myvalue" id="myvalue">Bye</button>
<button class="myvalue" id="myvalue">Tc</button>
<script>
function insertAt (myField, myValue, startSel, endSel)
{
if (startSel || startSel == '0') {
var startPos = startSel;
var endPos = endSel;
myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length));
}` else {
myField.val() += myValue;
}`}var targetBox = $('textarea#insert'),
startSel,
endSel;`targetBox.bind('focusout', function() {
startSel = this.selectionStart;
endSel = this.selectionEnd;
});
$(".myvalue").click(function() {
var myValue = $(this).text();
insertAt(targetBox, myValue, startSel, endSel);
});
</script>
Finally It Works
All your buttons have the same 'id', and 'OK' is the first one, so that's the one that's being returned...
To get the value of the button that's clicked you'd need to give each one a unique id (which should be the case anyway).
I would put your buttons in a separate container, probably a div, and apply the click handler to that. In the handler function, see if the event target has a value attribute, and if it has, send it to your textbox.
Or you could give each button a handler, it depends on your circumstances...
Danny
My suggestion to you change button id to class because id is unique for each element so you have to use class instead of id.
$("input.btn").on('click', function() {
$("#txt").val($("#txt").val()+$(this).val());
})
Demo
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.