I have a php application that I'm working on. Here's what I'm trying to do:
I have a search box (textbox) and several buttons. On clicking each button, I want it to fill the search box with a predefined string. Clicking another button will erase what's in the search box and replace its value with its pre-defined string. And a button to clear the textbox as well.
Example:
Button 1
on click -> textbox value = button1
Button 2
on click -> textbox value = button2 (old value is replaced)
Can anyone guide me with the JS code that does this? Thanks!
Apply 'button' class to every button and unique id for each button.
$(".button").click(function(){
var id = this.id;
$('#searchTextId').val($('#'+id).attr('value'));
});
$(document).ready(function(){
$(document).on('click','.click_me',function(e){
e.preventDefault();
var search_val = $(this).attr('data-value');
$('.text_search').val(search_val);
});
$(document).on('click','.clear_me',function(e){
$('.text_search').val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="click_me" data-value="text 1" value="button 1"/>
<input type="button" class="click_me" data-value="text 2" value="button 2"/>
<input type="button" class="click_me" data-value="text 3" value="button 3"/>
<input type="button" class="click_me" data-value="text 4" value="button 4"/>
<input type="button" class="clear_me" value="Clear"/>
<input type="text" class="text_search" />
<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>
<input type="button" name="btn1" id="btn1" value="Hello" onclick="setText(this)">
<input type="button" name="btn1" id="btn1" value="World" onclick="setText(this)">
<input type="button" name="btn1" id="btn1" value="StackOverflow" onclick="setText(this)">
<input type="text" name="textBox" id="textBox" value=""/>
Tested here: http://jsfiddle.net/o5fp0uq1/
Related
I am new to Javascript. I can not change value of textarea when I press Goodbye button. But When I click hello it is working fine! Can you help to change the value of textarea when it is pressed the second time.
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction()">Gooodbye</button>
<script>
function myFunction() {
var text =document.getElementById("text").value;
document.getElementById("myTextarea").value=text;
}
</script>
Your goodbye and hello input fields has the same id - that when call your myFunction the text variable will always be the value of your first input.
You have to use different ids for each input the you can handle click events separately for each button.
function handleHelloClick() {
var text = document.getElementById("text-hello").value;
setTextarea(text);
}
function handleGoodbyeClick() {
var text = document.getElementById("text-goodbye").value;
setTextarea(text);
}
function setTextarea(text) {
document.getElementById("myTextarea").value = text;
}
Comment:<br />
<textarea id="myTextarea"></textarea><br />
<input id="text-hello" type="text" value="Hello" name="text" /><br />
<button type="button" onclick="handleHelloClick()">hello</button><br />
<input id="text-goodbye" type="text" value="Goodbye" name="text" /><br />
<button type="button" onclick="handleGoodbyeClick()">Gooodbye</button>
You cannot have two elements with the same ID. This is why it does not work.
You will want something like this;
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction2()">Gooodbye</button>
<script>
function myFunction() {
var text =document.getElementById("text").value;
document.getElementById("myTextarea").value=text;
}
function myFunction2() {
var text =document.getElementById("text2").value;
document.getElementById("myTextarea").value=text;
}
</script>
You should have different id's for different inputs.
It's a bad practice to have same ID for all the elements.
<textarea id="myTextarea">
</textarea><br>
<input id="hello-input" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('hello-input')">hello</button><br>
<input id="bye-input" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('bye-input')">Gooodbye</button>
<script>
function myFunction(inputId) {
var text =document.getElementById(inputId).value;
document.getElementById("myTextarea").value=text;
}
</script>
You can start from learning JavaScript: https://javascript.info/
Two inputs with the same id is not a correct HTML, ids should be uniques on a page.
Try this:
<textarea id="myTextarea">
</textarea><br>
<input id="text1" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('text1')">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('text2')">Gooodbye</button>
<script>
function myFunction(inputId) {
var text = document.getElementById(inputId).value;
document.getElementById("myTextarea").value=text;
}
</script>
In JavaScript when you assign the same ID to two different elements and then try to fetch an element using document.getElementById() it will fetch only the first element that matches the ID name.
So, you can probably assign a different ID to the goodbye element. Also, you can have different functions to handle two different button clicks.
Please check out the example below.
console.log(document.getElementById("text"));
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="hello" type="text" value="Hello" name="text"><br>
<button type="button" onclick="hello()">hello</button><br>
<input id="goodbye" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="goodbye()">Gooodbye</button>
<script>
function hello() {
var text =document.getElementById("hello").value;
document.getElementById("myTextarea").value=text;
}
function goodbye() {
var text =document.getElementById("goodbye").value;
document.getElementById("myTextarea").value=text;
}
</script>
It's never a good idea to use an id twice. If you call document.getElementById("some-id") the browser will return the first element it finds. So the browser will never return the goodbye button.
function myHelloFunction() {
var text =document.getElementById("hello-button").value;
document.getElementById("myTextarea").value=text;
};
function myGoodbyeFunction() {
var text =document.getElementById("goodbye-button").value;
document.getElementById("myTextarea").value=text;
}
<br>
<textarea id="myTextarea">
</textarea><br>
<input id="hello-button" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myHelloFunction()">hello</button><br>
<input id="goodbye-button" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myGoodbyeFunction()">Gooodbye</button>
Copy button works perfect copy text from first input field and click on paste button paste in it
<input type="text" id="txt1">Some text</input>
<input type="button" value="copy" >
<input type="text" id="txt2">Some text 2</input>
<input type="button" value="copy2" >
<input type="text"></input>
<input type="button" value="paste text" >
Try this solution. Add handler to the copy buttons and on each click get the previous input field's value and store in a variable. Then in the paste click set the text into the value of the paste button.
If you have this structure of html, in this way it will be easy to do (with prev()).
var text = '';
$('.copy').on('click', function(){
text = $(this).prev().val();
});
$('#paste').on('click', function(){
$(this).prev().val(text);
});
input {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" value="Some Text 1"/>
<input type="button" class="copy" value="copy" >
<input type="text" id="txt2" value="Some Text 2"/>
<input type="button" class="copy" value="copy2" >
<input type="text"/>
<input id="paste" type="button" value="paste text" >
since you said it's working perfectly then i understand your question is which language is used there, it's neither javascript or jquery, pure html is used only for that
var copy_text= '';
$('.copy_button').on('click', function(){
copy_text = $(this).prev().val();
});
$('.paste_button').on('click', function(){
$(this).prev().val(copy_text);
});
I have 4 buttons. Once on the page, I only want button 1 to show. Once button 1 has been clicked, it disappears and only button 2 is visible. Once button 2 has been clicked, it disappears and only button 3 shows. The same thing happens for button 5. Any help would be appreciated.
<html>
<script>
function enableButton2() {
document.getElementById("button2").disabled = false;
}
function enableButton3() {
document.getElementById("button3").disabled = false;
}
function enableButton4() {
document.getElementById("button4").disabled = false;
}
function enableButton5() {
document.getElementById("button5").disabled = false;
}
</script>
</head>
<body>
<input type="button" id="button1" value="button 1" onclick="enableButton2()"
onclick="hidden" />
<input type="button" id="button2" value="button 2" disabled onclick="enableButton3()"
onclick="hidden" />
<input type="button" id="button3" value="button 3" disabled
onclick="enableButton4()" onclick="hidden" />
<input type="button" id="button4" value="button 4" disabled onclick="enableButton5()"
onclick="hidden" />
There's no need for a different function for each button. Make the ID of the next button a parameter of a single function. And to hide the first button, you need to set its display style, so pass this as another argument.
HTML:
<input type="button" id="button1" value="button 1" onclick="enableButton(this, 'button2')" />
<input type="button" id="button2" value="button 2" disabled onclick="enableButton(this, 'button3')" />
<input type="button" id="button3" value="button 3" disabled onclick="enableButton(this, 'button4')" />
...
JS:
function enableButton(thisButton, nextButton) {
thisButton.style.display = "none";
document.getElementById(nextButton).disabled = false;
}
I don't want to pass the value to the function, I want it to find the value itself.
<script type="text/javascript">
function add(buttonNum)
{
var elements = document.getElementsByTagName("button");
alert(document.myform.elements[buttonNum].value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(0)"/>
<input type="button" value="w" onclick="add(1)"/>
<input type="button" value="e" onclick="add(2)"/>
<input type="button" value="r" onclick="add(3)"/>
<input type="button" value="t" onclick="add(4)"/>
<input type="button" value="y" onclick="add(5)"/>
</form>
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
What approaches do I need to take? Something tells me that I need to get the length, run a for loop, and attach a handler. I'm just not sure on where to start.
simply pass this as parameter so that you can access all the attributes of the element but here only value:
<script type="text/javascript">
function add(elem)
{
alert(elem.value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(this)"/>
<input type="button" value="w" onclick="add(this)"/>
<input type="button" value="e" onclick="add(this)"/>
<input type="button" value="r" onclick="add(this)"/>
<input type="button" value="t" onclick="add(this)"/>
<input type="button" value="y" onclick="add(this)"/>
</form>
Compare:
getElementsByTagName("button");
<input>
You are getting the wrong element type.
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
Use addEventListener. You can identify the element clicked with event.target
e.g.
addEventListener('click', function (evt) {
if (evt.target.type == "button") {
alert(evt.target.value);
}
});
I want to change a hidden inputs value when I push on a button. Here's what I'm doing.
My hidden input
<input type="hidden" value="action" id="action" />
My buttons
<INPUT name=submit value=~#SUBMIT~ type="button" id="btnSubmit" class="submitDatum">
<INPUT name=delete value=~#DELETE~ type="button" id="btnDelete" class="submitDatum">
My javascript
$("#btnSubmit").click(function() {
$('#action').val('submit');
});
$("#btnDelete").click(function() {
$('#action').val('delete');
});
Could anybody help?
kind regards
<INPUT name=submit onclick="change_value('btnSubmit','submit')" value=~#SUBMIT~ type="button" id="btnSubmit" class="submitDatum">
<INPUT name=delete onclick="change_value('btnDelete','delete')" value=~#DELETE~ type="button" id="btnDelete" class="submitDatum">
function change_value(htmlid,value_change) {
$('#'+htmlid).val(value_change);
}
try this