How to enable a button based on click even - html

Can anybody help me how to enable a button based on a click event.
I need a scenario, where we have 2 buttons, Button1 and Button2(disabled by default).
Upon clicking on Button1, say after 10 seconds my Button2 should be enabled.
Where i am doing wrong in the below code? My Button2 is not enabled after i click on Button1. Can anybody help me.
Thanks in advance,
Uday
<html>
<Head>
<Title>Synchronization</Title>
</head>
<script>
function PleaseWait()
{
document.getElementsByName("SampleButton2").disabled=false;
}
</script>
<body>
<input type="button" name="SampleButton1" value="Button1" onclick="PleaseWait()">
<input type="button" name="SampleButton2" value="Button2" disabled>
</body>
</html>

You can do it with jQuery.
Inside $(document).ready() method, define a function PleaseWait(), where you can write the code to remove disabled attribute form your button.
Then when any user clicks on button1, trigger a function to call pleaseWait() function after a delay using setTimeout() method. I used 5 milliseconds for delay. You can increase or decrease it.
<!DOCTYPE html>
<html>
<head>
<title>DOM Level 0 Events Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<input type="button" name="SampleButton1" value="Button1">
<input type="button" name="SampleButton2" value="Button2" disabled>
<script type="text/javascript">
$(document).ready(function(e){
function PleaseWait(){
$('input[value="Button2"]').removeAttr('disabled');
}
$('input[value="Button1"]').click(function(e) {
setTimeout(PleaseWait, 5000);
});
});
</script>
</body>
</html>

try this
document.getElementsByName("SampleButton2").removeAttr('disabled');
or you can use
$('SampleButton2').prop('disabled', false);

Related

Clicking on button to redirect to another html page

I have tried many diff ways like using forms or script but i still cannot get it. this are my current codes. Thank you
<button name="nextpg" onclick="redirect()" class="mb-3 signup-btn" >Reset my password</button>
<script type="text/javascript">
function redirect()
{
var url = "http://127.0.0.1:8080/cfmemail.html";
window.location(url);
}
</script>
you can try this. It might do the trick for you
<input type="button" onclick="window.location.href = 'http://127.0.0.1:8080/cfmemail.html';" value="Redirect"/>
Use this code:
<!DOCTYPE html>
<html>
<body>
<button onclick="redirect()">Redirect</button>
<script>
function redirect() {
location.replace("http://127.0.0.1:8080/cfmemail.html")
}
</script>
</body>
</html>

Page reloads after form submission using ng-submit or ng-click, Changing button types is also not working

I have made a form and I need to submit the form but whenever I tried to do the same the page reloads and does nothing! I tried both ng-submit <form> attribute and the ng-click as a <button> attribute! I also tried changing the button type from "submit" to "button" then also I get the same result!
Any help would be seriously appreciated!
Thanks!
hope this simple plunker example helps
https://plnkr.co/edit/5q9149KSs7qJH0R32NAS?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="App" ng-controller="Ctrl">
<form ng-submit="myFunc()">
<input type="text" ng-model="data">
<input type="submit">
</form>
<p>{{submited}}</p>
<script>
var app = angular.module("App", []);
app.controller("Ctrl", function($scope) {
$scope.submited = [];
$scope.myFunc = function () {
$scope.submited.push($scope.data);
}
});
</script>
</body>
</html>

How do I display text above after submitting it into a textbox HTML

I'm trying to create an area in which you can enter text into a text box and display the written text onto a box above in HTML. I'm very new to HTML so any help will be greatly appreciated. I drew a beautiful picture of what I'm trying to make.
The best way to deal with this situation is use Javascript or jQuery which is javascript's library itself. Let me show you how you should do it in jQuery
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#form-to-be-submitted").click(function(){
$(".whatever-styling-you-want").html($("#textBox").val());
});
});
</script>
<div class="whatever-styling-you-want">
</div>
<!-- Your text box and submit button -->
<div>
<input type="text" id="textBox" placeholder="Please input your text here..."/>
<input id="form-to-be-submitted" value="submit" type="button"/>
</div>
Javascript's way is also the same. No need to use the click function but use javascript's on function with the 'click' event.
I hope this helps.
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<p id="x"></p><br>
<input id="value"><input type="button" value="submit" onClick="getV()">
<script>
function getV(){document.getElementById("x").innerHTML = document.getElementById("value").value;}
</script>
</html>

browser back to previous html section

I have a page with many section like below.
When I travel from this page to anothe-page-2.html, it is possible when user click back button (from the browser) return and jump to <a name="test 2"></a> ?
try this any of two types...
<html> <head> <script>
function goBack() {
window.history.back() }
</script> </head> <body>
<input type="button" value="Back" onclick="goBack()">
</body> </html>
back

Mootools - why not run?

you can test my code , when i click buton , we will get 2 link
click on first link , not alert
click on second link , show alert
why first link not alert, how to it can alert ?
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("mootools", "1.1.2");</script>
<script>
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('content').innerHTML = $('test').innerHTML;
});
});
</script>
</head>
<body>
<input id="button" type="button" name="button" value="Click"/>
<div id="content">
</div>
<div id="test">
<script>
function test(){
$('a-content').addEvent('click', function(){
alert(1);
});
}
window.addEvent('domready', function(){
test();
});
</script>
<a id="a-content" href="#">CLICK HERE</a>
</div>
</body>
</html>
When injecting HTML on the fly events aren't carried over unless you use event delegation. If you don't use event delegation the event will only be on the original element. See http://mootools.net/docs/more/Element/Element.Delegation
You'll need to do something like this. $('body').addEvent('click:relay(#a-content)', function(){...}); Where the body would capture the click event and delegate it to any element with the id of "a-content".
Also by setting the content like this $('content').innerHTML = $('test').innerHTML; you will have duplicate elements with the id "a-content" this is wrong. HTML id's should be unique. Try classing stuff that you'll reuse instead.