I have two buttons and a text field. I want to update the display of the text field with the value of the buttons each time a button is pressed.
function displayTextfield() {
var amount;
amount = document.getElementById('btn').value;
document.getElementById('other-amount') = amount;
}
<button class="btn btn-default" id="btn" onclick='displayTextfield()' role="button" value="A">A</button>
<button class="btn btn-default" id="btn" onclick='displayTextfield()' role="button" value="B">B</button>
<input type="text" class="form-control donation-amount-input" placeholder="Other Amount" id="other-amount" onclick='displayTextfield()'/>
When I run the click the button I get the error:
Uncaught TypeError: Cannot read property 'value' of null
just add id="value" to <input type="text" class="form...
hit run snippet below
you can use a selector (I used the class btn) to target the buttons you are interested in. then take advantage of $(this) to get the value of the clicked button
$('.btn').click(function() {
$('#other-amount').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default" role="button" value="A">A</button>
<button class="btn btn-default" role="button" value="B">B</button>
<input type="text" class="form-control donation-amount-input" placeholder="Other Amount" id="other-amount" />
Related
I have editable table with EDIT button at bottom of 1 column, after clicking on EDIT , column becomes editable and 2 buttons(SAVE and CANCEL) will open.On click of CANCEL,I want to make that column NON EDITABLE as it was before.
HTML CODE:
<tr>
<td>
<button class="btn btn-info" ng-hide="editingData[row.scenarioName]"
ng-click="modify(row)">Edit</button>
<button class="btn btn-info" ng-show="editingData[row.scenarioName]"
ng-click="update(row);initFunction();"
style="background-color: #37918f; border-color: #37918f;"
ng-disabled="!isNumberValid">Save
</button>
<button class="btn btn-info">Cancel</button>
</td>
</tr>
Sorry I am unable to paste the photo because of points.
Try this on the click of cancel button:
<button class="btn btn-info" ng-click="showTextBoxes=false">Cancel</button>
Let your two textboxes be:
<input id="textbox1" type="text" ng-if="showTextBoxes"/>
<input id="textbox2" type="text" ng-if="showTextBoxes"/>
Don't forget to declare the boolean variable showTextBoxes=false; in your javascript/typescript!
<button class="btn btn-info" ng-click="isClosed = true">Cancel</button>
and in your Textboxes
<input id="textbox1" type="text" ng-disabled="isClosed"/>
<input id="textbox1" type="text" ng-disabled="isClosed"/>
I got it.Thanks Joe, I got hint from your answer.I need to put
ng-click="open = false"
and
ng-if="!open" in <span> having my data
I want to ask why won't my Javascript function do the enclosed jQuery function $.getJSON()?
HTML
<form action="" method="get">
<input id="search" name="search" type="text" class="map-search form-control input-sm"/>
<span class="input-group-btn">
<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" />
<span class="glyphicon glyphicon-search"></span>
</span>
</form>
Javacript
function nominatim_search() {
var query = document.getElementById("search").value;
$.getJSON('http://nominatim.openstreetmap.org/search/ph/'+query+'?format=json&limit=1&polygon_geojson=1&bounded=1&addressdetails=1', function (boundary) {
var json = boundary[0].geojson;
L.geoJSON(json).addTo(map);
});
}
It would enter the function however and alert the query, however the JSON won't load. I would outside of the function.
input isn't a templated tag, so you must close it without put other tag inside:
<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" />
The form <input> ..... </input> isn't valid for html
UPDATE
To solve the issue, it's mandatory to change the input type="submit", because the submit causes the reload of the page before the end of the function in the script. In the comment section of this answer, I suggest to use input type="button" and that did the trick. Other solutions like replace the input with a <button type="button"> tag are good enough to be considered as valid for this question, maybe a <button type="button"> tag is more compliant to the question needs because it's a templated tag, so it can be written with other tag inside.
You didnt close input tag, just add >:
<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()">
Here Just try Replacing your markups with these. Since your using Span for modifying the text of the button, use <button> instead of <input>.
HTML
<form action="" method="get">
<input id="search" name="search" type="text" class="map-search form-control input-sm">
<span class="input-group-btn">
<button class="map-search btn btn-default btn-sm" type="button" onclick="nominatim_search()" />
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</form>
Let me know if it helped with your problem.
So I have this code:
$(document).ready(function(){
if($('#proofAttach-filemanager').val().length !=0){
$('#download_now').attr('disabled', false);
}
else
{
$('#download_now').attr('disabled', true);
}
});
The field with id proofAttach-filemanager is filled up dynamically using elFinder every time I upload a file.
Since the code above is only running every time the page loads, I don't know how to update the download_now button to enable dynamically every time the field is filled (and without keyUp)
HTML Segment:
<div class="form-group col-md-12">
<label>Attachment</label>
<input type="text" id="proofAttach-filemanager" name="proofAttach" value="" class="form-control" readonly="">
<div class="btn-group" role="group" aria-label="..." style="margin-top: 3px;">
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default popup_selector">
<i class="fa fa-cloud-upload"></i> Browse uploads</button>
<button type="button" data-inputid="proofAttach-filemanager" id="download_now" class="btn btn-default download_now">
<i class="fa fa-cloud-download"></i> Download</button>
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default clear_elfinder_picker">
<i class="fa fa-eraser"></i> Clear</button>
</div>
Writing your logic inside the change event of that text box should work.
$(document).ready(function(){
toggleDownloadButtonAccess();
$('#proofAttach-filemanager').change(toggleDownloadButtonAccess);
function toggleDownloadButtonAccess(){
var $btnDownload = $('#download_now');
if($('#proofAttach-filemanager').val().length !=0){
$btnDownload.attr('disabled', false);
}
else
{
$btnDownload.attr('disabled', true);
}
}
});
I have a list of bootstrap buttons and also a search box and I want to implement a filter function(preferably in javascript) to filter the number of buttons:
The bootstrap code is here:
https://jsfiddle.net/7zyrdnab/
<div class="row">
<div class="col-lg-2">
<div class="panel">
<input type="text" id="search" placeholder="Type to search">
<br>
<button type="button" class="btn btn-secondary">AA1009</button>
<button type="button" class="btn btn-secondary">AA1010</button>
<button type="button" class="btn btn-secondary">BA1098</button>
<button type="button" class="btn btn-secondary">BB1890</button>
<button type="button" class="btn btn-secondary">C89761</button>
<button type="button" class="btn btn-secondary">CD1667</button>
<button type="button" class="btn btn-secondary">GG7830</button>
<button type="button" class="btn btn-secondary">GF65372</button>
<button type="button" class="btn btn-secondary">BH6537</button>
<button type="button" class="btn btn-secondary">HGB562</button>
<button type="button" class="btn btn-secondary">LK9063</button>
<button type="button" class="btn btn-secondary">CP9871</button>
<button type="button" class="btn btn-secondary">IRON87</button>
<button type="button" class="btn btn-secondary">ACT567</button>
<button type="button" class="btn btn-secondary">MPO760</button>
<button type="button" class="btn btn-secondary">GH5436</button>
<button type="button" class="btn btn-secondary">NBH894</button>
<button type="button" class="btn btn-secondary">GHFDF6</button>
<button type="button" class="btn btn-secondary">US4536</button>
<button type="button" class="btn btn-secondary">MO9854</button>
</div>
</div>
</div>
The filter should work like this:
if AA is typed, only the buttons with the text "aa" should be visible.
The only suggestion i got while searching online was use list.js but I was wondering if there can be a simpler javascript search implementation.
https://jsfiddle.net/Shuaso/qhku76bu/
The jquery:
var $button = $('.btn');
$('#search').keyup(function() {
var re = new RegExp($(this).val(), "i"); // case-insensitive
$button.show().filter(function() {
return !re.test($(this).text());
}).hide();
});
Basically you want to run the function each time the user types in the input to filter the elements. You are hiding all buttons that do not match the user input.
I am trying to do a function like I have one input field and two buttons for two different actions but fetch the same input value.
Button 1
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmit" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>
Button 2
<form id="formAddUser" name="search" method="post" action="/biodata">
<button id="btnSubmit" class="btn btn-info primary" type="submit">View BioData</button>
</form>
I have one text where I take the ID of pilgrim and provide two buttons 'view biodata' and 'view location'
How can I get the input value of one html element to pass to two javascript functions to perform some actions with the inputs?
I've typically put both buttons on the form and used jQuery to attach On Click events to change the action of the form. Try this ...
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmit1" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button id="btnSubmit2" class="btn btn-info primary" type="submit">View BioData</button>
</form>
Then, also add (jQuery must be loaded) ...
$("#btnSubmit1").on('click', function() {
$("#formAddUser").attr("action", "/maps");
});
$("#btnSubmit2").on('click', function() {
$("#formAddUser").attr("action", "/biodata");
});
The default action of the form submit will still operate, with different actions.
First: do you have two buttons with same ID? You need to choose different IDs, like btnLocate and btnBiodata.
Second: put the two buttons inside the same form. Sorry if I wrong, but I understand that you have two forms with same ID (again). So, you need just one form, somethink like this:
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnLocate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button id="btnBiodata" class="btn btn-info primary" type="submit">View Biodata</button>
</form>
Later, you need to create a JavaScript function. You know how to create? With JavaScript function you can call elements by ID. Example, if I want to change the text of btnLocate:
<script type="text/javascript">
function changeText() {
document.getElementById("btnLocate").innerHTML = New Text;
}
</script>
To add JavaScript on
Now, call the function on the click event of the button, for example:
<button id="btnLocate" class="btn btn-info primary" type="submit" onClick="changeText()">Locate Pilgrim</button>
This is simple example, with ID of element, you can change what you want. If you want to display something on screen, use alert("Text here") inside JavaScript function.
Hope I can help.
Bye,
Pasch.
Put everything in the same form and use the formaction attribute on one or both of the buttons.
formaction overrides the action attribute on the form tag if that particular button is clicked.
I'm on my phone right now, so it's hard to type up an example, but http://www.wufoo.com/html5/attributes/13-formaction.html has some good information.
<form method="post" action="/selector">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<button name="action" value="view-data" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button name="action" value="locate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>
In selector you can figure out what to do using value of the action.
You could combine both buttons and a text input into single form and use JavaScript (via onclick attribute) to change form action based on the button clicked.
<script>
function setMapsAction(){
formAddUser.action = "/maps";
}
function setBioAction(){
formAddUser.action = "/biodata";
}
</script>
<form id="formAddUser" name="search" method="post" action="see-script">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmitMaps" class="btn btn-info primary" type="submit"
onclick="javascript:setMapsAction()"
>Locate Pilgrim</button>
<button id="btnSubmitBio" class="btn btn-info primary" type="submit"
onclick="javascript:setBioAction()"
>View BioData</button>
</form>