Contact form 7 is not working with Safari due file-upload button - file-upload

As you already know; the contact form, build with the CF7 plugin, can not be submitted when using Safari and when the contact form contains a file upload button. The problem only occurs when the user is leaving the upload field blank, so without selecting a file.
For me, the best solution for this problem is to remove the file upload button when there is no file selected. I've partly succeeded in doing this through the following Jquery script:
jQuery(document).on('submit', '.wpcf7-form', function (e) {
jQuery('input.wpcf7-file').each(function() {
if (jQuery(this).val() == '') jQuery(this).remove();
});
});
There is only one problem left… When the form is submitted with the upload field left blank, the button is being removed but the spinning arrow icon keeps spinning and nothing happens. ONLY, when the user is submitting the form for a second time, the submission will succeed.
So I want to expand the code shown above with a few lines which is automatically submitting the contact form a second time in case the file upload field is left blank. Because of this the user would not have to submit the contact form twice which can be VERY confusing…
Can someone help me out with this? I think this is also a good solution for many other users because I have read many topics from people having the same problem.
Thanks in advance & have a nice day!
Best regards

I think your problem stems from the fact that the "submit" method is firing after the form submission starts (or at least after the form fields are collected). So on a second click it re-submits the form without the empty fields.
I've implemented a version of your script but binding to the click on the submit button, rather than the submit method of the form. So far - it seems to be working.
I experimented with making it only trigger on the affected browses (using nagivator.userAgent.match()) but without much luck in the brief time I'm looking.
<script>
jQuery(document).on('click', '.wpcf7-form [type=submit]', function (e) {
jQuery('input.wpcf7-file').each(function() {
if (jQuery(this).val() == '') jQuery(this).remove();
});
});
</script>

Related

Splunk submit button (submitButton) does not refresh dashboard if no inputs are changed

I have a dashboard with a submit button (submitButton). The search isn't run until the button is pressed which is exactly what I want (the search takes a long time). I don't want the search starting as the user changes the other dropdowns (time), environment (Prod vs. QA), etc.
HOWEVER, sometimes it would be nice to hit the submit button and perform the search again without changing any of the other fields (time, environment, etc.). In this case the submit button does nothing! I can tell the underlying data has changed via searches, but the dashboard is not updated. Simply changing any of the fields, doing a search, and then changing them back and searching again solves the problem, but surely the submit button should just work w/o this workaround?
Thanks
If "nothing" has changed, then Submit is supposed to "do nothing".
If you want to refresh the page with all the parameters as set, you should be able to click the URL bar and press return (so long as there are no hidden tokens, they'll all get set in the query portion of the URL).
Each panel in the dashboard should (automatically) have a refresh button you can click to refresh the display without changing inputs.
Unfortunately, this is intended behavior.
I also wish that the submit button would rerun dashboard searches. I opened a post on Splunk ideas about this issue:
https://ideas.splunk.com/ideas/EID-I-739
If you have a splunk.com account, you can vote for this idea.
I've browsed through Internet and found some solution that with some modifications worked for me fine
<form>
..
<html>
<style>
div.fieldset.dashboard-form-globalfieldset div.dashboard-element.html.dashboard-element-html {
display: inline-block;
}
</style>
Refresh
</html>
...
<form/>
so basiclu im refreshing page with all of its attributes and passing attributes values form current ones chosen using tokens. splunk code didn't like & so replaced it with & and it worked fine. <> - can be found in your splunk page address.

Screen readers unable to read options of `vue-search-select`

I inherited a vuejs project. People using screen readers as assistive devices complain that their screen readers are unable to read the options in drop down menus that were made from vue-search-select. Here is how you can reproduce the issue:
Install a screen reader such as NVDA.
Turn on NVDA screen reader.
Go to https://vue-search-select.netlify.app/#/model
Tab to a search text field.
Confirm drop down of results appear.
Press the down arrow key to focus on any of the search result items.
Confirm the NVDA says the word "Blank" instead of actually reading out the contents of the selected item.
Here is a 10 second clip to that demonstrates steps 3 of 7.
https://www.youtube.com/watch?v=Nxx1k1oKETI
How do you modify vue-search-select such that in step 7, the screen reader will read out the contents of the selected item instead of reading out the word "Blank"?
Right now, as a temporary solution, I'm trying to write a setTimeout function that will automatically add the appropriate meta data to force screen readers to read out the content. But I'm not sure how successful this approach will be. I prefer an approach that is idiomatic to vue-search-select.
I tried adding a customAttr like so:
<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
return function() { return '" aria-label="hello" tabindex="0'; }
}
Although the attributes do appear in my developer console's inspector, my screen reader still does not read out the options.
It seems custom-attr will not help you as it does not allow you to add any attr you want - anything the function returns is just placed as a value of data-vss-custom-attr attribute
Any decent Vue library with similar functionality would offer a slot to customize rendering of menu items, but this does not. Plus it doesn't seem to be maintained for a long time so maybe it is a time to look for an alternative....

Allow natural back button behaviour with use case of dynamically-added query parameters

