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;
}
Related
I have a for each loop in my HTML code which will display multiple buttons on the page. I have used JavaScript so that whenever a button gets clicked the text color and background should change. However, this seems to only get applied to the first button and not any which come after.
HTML:
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
JavaScript:
function status() {
if(event.target == document.getElementById("btn")) {
document.getElementById("btn").value = "Copied to clipboard";
document.getElementById("btn").disabled = true;
document.getElementById("btn").style.color = 'white';
document.getElementById("btn").style.background = 'gray';
}
}
I am fairly new with JavaScript so I am not sure if there is something I am missing in the JavaScript portion of the code or if it's the loop that is causing this to not work. I need to use a loop since I am also displaying other information which requires a loop.
Your main issue seems to be that you are using the same id on multiple elements. I suggest that you remove these ids.
Instead, I think you would benefit by using the this keyword. You can use this by passing it into your status function in the onclick event listener:
onclick="status(this)"
Now, the passed in variable clickedBtn is referencing the button which you clicked, and so you can change its properties accordingly.
Take a look at the snippet below to get a better understanding:
function status(clickedBtn) {
clickedBtn.value = "Copied to clipboard";
clickedBtn.disabled = true;
clickedBtn.style.color = 'white';
clickedBtn.style.background = 'gray';
}
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(this)">
<br />
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(this)">
<br />
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(this)">
I prefer you to use the addEventListener in javascript for security reasons. and also you are iterating the button so you need to use class for it not id coz id is unique, it will return you an error in background. so i edit your code. and this works for me.
HTML
<input class="big-button" type="button" value="Apply this promotion" id="btn">
<input class="big-button" type="button" value="Apply this promotion" id="btn">
<input class="big-button" type="button" value="Apply this promotion" id="btn">
<input class="big-button" type="button" value="Apply this promotion" id="btn">
<input class="big-button" type="button" value="Apply this promotion" id="btn">
Javascript
(function() {
const buttons = document.getElementsByClassName("big-button")
Array.prototype.forEach.call(buttons, function(element) {
element.addEventListener("click", function() {
this.value = "Copied to clipboard"
this.disabled = true
this.style.color = "white"
this.style.background = "gray"
})
})
})()
function status() {
event.target.value = "Copied to clipboard";
event.target.disabled = true;
event.target.style.color = 'white';
event.target.style.background = 'gray';
}
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
The status function always checks for the same button ID: "btn". Hence it alters the style of the same button element. Modify your function to the below:
function status() {
event.target.value = "Copied to clipboard";
event.target.disabled = true;
event.target.style.color = 'white';
event.target.style.background = 'gray';
}
Now, try with the same HTML. The above function alters the style of the clicked element only.
I have a script that builds a html box to input values to use in the script afterwards. Before I used input text. But the values inserted were often wrong, which caused annoyance by the users. And me.
So I want to use a button instead of text input. The button has to toggle between two or more values when clicked. Then when I submit the form, the values have to be passed to the script.
But the onclick doesn't seem to work. What am I missing?
The variable "vervanger" is put in place of "vervanger2" in the html box.
I get the button in my browser but nothing happens when I click on it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lijst=[];
function selector(){
for (i=0;i<vervanger1;i++){
if (document.getElementById(i).checked==true){
lijst.push(document.getElementById(i).value);
}
if (document.getElementById(i).name.toString().split(":")[0]=="overzicht"||document.getElementById(i).name.toString().split(":")[0]=="evalueer"){
lijst.push(document.getElementById(i).name+":"+document.getElementById(i).value);
}
}
google.script.run.handleFormSubmit(lijst);
}
function change(e){
var btn = document.getElementById(e);
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
}
</script>
</head>
<body>
<br />
<br />
<FORM NAME="myform" onSubmit="selector()">
<input type="button" onclick="change(0)" size="3" id="0" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<br />
<br />
<input name="Submit" type="submit" value="OK" />
</FORM>
</body>
You have got your button type wrong.
<input name="Submit" type="submit" value="OK" />
This will post your form.
Change it to "button" and you should be good to go..
I found a solution. Thanks to various other posts on Stackoverflow.
Now I'm able to toggle between values by pushing the button.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lijst=[];
function selector(){
for (i=0;i<vervanger1;i++){
if (document.getElementById(i).checked==true){
lijst.push(document.getElementById(i).value);
}
if (document.getElementById(i).name.toString().split(":")[0]=="overzicht"||document.getElementById(i).name.toString().split(":")[0]=="evalueer"){
lijst.push(document.getElementById(i).name+":"+document.getElementById(i).value);
}
}
google.script.run.handleFormSubmit(lijst);
}
function change(e,choices){
var btn = document.getElementById(e);
var chs=choices.toString().split("/");
var check="nee";
for (c=0;c<chs.length;c++){
if (chs[c]===btn.value){
check="ja";
var nr=c;
}
}
if (check=="ja"&&nr<chs.length-1){
btn.value=chs[nr+1];
}else{
btn.value=chs[0];
}
}
</script>
</head>
<body>
<br />
<br />
<FORM NAME="myform" onSubmit="selector()">
<input type="button" onclick="change(0,'A/B/C')" size="3" id="0" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<input type="button" onclick="change(1,'A/B/C')" size="3" id="1" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<br />
<br />
<input name="Submit" type="submit" value="OK" />
</FORM>
</body>
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/
I had an I Agree Checkbox that when checked or unchecked it used JS to toggle the Disabled setting on a button with id="submit1". However, I added more buttons and now it needs to toggle all of these buttons rather than just the first, so the ID isn't working anymore.
Current Code for checkbox:
<input type="checkbox" checked id="agree" name="agree" value="ON" onclick="javascript: if(document.getElementById('agree').checked==true){document.getElementByID('submit1').disabled=false;}else{document.getElementByID('submit1').disabled=true;}">
And for button:
<button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>
So, I have added more buttons, so I need 2 things:
I need JS or jquery that will loop through and toggle EACH button when the box is checked rather that just the single button (first button with the ID).
On page load, I also need it to check and see if the box is checked and if not, loop through and disable all of those buttons.
Thanks so much for any help you can give!!
Craig
HTML:
<input type="checkbox" checked id="agree" name="agree" value="ON">
<button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>
<button onclick="do_file_form_submit(7);" id="submit2" name="submit2" class="custombutton">Button Number 2</button>
jQuery:
$('#agree').change(function () {
if ($(this).is(":checked")) {
$('button').attr("disabled", false);
} else {
$('button').attr("disabled", true);
}
});
Here is the fiddle: http://jsfiddle.net/shahe_masoyan/UpxzB/3/
Check this out Your working page
function checkStatus() {
if ($('#agree_again').is(":checked")) {
$(".custombutton").attr('disabled', false);
}
else {
$(".custombutton").attr('disabled', true);
}
}
$("#agree_again").change(function () {
checkStatus();
});
You can call this checkStatus function on body load to check whether its checked or not on page load .
asign same classname for all button.
then use the class name for selector.
document.getElementByClassName("custombutton").disabled=false
Try this code. Hope this resolve your problem
$(function(){
//$("#agree").is(":checked")
EnableDisableButton(!$("#agree").is(":checked"))
$("#agree").click(function(){
EnableDisableButton(!$("#agree").is(":checked"));
})
function EnableDisableButton(isEnable){
$(".custombutton").attr("disabled",isEnable);
}
});
very simple
<input type="checkbox" checked="checked" id="agree" name="agree" value="ON"
class="agree_chk" />
<input type="button" class="button" id="button1" value="button1"/>
<input type="button" class="button" id="button1" value="button2"/>
<input type="button" class="button" id="button1" value="button3"/>
<input type="button" class="button" id="button1" value="button4"/>
and the javascript is
$(document).on('click','#agree',function() {
$('.button').attr({disabled:!$(this).is(':checked')})
});
js fiddle http://jsfiddle.net/5V2Y4/
try this code
<input type="checkbox" checked id="agree" name="agree" value="ON" onclick="change()">
<input type="button" id="button1">
<input type="button" id="button2">
<input type="button" id="button3">
<script>
$(document).ready(function() {
change();
});
function change() {
var i = 1;
for (i = 1; i <= 3; i++) {
var btnid = "button" + i;
if (document.getElementById("agree").checked) {
document.getElementById(btnid).disabled = false;
} else {
document.getElementById(btnid).disabled = true;
}
}
}
</script>
you can change the limit as the number of buttons changes
I have this code
<script>
function cA( url )
{
document.myform.action = url;
}
</script>
<input type="whatever" name="whatever" id="whatever" />
<button class="whatever-button" id="defaultAction" value="Go for it" name="whatever" type="submit" onClick="cA('whatever.php#anchor')" >Go for it
</button>
When you click the Go for it-Button, whatever.php#anchor is being loaded. How do I need to change the input tag's elements for it to execute the same cA('whatever.php#anchor') as the button click?
So when a user presses enter in the field, the site whatever.php#anchor should be loaded or more specifically, cA('whatever.php#anchor') be executed.
The page has more buttons, so making one button the default button does not work.
PS:
Wrapping all in one form does not work as the page's structure is
<form>
<script>
function cA( url )
{
document.myform.action = url;
}
</script>
<input type="whatever1" name="whatever1" id="whatever1" />
<button class="whatever1-button" id="defaultAction1" value="Go for it" name="whatever1" type="submit" onClick="cA('whatever.php#anchor1')" >Go for it
</button>
<input type="whatever2" name="whatever2" id="whatever2" />
<button class="whatever2-button2" id="defaultAction2" value="Go for it" name="whatever2" type="submit" onClick="cA('whatever.php#anchor2')" >Go for it
</button>
<input type="whatever3" name="whatever3" id="whatever3" />
<button class="whatever3-button" id="defaultAction3" value="Go for it" name="whatever3" type="submit" onClick="cA('whatever.php#anchor3')" >Go for it
</button>
...
</form>
You can try this:
<input type="whatever" name="whatever" id="whatever" onkeydown="if (event.keyCode == 13) {cA('whatever.php#anchor');}" />
Check this post for more information.