When you press the button text disappears - html

He wants you press the button "Download" disappearing text.
<button class="btn btn-default" type="button" id="getInfo" onclick="getVideosInfo();">Download!</button>
<div id="infobox">
My TEXT
</div>

Here is what you can do, this code uses just 3 extra lines of jQuery code. Following is my solution:
$('#getInfo').click(function(){
$('#infobox').hide();
});
function getVideosInfo(){
//...
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" type="button" id="getInfo" onclick="getVideosInfo();">Download!</button>
<div id="infobox">
My TEXT
</div>
Here is an external fiddle supporting this.

you need of course java script... but then it works like the following
function getVideosInfo(){
infobox = document.getElementById("infobox");
infobox.style.display = "none";
}
<button class="btn btn-default" type="button" id="getInfo" onclick="getVideosInfo();">Download!</button>
<div id="infobox">
My TEXT
</div>

Related

Webview2 ExecuteScriptAsync to click button I want to click the button, but the code I'm using doesn't work

<div class="modal-footer">
<button class="btn cancel-red" type="button" ng-click="cancel()">Cancel</button>
<button class="btn confirm-blue" type="button" disabled="disabled=" ng-click="confirm())">Confirm</button>
</div>
I want to click the button, but the code I'm using doesn't work,Help me, please again!!
WebView21.CoreWebView2.ExecuteScriptAsync("document.getElementsByClassName('btn confirm-blue')[0].disabled='';") don't work.
WebView21.CoreWebView2.ExecuteScriptAsync("document.getElementsByClassName('btn confirm-blue')[0].click();") don't work.

Create an input link in the button

How can I input a link in the button when I press the button?
<div class="buttons">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</div>
Also you can trigger a link by JavaScript.
<button
onclick="window.location(this.getAttribute('data-link'))"
data-link="/hello">go to hello</button>
One way could be to use an anchor tag instead of the button and make it look like a button.
HTML:
<div class="buttons">
<a class="btn custom-btn position-bottom-right"> Add to cart</a>
</div>
CSS:
.custom-btn {
border: medium dashed green;
}
Alternatively, you could do:
<button class="btn custom-btn position-bottom-right" onclick="location.href='yourlink.com';"> Add to Cart </button>
Try this:
<a href='http://my-link.com'>
<button class="GFG">
Click Here
</button>
</a>
You can use the anchor tag and provide a Bootstrap class for the button, like,
<a class="btn btn-success" href="link"> Add to Cart</a>
If the label "Add to cart" matches the expectations, we'd be talking about a form. A form that causes an element to be added typically uses the POST method:
<form class="buttons" method="post" action="/path/to/add/to/cart/script">
<input type="hidden" name="product" value="123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Alternatively, there's GET as well:
<form class="buttons" method="get" action="/path/to/add/to/cart/script?product=123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Since GET doesn't carry additional payload, you'll get the same effect with a regular anchor:
Add to cart
You don't want search engine spiders to populate carts, so you typically leave GET for data fetching.

How do I make these buttons inline? HTML ActionLink or Html.BeginForm issues

I'm trying to make these buttons display next to each other, I'm guessing I would want it to be an inline-block style so there is some space between them. I have tried to add display: inline and display: inline-block (not at the same time) to #being-survey-btn, but no luck there. I've also attempted to add those properties to .btn but no luck there either. I've tried putting <span> tags around all of it (inside the divs) as well as putting <span> tags around the <button> tags and I've come up with nothing. Using bootstrap.
My cshtml:
<div id="finish-survey-container">
<div id="finish-survey-items">
#using (Html.BeginForm("MakePDF", "HabitatManagement"))
{
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
}
#if (ViewBag.Type == "Habitat Management")
{
using (Html.BeginForm("Index", "HabitatManagement", new { userId = ViewBag.UserID }))
{
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
}
}
</div>
</div>
I have also attempted styling through an ActionLink (this is actually how I originally had it before trying out Html.BeginForm syntax):
#Html.ActionLink("Save as PDF", "MakePDF", null, new { #id="begin-survey-btn", #class = "btn btn-default btn-lg", #style = "display: inline-block"})
I know I must be missing something rather obvious. Anybody have an idea?
EDIT
Generated HTML:
<div id="finish-survey-container">
<div id="finish-survey-items">
<form action="/HabitatManagement/MakePDF" method="post">
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
</form>
<form action="HabitatManagement?userId=#" method="post">
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
</form>
</div>
</div>
Each Html.BeginForm creates a form element, so your code will end up like
this
<form>
<button>..</button>
</form>
<form>
<button>..</button>
</form>
Your problem is that the form elements are by default block. That is what you need to fix, and to do that you should set these form elements to be display:inline-block
Something like
#finish-survey-items form{display:inline-block;}

Click on submit button, should disable the checkbox button Angular JS

<td>
<input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" ng-click="onacknowledgedClick(alert)">
</td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
When I click on checkbox button, the text textfield with submit button will be popped up. After entering the comments on textfield, when the user clicks on submit button, the checkbox should get disabled. Can anyone give me some inputs on this?
How to disable the checkbox button, once when I click on Submit button?
I'd suggest jQuery:
$("#submit").click(function(){
$("#alertAcknowledged").attr("disabled", true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" id="alertAcknowledged" ng-click="onacknowledgedClick(alert)"></td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)" id="submit"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
You have to use JavaScript to do this. Make an event listener for the submit button that disables the checkbox and the cancel button that does display: none; to the text input. For info about event listeners visit this site: Event Listeners
This is what you should do:
document.getElementById("submit").addEventListener("click", function() {document.getElementById("alertAcknowledged").disabled = true;})
document.getElementById("cancel").addEventListener("click", function() {document.getElementById("text").style.display = "none";})
<td><input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" id="alertAcknowledged" ng-click="onacknowledgedClick(alert)"></td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" id="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)" id="submit"> Submit </button>
<button type="button" id="cancel" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
I would avoid using jquery as much as possible in angular. Here's a good read http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/
So, it looks like your ng-disabled="alert.acknowledged" but ng-click="alert.acknowledged" as well. This means when you click the radio button, alert.acknowledged is set to true, so it gets disabled.
You probably want a different value in ng-disabled, maybe ng-disabled="disableRadioBtn", then in your submit controller you can set $scope.disableRadioBtn = false;
add disableCheckbox as a paramet and set it inside the click function.
HTML
<td>
<input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.disableCheckbox" ng-click="onacknowledgedClick(alert)">
</td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
CONTROLLER
$scope.onacknowledgedClick = function(alert){
alert.acknowledgeInProgress = true;
}
$scope.saveAlert = function(alert) {
/*$scope.alert.acknowledged = true;*/
alert.disableCheckbox = true;
alert.acknowledgeInProgress = true;
var alertUrl = $incidentsUrl+"/"+alert.alertForIncident.incidentID+"/alerts/"+alert.alertID;
$http.put(alertUrl, alert).then(function(result) {
alert.acknowledgeInProgress = false;
});
}

HTML/CSS Span Tag causing Bootstrap Modal Footer buttons to lower

On my website I used a span tag to pull a button and a text input left from the footer of a twitter bootstrap modal display, the pictures will show this.
For some reason the two buttons on the left and lower than the two on the right, how can I raise the two on the left?
HTML:
CSS:
.modal-footer .floatLeft {
float: left;
}
HTML:
<div class="modal-footer">
<span class="floatLeft">
<input placeholder="out of" class='changeMaxMark' style='margin-top:9px;'id='maxMarkBox' name='maxMarkBox' type='text'>
<button id='changeMaxMark' name='changeMaxMark' class='btn btn-success'> Set All </button>
</span>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="markSave" onClick="togleMarkSave()">Save Changes</button>
</div>
link to picture 1(http://snag.gy/i5FRT.jpg)
link to picture 2(http://snag.gy/2Y9Q2.jpg)
First of all remove the span. Bootstrap has specific CSS classes to pull things left. pull-left which I added to the first two elements.
The edited HTML is this:
<div class="modal-footer">
<input placeholder="out of" class='changeMaxMark pull-left' id='maxMarkBox' name='maxMarkBox' type='text'>
<button id='changeMaxMark' name='changeMaxMark' class='btn btn-success pull-left'> Set All </button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="markSave" onClick="togleMarkSave()">Save Changes</button>
</div>
You also had a specific style on the input field to push margin-top down 9px that is unecessary.
No custom CSS classes or additional markup is necessary.
Here is the working JSFiddle