Develop Reference

How to disable two submit buttons when one of them is clicked

I have two submit buttons in a cshtml file.
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept">Accept</button>
<button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse"Refuse</button>
I am trying to disable these two buttons when either one of them is clicked.
Is there a way to do so?

You can use the similar code for both buttons. onClick on one button disable the other button and so.
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept" onclick="return foo();">Accept</button>
function foo() {
document.getElementById("buttonAccept").disabled = true;
document.getElementById("buttonRefuse").disabled = true;
return true;
}

you can use javascript (especially jQuery) to reach your purpose.
but, actually when you submit your form, it means your form is sent to your server and it returns new result of your view, so the next steps will happen in the backend, your backend will be responsible to render the result in the way you want.
$('#buttonAccept').on("click",function() {
$('#buttonRefuse').attr("disabled", "disabled");
});
$('#buttonRefuse').on("click",function() {
$('#buttonAccept').attr("disabled", "disabled");
});

This should do it:
document.getElementsByName("SubmitButton")[0].disabled = true;
document.getElementsByName("SubmitButton")[1].disabled = true;
I wouldn't use the index directly though.

You can Do like this.
For Disabling the Button in Front-end using Pure JavaScript
<button onclick="document.getElementById('ButtonTwo').disabled = true;" type="submit" name="ButtonOne" id="ButtonOne">First</button>
<button onclick="document.getElementById('ButtonOne').disabled = true;" type="submit" name="ButtonTwo" id="ButtonTwo">Second</button>

firstly add jquery if your page don't have one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
then add on click event like this
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept" onclick="EnableDisable()">Accept</button>
<button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse" onclick="EnableDisable()">Refuse</button>
then you can disable both submit button on any of there click event like this
function EnableDisable() {
$(':input[type="submit"]').prop('disabled', true);
}

Don't hide date on button click when page refresh

I want to print the date when last time clicked on a button. It's actually working, but it's gone on page refresh but I don't want to hide it. How can I do it?
<input onclick="document.getElementById('demo').innerHTML=Date()" type="submit" name="Button" value="Button" />
<p id="demo"></p>

i hope this will work, you can check the codepen date and time of button clicked after clicking the button just refresh you will get the new date and time.
function storeDate() {
var currentDate = Date();
localStorage.setItem("dateofButton", currentDate)
}
(function(){
if(localStorage.dateofButton){
document.getElementById('demo').innerHTML = localStorage.dateofButton
}else{
// its empty
}
})()
<input onclick="storeDate()" type="submit" name="Button" value="Button" />
<p id="demo"></p>

You seem to have this at the end of a Form, so using the type submit submits the parent form, resulting in either a reload or a being redirected to the website specified in the action attribute of the form.
Either remove the type="submit" and make it a type="button" or return false from the onclick handler:
Input type button:
<input onclick="document.getElementById('demo').innerHTML=Date()" type="button" name="Button" value="Button" />
<p id="demo"></p>
Returning false:
<form action="something">
<input onclick="document.getElementById('demo').innerHTML=Date(); return false;" type="button" name="Button" value="Button" />
</form>
<p id="demo"></p>

The solution with localStorage, mentioned in comments, would look like this:
$(function() {
$("#demo").innerHTML = localStorage.date;
});
$("#buttonId").click(function() {
localStorage.date = Date();
});

Toggle button by passing jquery variable

I have in my html:
<input type="button" value="Start L/D" id="start_ld" name="start_ld" onclick='return(toggle_server_create("start_ld", "stop_ld", false));' />
<input type="button" value="Stop L/D" id="stop_ld" name="stop_fx_ld" style="display:none;" onclick='return(toggle_server_create("start_ld", "stop_ld", true));' />
In my javascript/jquery:
function toggle_server_create (start_id, stop_id, state){
var query = '#' + start_id +',' + '#' + stop_id;
var query_stop = '#' + stop_id
var query_start = '#' + start_id
// console.log(state);
// console.log(query_stop);
$(query).click(function() {
// console.log(query_start);
// console.log (this.name);
if ((this.name === start_id) && $(this).is(":visible") && state==false) {
console.log("Show stop")
$(query_stop).show();
}
else if ((this.name === stop_id) && $(this).is(":visible") && state == true) {
console.log("Show start")
$(query_start).show();
}
$(this).hide();
});
}
The toggle_server_create should accept the jQuery variables and toggle between start and stop accordingly. However, it doesn't function that way but instead has to be clicked twice to see the button changed and when clicked again it disappears. I'm new to JavaScript and I'm not sure how to fix this.

Your issue is a result of setting a click handler only after the user clicks the button. When your button is clicked toggle_server_create is run. When it runs, it creates a click handler for the two buttons that says, "when you click this button, execute everything in this function.
So, the first time you do this only your query variables are set, and then a click handler is created that will execute whenever one of those buttons is set. That is why the second time you click it works.
The code is a bit confusing so I'm not 100% sure what you are trying to accomplish, but that is what is causing it to only run on the second click.
If you are truly trying to just toggle between the buttons, consider something like this: https://jsfiddle.net/bb14xn7z/1/
Where your html is:
<input type="button" value="Start L/D" id="start_ld" name="start_ld"/>
<input type="button" value="Stop L/D" id="stop_ld" name="stop_fx_ld" style="display:none;"/>
And your javascript is:
$(function() {
$("#start_ld").click(function() {
$(this).hide();
$("#stop_ld").show();
});
$("#stop_ld").click(function() {
$(this).hide();
$("#start_ld").show();
});
});
Notice how I do not set onclick in the html, and instead set up the click handler in javascript on page load.

there are two problems here, HTML doesn't use apostrophe for attribute values
<input type="button" value="Start L/D" id="start_ld" name="start_ld" onclick="return toggle_server_create('start_ld', 'stop_ld', false));" />
and you don't have to pass those IDs since they're static, you could store them in a variable in the JavaScript or hardcode them into the function to give more flexibility

You can do it with jquery simple as this :)
https://jsfiddle.net/p1tmaoh7/
html
<div class="buttons">
<input type="button" value="Start L/D">
<input type="button" value="Stop L/D" style="display:none;">
</div>
jquery
$(document).ready(function(){
$('.buttons input').click(function(){
$('.buttons input').toggle();
});
});

trigger alert on button click with javascript

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);
}

Calling a function of a button from another button

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.