I have two buttons:
<button onclick=initialize() id="1" data-role="button" data-mini="true" data-corners="false" data-theme="b">Show My Position</button>
<button onclick=calcRoute() id="2" data-role="button" data-mini="true" data-corners="false" data-theme="b">Evacuate !</button>
I want to have the second button disabled by default, and have it enabled if clicking on the first button. How do I accomplish this?
Please see the following answers to questions:
Disable Buttons in jQuery Mobile
How to disable html button using JavaScript?
The simplest approach would be (just a pure example w/out taking into consideration browsers, etc):
<html>
<head>
<script>
function enableButton2() {
document.getElementById("button2").disabled = false;
}
</script>
</head>
<body>
<input type="button" id="button1" value="button 1" onclick="enableButton2()" />
<input type="button" id="button2" value="button 2" disabled />
</body>
</html>
Related
I tried using solution on the web but can't get working I want to display tooltip of a disabled button. I use materialized css.
Here is my html of button:-
<div class="input-field col s7">
<button id="btn" class="btn blue-grey tooltipped" data-tooltip="Button will be Enabled after file upload" disabled>Submit</button>
</div>
Actually you can't enable the tooltip for the disabled <button> or <a>, but you can do a trick and wrap your button inside a <span> then add the tooltip to that <span> element instead of <button> itself. So you have to manage the <span> tooltip in enabling/disable events.
So your code should be something like this:
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".tooltipped");
var instances = M.Tooltip.init(elems);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="input-field col s7">
<span class="tooltipped" data-tooltip="Button will be Enabled after file upload">
<button id="btn" class="btn blue-grey" disabled>Submit</button>
</span>
</div>
Sorry I'm not sure how to phrase this properly
Is it possible to do this?:
Example I want to have 4 buttons/divs for the user to click on
Maybe with a form like this?
input value="Yes" name="response"
input value="No" name="response"
input value="Maybe" name="response"
input value="Later" name="response"
If the user clicks "Yes" then it will form submit that data with "Yes" to be stored in the database slot of "response"
So it's like 4 boxes with "Yes" "No" "Maybe" and "Later" which can be click by the user after which will be submitted like a form
Sorry once again as I'm lost as to how to do this(hopefully the solution is simple?)
Thanks in advance!
Hi i have one idea to do this With JQuery
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div>
<input class="btn1" type="button" value="Yes" />
</div>
<div>
<input class="btn1" type="button" value="No"/>
</div>
<div>
<input class="btn1" type="button" value="Maybe"/>
</div>
<div>
<input class="btn1" type="button" value="Later"/>
</div>
<div id="display">
</div>
<script>
$(document).ready(function() {
$('.btn1').click(function(e) {
e.preventDefault();
document.getElementById('display').innerHTML=$(this).val();
});
});
</script>
</body>
</html>
Fiddle link: https://jsfiddle.net/pranavadurai/jbxdbkLk/2/
There are two different ways you could approach this. A form can have multiple submit buttons, via <input type='submit' name='custom_name' .... You could also have a drop down (<select>) that the user selects from the options you present them, and have a separate submit button.
Examples
Multiple Submit Buttons
<form id="my_form" ...>
<!-- actual form contents -->
<input type="submit" name="submit_value" value="Yes" />
<input type="submit" name="submit_value" value="No" />
...
</form>
In this situation, the POST/GET data for submit_value would be set to whatever the user clicked.
Dropdown
<form id="my_form" ...>
<!-- actual form contents -->
<!-- drop down -->
<select name="my_option">
<option value="yes">Yes</option>
<option value="no">No</option>
...
</select>
<!-- normal submit button -->
<input type="submit" value="Submit" />
</form>
In this case, the POST/GET data for this form would be my_option for the choice you were asking about.
i will propose a solution evolving jQuery, HTML and some database
<html>
<head>
<title>Hi folk</title>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//Here goes your database query
});
$("#btn2").click(function(){
//Here goes your database query
});
$("#btn3").click(function(){
//Here goes your database query
});
$("#btn4").click(function(){
//Here goes your database query
});
});
</script>
</head>
<div>
<div>
<input id="btn1" type="button" value="Yes" />
</div>
<div>
<input id="btn2" type="button" value="No"/>
</div>
<div>
<input id="btn3" type="button" value="Maybe"/>
</div>
<div>
<input id="btn4" type="button" value="Later"/>
</div>
</div>
</html>
This is my HTML so far
<button type="button" formaction="contact.html">Get In Touch!</button>
For some reason when I click on the button in a browser it doesn't take me to the contact.html page. All the pages that came up in google helped me learn new button attributes, but I couldn't figure out how to make the page redirect on click.
If you are using bootstrap, you can use this to do it for you:
Link Button
See http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
Try the following:
<input type="button" onclick="location.href='contact.htm';" value="Contact" />
The better way is that you surround the above code with <form></form>.
Try these methods:
<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
Click Me
</button>
<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
Click Me
</button>
<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
Click Me
</button>
<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
<input type='submit' value='Click Me'/>
</form>
<!-- Using html anchor tag -->
<a href='https://stackoverflow.com'>
<button>Click Me</button>
</a>
How about this?
<button type="button">Get In Touch!</button>
Does anyone knows how to open, on a new window, the result of a input type="button" with onclick= ?
Here is my code, that opens the result on the same window:
<input type="button" name="enviar" id="enviar" class="roundShadow bkazul" value="ENVIAR" onclick="havingFunLearningMailValida(this.form.id)" />
Any help would be appreciated!
Thank You!
Here is the sample code of using window.open
<input type="button" onclick="javascript:window.open('http://www.yahoo.com')" value="Click" />
Fiddle Also
<html>
<head>
<script type="text/javascript">
function openTab()
{
window.open();// can insert any web links inside the open under the double quotes
}
</script>
</head>
<body>
open a new tab<input type="button" value="new tab"
onclick="openTab()"/>
</body>
</html>
I'm having 2 buttons to load 2 separate forms, events and offers. when a user clicks on a button i want to load the relevant html form and make the buttons disappear.
events loads events.html
offers loads offers.html
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" />
<input name="c_offer" class="clr" type="button" value="offer" />
</form>
</div>
load the form to
<div id="form_body"> </div>
i want make sure that the buttons are disappear after the user has clicked.
Can someone give an idea how to do it?
You need to use $.load() to get the HTML from your external HTML pages. Try something like this:
HTML
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" id="eventsBtn" />
<input name="c_offer" class="clr" type="button" value="offer" id="offersBtn" />
</form>
</div>
jQuery
$("#eventsBtn").on('click', function() {
$("#form_body").load('events_loads_events.html');
});
$("#offersBtn").on('click', function() {
$("#form_body").load('offers_loads_events.html');
});
More information on load();
If you use jQuery then this is quite easy:
$('#form1 input').on('click', function(event) {
var $target = $(event.target);
$('#form_body').load($target.data('url'));
$('#form1').hide();
})
You would have to change you html into this:
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" data-url="http://www.path-to-your-form-html-for-this-button.com/"/>
<input name="c_offer" class="clr" type="button" value="offer" />
</div>