What I am trying to achieve is consistent behavior. When we click the input field the color picker shows up. I would like the same behavior when I am clicking the button that wraps it.
<button class="btn btn-small my-btn">
Color <input type="color" value="#33aabb">
</button>
JSFiddle.
Just defer to the input's .click()
http://jsfiddle.net/J73dK/1/
This should work:
<button class="btn btn-small my-btn" onclick="this.querySelector('input').click()">
Color <input type="color" value="#33aabb">
</button>
http://jsfiddle.net/C2wj2/
Related
Hello I have created a button with Materialize, but it only works for some areas of the button (primarily the area that surrounds the text). Any reason for this?
In my form all I do is add another input like this:
<input name="mySubmit" type="submit" value="Log In!" class="waves-effect waves-light btn" />
But when I click on the button only the boxed area actually recognizes it as input:
Thanks in advance for your help!
It seems that Materialize wraps the input tag in an "i" tag, which is then rendered into a button-looking element, with clickability limited to the text portion.
I was able to solve this by simply transforming my input tag into a button tag.
Initial code:
<input type="submit" value="List Employees" id="fetch-employees"
class="waves-effect waves-light btn">
What is then rendered in the browser:
<i class="waves-effect waves-light btn waves-input-wrapper" style="">
<input type="submit" value="List Employees" id="fetch-employees"
class="waves-button-input">
</i>
Solution:
<button type="submit" value="List Employees" id="fetch-employees"
class="waves-effect waves-light btn">List Employees</button>
I have a search modal that has two buttons I want to trigger on pressing enter. There is the initial "Search" button, and then a final "Submit" button.
The user is in an Angular Modal, puts a name into a search field (During this time, the Submit button is disabled) and then would press "Enter" to initiate the search. The search populates a table, after which the user clicks on a name to select and then the Submit button is enabled, and now I want a keypress of "Enter" to submit the selection.
I can get the first "Enter" to run the search functionality, but can't get it to move to the second button. Here is the code for my first button
<button type="submit" class="btn btn-default "ng-click="getNames(params)" value="Search">Search</button>
<button class="btn btn-default " type="button" ng-click="Clear(params)">Clear</button>
And then once the list of names populates, the user selects one and then should be able to press "Enter" again to trigger the Submit button.
<div class="modal-footer">
<input class="btn btn-default" type="submit" ng-click="OK()" ng-disabled="disableOK()"/>
<button class="btn btn-default" type="button" ng-click="Cancel()">Cancel</button>
</div>
Using <button type="submit" class="btn btn-default "ng-click="OK()" g-disabled="disableOK()"></button> Doesn't work here either.
I've looked everywhere since this seems like it would be a common problem, but I haven't seen a fix for this, mostly it's people with multiple buttons wanting to do different things on submit, not triggering with the "Enter" key.
Can I assign it to be the default when it becomes enabled?
I have been trying to put a font awesome or glyphicon (or even an image) inside a submit button. This quickly falls apart, and I need to implement another option. I have seen a few ways of doing this, but I don't know which is the "right" or better way.
The three contenders I've seen are:
divs
links
buttons
Which is the best way to get an image / icon inside a "submit" button?
Wouldn't all three need a JS component?
This is how bootstrap add glyphicon to button object:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Bootstrap button with glyphicon
The button option does not need JS. I have tested it and you can see a working example using Font Awesome here https://jsfiddle.net/mikhailjan/sf9s28et/5/ or just see the code below:
<form action="add_person.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" class="button">
<i class="fa fa-user-plus"></i> Add Person
</button>
</form>
Jonathan Anctil is correct, the button needs to have type="submit" for the form to work normally.
I am very new in JavaScript and I have the following problem.
I have this form:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button id="accept" name="ctrl" value="Accept" type="submit" class="acceptButton" onclick="sottometti(this)">ACCEPT ICON BUTTON</button>
<button id="cancel" name="ctrl" value="Cancel" type="submit" class="cancelButton" onclick="sottometti(this)">CANCEL ICON BUTTON</button>
<button id="sap" name="ctrl" value="SAP" type="submit" class="sapButton" onclick="sottometti(this)">SAP ICON BUTTON</button>
<input id="testId" name="test" type="hidden">
</form>
As you can see this form contains 3 different button. Clicking on one of this button it is performed the sottometti(this) Javascript script, that have the following code:
function sottometti(obj){
//document.getElementById('testId').value = obj.value;
document.getElementById('testId').value = obj.value[id]
document.getElementById('actionButton').submit()
}
This script should submit the previous form (the id of the clicked button) but it don't work. Why?
I think that it is trying to retrieve an actionButton that is not present in my form code.
Can you help me to make it work?
replace obj.value[id] with obj.id.
Try this alternative:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button name="ctrl" value="accept" type="submit" class="acceptButton">ACCEPT ICON BUTTON</button>
<button name="ctrl" value="cancel" type="submit" class="cancelButton">CANCEL ICON BUTTON</button>
<button name="ctrl" value="sap" type="submit" class="sapButton">SAP ICON BUTTON</button>
</form>
I have basically just removed all the JavaScript and the hidden input.
Now, on the server side, test it by simply outputting the value of the ctrl POST variable.
You should clearly see accept, cancel or sap according to the button that the user clicked. No JavaScript required, it's built-in, default functionality :)
On my web app I would like a page to have particular buttons hidden until certain events are triggered. I want "Save Changes" button to appear when "edit record" button has been clicked. How can I do this in JS or JQuery?
<input type="button" value="edit" id="editbutton" onclick="showbutton()" />
<input type="button" value="Save changes" id="savebutton" />
You can use JQuery('#editbutton').hide();
in the doccument.ready{}function
You need a trigger function which will invoke on the edit button click.
Now this function will make the save changes button visible
function showbutton()
{
JQuery('#savebutton').show();
}
<button id="b1" onclick="document.getElementById('b2').style.display='inline';">Edit Record</button>
<button id="b2" style="display:none;">Save Changes</button>
Demo: http://jsfiddle.net/74CxP/