Input value on a form not showing HTML WordPress - javascript

I am working on a website and for some reason the input value is not working. It was just working about an hour ago and have made no changes to the site since then. For example: https://www.albright.edu/about-albright/offices-departments/registrar/transcript-requests/ at the bottom of that page, there are two buttons. One is for submit and one is for clear. Neither are showing the "value" part of the input so they both look blank.

There seems to be a plugin in your theme ( maybe AutoOptimize) that's causing the color of the button to be transparent.
input[value] {
color: transparent;
}
Try setting the color on your css.

If you inspect the element with developer tools the text is present but the color is set to transparent (apparently from the plugin autoptimize).
You could try to use
<button type="submit">Submit</button>
or style these inputs with a custom class to set the color of the text
I hope this helps

Related

Not able to click save button in cypress

I am working on a UI automation project. I have to fill details in a form and click on 'Save' button. Once save button is clicked in manual flow, it turns grey and disabled. And after that a pop-up emerges to confirmation.
But when I run automation script to hit 'Save' button, script hits the button but it doesn't turn grey and still enabled. And I don't see any confirmation pop-up.
I tried lots of solutions for clicking 'Save' button, some of them are listed below but nothing works
cy.contains('Save').click()
cy.contains('Save').click({force:true})
cy.contains('Save').focus().type("{enter}")
cy.get('button span.MuiButton-label').contains('Save').click({force:true})
cy.get('span.MuiButton-label').contains('Save'). then($btn => {
cy.wrap($btn).scrollIntoView().click({force:true});
})
I am also attaching html for 'Save' button
I would be really thankful, if you please help me in finding solution for it.
What I can see from the image is the button contains some span and other empty elements if you can give the button an id this way you job would be much simpler
cy.get('#form-btn').click()
if not then treaverse from the main-content to the form then to the button
cy.get('#main-content').get('form').get('button').click()
Add data-cy="save" to your button and
Do this:
cy.get("[data-cy=save").click()
You can directly use the button text and click on it.
cy.contains('Save').should('be.visible').click({force: true})
If you have shadow DOM in the HTML, turn on includeShadowDom either in global config or in the test config.
Target the button in the cy.contains(). cy.contains('Save') will target the label, but that may not be clickable:
it('fills form', {includeShadowDom: true}, () => {
// fill form fields
cy.contains('button', 'Save').should('be.enabled').click()
})
All of the above answers were correct.
Additionally, you also want to check the colour change after clicking on the Save button. So you should have to check the CSS file and check the colour. I'm assuming here the button has some property color and you have to just use that HEX code for the colour. I used Charcoal colour as I don't know which grey shade your app used.
cy.contains('Save')
.should('be.visible')
.click({ force: true })
.should('have.css', 'color', 'rgb(54, 69, 79)')

Empty button error in wave accessibility check

Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation

custom css error class not applying for the fields jquery validator

I have a form which contains two file input and two check box and one submit button. With my current code when the user click submit button the jquery validation will work perfectly but the problem was the custom error class was not applying and not removing correctly for example if the user click the check box that particular errorClassshould be removed this was not happening. When i search through SO I got one use full information it was mentioned instead of using border red for the check box or if the upload any file that particular field errRed class should remove and I try using outline-color but this was also not working. It might be simple somewhere I am missing some bit of code
I tried giving $('.chk_requ').removeClass('errRed_chkb'); still no use
Here is the fiddle link
kindly please help me.
Thanks in Advnace
Instead of remove class you can add empty div with id="diverr" there and give it desplay:none;
$("#diverr").text("Please select Gender");
$("#diverr").css("display","list-item");
if condition is false then
$("#diverr").css("display","none");

Bing translator widget without original text popup and show the translation button text automatically

I used Bing Language converter in my website. It work successfully. But I need to disable annoying popups attached to hover event on translated texts that shows original text.
I used the below code in onComplete callback :
Microsoft.Translator.Widget.domTranslator.showHighlight = false;
Microsoft.Translator.Widget.domTranslator.showTooltips = false;
But it did not work. I searched every where. But not get any solution. Please give me a solution. Thanks in advance.
use below style that will hide one div:
#MSTCImprove {
display: none;
}
and change ui=true to ui=false

How to remove text field from HTML file input

Normally, a file upload dialog is invoked by clicking the button created by <input type="file"/>. But then, I don't want the text field that comes with it. Is there a way to get rid of the text field? Or is there an alternative way to open the file upload dialog without using <input/>?
Add file input, and set its position to quite far away.
Add a button.
Set buttons onclick to $("#myFile").click();
:D
<input id="myFile" name="file" type="file" style="position:absolute;left:-10000px;top:-10000px;">
<button onclick="$('#myFile').click();">Browse</button>
agree with alex
<style>
.file_wrap{
background:url(file.jpg);
overflow:hidden;
width:30px;
height:10px;
}
.file_wrap input{
opacity:0;
font-size:999px;
cursor:pointer;
}
</style>
<div class="file_wrap">
<input type="file" />
</div>
You can use a flash alternative. I have used swfUpload, with great success. Uploadify, is a similar alternative. Both of these have nice feature sets, including progress bars and multiple upload.
You could replace it with a flash-button as dustin stated or you could hide the button by css-placing your own button on top of the input element and open the select file box by a script.
Some examples here:
inputfile
Check out the http://www.uploadify.com/ jQuery plugin.
You can add your own button and position it under the browse button with CSS.
Then set the file input to have 0 opacity.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (no text input field), similar in all browser and will show selected file names (or selection errors) beautifully. Check their live demo.
Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.

Categories