I have the case that I push some parameters to the nuxt router (https://router.vuejs.org/guide/essentials/navigation.html) whenever somebody visits a page without any parameters.
Example:
somebody visits: /program it will end up in /program/first-event?year=2018&month=6
(First the view filters the program for current events (therefore the parameters for this year and this month) and then from the filtered events it will set the first event as active post (also by pushing it to the router).
This is all wanted and good. BUT now I detected the following problem:
Somebody is visiting /aboutus and then navigates to /program, the router will automatically change to /program/url-of-event-post?year=2018&month=6.
Assuming the user wants to go back to /aboutus he clicks on the browser back button. This will bring him back to: /program which automatically adds the post and the parameters again (effectively moving one step forward again).
Means the user is caught in clicking endlessly on the back button.
My approach would be to try to register if a user clicks on the back button and if so, I would not add the parameters. But I don't know how to do this.
I thought the router would provide some 'from' property, but so far I did not find anything.
I would be very happy to hear some thoughts on this. Thank you heaps in advance.
You need use router.replace.
https://router.vuejs.org/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort

Auto login to website using script or bookmark

I've been trying to figure this out using various different methods. I'm trying to create a script/bookmark or some type of quick action to open a browser tab or window with a specific URL, and automatically log me in using my credentials. I'm not all that concerned about security for this at the moment.
At first I figured I'd try to use a javascript bookmark to do this, but nothing I found in my research worked. Next I tried to create a bash script, but I couldn't figure out how to send the credentials in via the terminal. Most recently, I literally copied the source code of a site, created a local file and tried to hack together something where I could prefill the form data with credentials and use JS to submit the form, and I've gotten close with this, but for some reason when I use the JS submit function, it errors out and says that the username and password are invalid. But when i turn off the submit function and manually click "log in" on my local html page, it works as expected. I want this to be a one click process, so the idea of using onload/submit or something to that affect is really important to me.
The site I'm testing with has a Rails backend and my next attempt might be trying to use POST to do what I'm thinking, but that's currently outside of my level of knowledge on the subject.
Anyone answering: i do not want to use a password manager to accomplish this.
My requirement is that i will either be able to a) run a script or b) use a 1-click option to do this per website. Ideally i'd be able to set this up in a sort of programmatic way to do this with multiple sites, but I'd be happy with 1 at the moment.
i know similar questions have been answered before, but I haven't been able to use information from those posts (the ones I've seen anyway) to figure out a good way to do this.
Create a bookmark for the current page you have opened.
Edit the bookmark
Change the value for the URL to something like this.
(javascript:(function(){CODE_GOES_HERE_FROM_BELLOW})();
find the field for username and password on the page.
Given example for hotmail
var inputs = document.getElementsByTagName('input'); for(var i=0;i<inputs.length;i++){if(inputs[i].name === 'passwd'){inputs[i].value = 'YOUR_PASSWORD'}else if(inputs[i].name === 'loginfmt'){inputs[i].value = 'YOUR_USERNAME'}}; document.getElementById(document.getElementsByTagName('form')[0].id).submit();
OR
try out casperjs.
The proposed solution didn't work for me and rather than spending tons of time installing a testing framework that I'll never use other than for this purpose, I decided to try to do this another way.
First, I found out that the reason my JS wasn't working before is because the site did not allow a JS submit to be done, or atleast that's what it seemed to be when I got this error: "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience"
The javascript I was using was in fact working, just not submitting. I used the following code to fill the fields (using "Class Name" elements on the page since there was no name or ID):
document.getElementsByClassName('username')[0].setAttribute('value', 'user');
document.getElementsByClassName('password')[0].setAttribute('value', 'password');
As I mentioned, the problem was when I tried to use JQuery to submit the form: document.getElementsByClassName('loginForm')[0].submit();
Which is when the above error cropped up. I can't really say for sure whether this is the root of the cause, but the page does submit, but I get an invalid username/password error when I do
I haven't figured out a great way to get around this just yet, but my short-term, "hacky" solution was to use Applescript to send a return keystroke to the browser to submit the form. I'd ideally like to figure out how to get the submission to work using JQuery, but I'm not sure how to get around it.

Log in form for Normal Users Only Drupal 7

Is there any way or how to start off to make a default log in form on drupal 7 applicable for normal users only? Administrators cannot log in in that log in form (I'll make a custom log in form for administrators, but that wasn't the issue here)
It was like,
http://mysite.com/user/
You see a log in form, ONLY normal users can log-in in that form.
Is there any way to do this any hints or clues where to start off first?
I've been here
https://drupal.org/node/1894620
Studied this
https://api.drupal.org/api/drupal/modules!node!node.api.php/function/hook_node_access/7
It doesn't seem right, or I just don't manage to applied it well.
I'm lost. Any help would be appreciated though.
I think the only solution is to copy the whole User-Login form (within its all submit- and validation-functions) in your own custom module.
You can start by looking up the form-array from the login-form.....
function mymodule_form_alter(&$form, $form_state, $form_id)
{
if ($form_id == 'user_login')
{
// The login form here...
print_r($form);
}
}
.... and copying this into a new hook_form(), implemented by your module.
Now you can alter the submit and validation of the form in the copy.
In the new validation function you can check for the correct User-Role.