I am trying to make a button on user profile that will allow the user to choose file and after the file has been chosen, it will be uploaded with the same button.
I want the button appearance as that defined by the code below:
<button class="btn btn-primary form-control"><span class='glyphicon glyphicon-camera'></span> Change Photo</button>
I want to change it into:
<input type='Image' onchange="this.form.submit()"/>
But with bootstrap classes and <span class='glyphicon glyphicon-camera'></span> Change Photo instead of 'submit' text on button.
How can I do it?
If you just want to change the text text inside of the button you can use JavaScripts innerHTML function to set the value, but you will have to include the span.
button = getElementsByClassName("btn btn-primary form-control")[0];
button.innerHTML="<span class='glyphicon glyphicon-camera'></span> Change Photo";
This assumes that you only have one object with that exact class on the page. If you have more you will have to add the logic to select the correct button.
If you need to do something with the file that is loaded you will need to have some sort of server side language or scripting language since this can not be done in HTML and CSS alone.
Related
I have a puppeteer implementation I'm working on to fill out a form on a website that (sadly) doesn't offer an API.
Everything goes great until I use this code to click the second button on a list of buttons:
await page.click('#calculateCharge'); // open the set values dialog
Reason being, the #calculateCharge id is used multiple times on the page, like this:
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 80.00</span></button>
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 35.00</span></button>
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 42.00</span></button>
Puppeteer clicks the first button every time because whoever wrote the HTML didn't id the buttons dynamically. The ids are all the same, so I don't know how to access the 2nd or third buttons. I also don't have access to the HTML source (not my page), so I can't fix it from the other side.
Any ideas?
I solved my issue by using xPaths instead of ids.
First, right click on the button in your browser and click inspect. In the inspector's HTML tree, right click on the highlighted HTML and copy the full xPath.
Second, set the element as a variable using the copied xPath. Note the x after the $.
let butt = await page.$x('xPath')
Last, click the button by referencing the first position of the variable's array.
await butt[0].click()
Copy/paste from my production file:
let butt = await page.$x('/html/body/div[1]/div/main/div[1]/div[2]/div[2]/div/div/div/form/div[1]/div[2]/table/tbody/tr[5]/td[2]/div/div/button');
await butt[0].click();
I have an HTML input button in my ColdFusion application that is submitting a form. I am trying to include a Font Awesome icon along with the text of the button. The only way I can specify the Unicode without throwing an error is to double out the hash character.
<input class="stylized_btn" tabindex="0" type="submit" name="save2"
id="save2" value=" &##xf0c7; Save This Ticket"
onclick="disableSaveButtonClick(event);" />
However, instead of showing the icon, it just shows a square.
This seems like it's a quirk with ColdFusion not recognizing my Unicode character because of the double hashtag, but that's just a guess. I have other button elements on my page that are properly displaying the Font Awesome icons correctly, so I know it is not an issue with my font definition. I am unsure where exactly I am going wrong here. Can anyone help shed some light?
Updated code using button tag instead.
HTML button
<button id="saveOnlyButton" name="save" class="stylized_btn">
<i class="fas fa-save"> </i> Update Ticket
</button>
JavaScript
window.onload=function(){
var SaveButton = document.getElementById("saveOnlyButton");
SaveButton.addEventListener("click", disableSaveButton);
}
//Save Button Logic
function disableSaveButton() {
console.log("Save button clicked");
document.getElementById("submitType").value = "save";
document.getElementById("saveOnlyButton").innerHTML = "Please Wait...";
document.getElementById("saveOnlyButton").disabled = true;
document.getElementById("autoSumForm").submit();
}
Have you tried using a BUTTON tag? (We stopped using input:submit buttons.)
We usually use <button type =“submit”><i class=“fa fa-lg fa-my-icon”></i > Label Text</button>, but you should be able to use the HTML entity.
Instead of using an input element, use a button. The default behavior of a button is to submit a form.
<button class="stylized_btn btn-default" tabindex="0" id="save2" onclick="disableSaveButtonClick(event);"><i class="fa fa-save"></i> Save This Ticket</button>
(I added btn-default in case you're using bootstrap)
It's not a quirk in ColdFusion as you suggest. ColdFusion is behaving exactly as intended. The reason why you need a double hash ## is because whenever you are in a <cfoutput> tag, ColdFusion sees the single hash # as the start of a variable or evaluable expression. When it doesn't find the closing hash, it throws an error.
Now there are times when your intent is to use the hash for display purposes and not to evaluate a variable or expression, as it is in your case. So the solution is to use the double hash ## an an escape character to let CF know you want to just display it as a single hash on the rendered page.
If you use your browser's developer tools and inspect element, it shold appear to correctly display as a single hash. The other fix to your issue is to make sure you remove the section of code with the input button from being inside a <cfoutput> block.
Most importantly, you shouldn't be debugging by looking at the CF source code, you should debug this looking at the rendered page by using your browser's developer tools or the browser's "view source" option. If you can, please update your original question by providing a screenshot of the "inspect element" of your submit button.
I am creating a login feature but I also need a register button. This register button has to be in the same form as the login feature because I need to display them in block.
or logging in but I also need a register button which redirects the user to another page. But since the form already has an action, how would I add a button to the form and still be able to redirect the user to another page?
Instead
<button>
Use
<a class="btn btn-md btn-register" href="register.html">Register</a>
and put some css for btn-register to show it as button.
If you simply want a button, you can do something like this:-
<button onclick = "window.location.assign('https://example.com')">Register</button>
I've made two tables, and I added one checkbox for each.
The checkboxes aren't default checkbox, but it's an image that gets changed on click, here the code:
<button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !checkBoxPrint2"><i class="fa fa-1x" ng-class="checkBoxPrint2 ? 'fa-square-o' : 'fa-check-square-o'"></i></button>
so onClick it changes the FontAwesome icon.
Then I have a Print Button, which prints the page following the print css rules:
<button class="btn btn-lg btn-custom-md pull-right" ng-click="vm.$window.print()"><i class="fa fa-print fa-2x"></i></button>
Now I would like to know how can I make it print ONLY the tables that have the checkbox checked (meaning with "fa-check-square-o" icon) ?
My initial idea was doing it with ng-class, so when the button is pushed, it gives a "noPrint" class to the element that hides it from print, does it make sense?
You can use ng-show or ng-hide based on your boolean properties to hide/show tables.
I'm not sure that I understand your question perfectly but a simple example would be:
$scope.showElement = false;
<div ng-show="showElement">This only shows if the variable is true</div>
In your case you could use checkBoxPrint2 as an expression for ng-show/hide, on each one of the elements that you would like to hide. You could for example only keep the headers always visible but hide the contents.
Here's more information and examples for you:
https://www.w3schools.com/angular/ng_ng-show.asp
How do I insert a new line into a data-* attribute? I have read articles/responses saying escape sequences, but none have worked.
Let's say I have a button tag and when clicked I want to pass data to a javascript method and display a dynamic popup modal.
<button id="myButton" data-toggle="modal" data-target="myModal" data-info="Some content. This content is on a new line"
Data-info will get pushed to a div in the modal. What needs to go between the two sentences to display them on separate lines. (Essentially a within the data-info attribute)
Maybe you can do an array on data-info with differents text you need.
Next create p elements inner the modal window or other you want with te information of the data-info
<button id="myButton" data-toggle="modal" data-target="myModal" data-info='{"text1":"Hello world","text2":"Bye world"}'>
Hello</button>
$( "#myButton" ).click(function() {
$("#content").append($("<p></p>").text($("#myButton").data("info").text1));
$("#content").append($("<p></p>").text($("#myButton").data("info").text2));
});
Here and example: https://jsfiddle.net/hectoruch/bfx0Lnvv/