8 – How to remove the click event on an Ajaxified form’s submit buttons?

I’ve created several forms with Drupal 8 directly in admin or with Form API. I’ve added some client side validation with this jQuery plugin : jQuery Validation Plugin.

Everything works very well. Now my client asked me to open one of these form in a popin. So I’ve installed this 2 modules :
Contact Block (The Contact Block module provides contact forms in a block.) https://www.drupal.org/project/contact_block

I can open form in a popin and it works well but after validation, the page is reloaded and it is not UX friendly since we are in a popin.
So I’ve installed this module :
Contact ajax (implements ajax submission for core Contact form in Drupal 8.) https://www.drupal.org/project/contact_ajax

It works well but the submission is done before I can execute client side validation.

The problem seems to be the priority of execution.

I’ve tried to apply preventDefault on the submit button but it doesn’t work.

$( "#form #submit-button" ).click(function( event ) {
  event.preventDefault();
  //validation code
});

I’ve found this topic but I donc know how to implement the code :
How to prevent an Ajax form from submitting

I’ve also found this topic :
https://www.drupal.org/project/clientside_validation

Can you help me to understand how I can block the click event on an Ajaxified form’s submit buttons ?

EDIT

I’ve tried this module : Clientside Validation and apply this patch 2952233-5.patch

It works, the Ajax submit button is disabled. The solution is based on that answer.

For now it has a bug : the form is validated but I don’t see the confirmation message at the end.

Then, I’ve copied the code from this patch in my project and it works.

linear algebra – maximization of the product of two quadratic forms

I am trying to find $x$ to maximize the product of two quadratic forms:

$$maxlimits_{x} (x’Ax cdot x’Bx) $$

In my case, both of the matrices A and B are positive definite. It seems that a common problem is to maximize the quotient of two quadratic forms, e.g. $$maxlimits_{x}frac{x’Ax}{x’Bx} $$ by substituting $B = M’M$ and $y = Mx$, changing the $x$‘s to $y$‘s, and then solving $$maxlimits_{y} frac{y’M^{-1} A M^{-1} y} {y’y} $$ which is just the largest eigenvector of $ M^{-1} A M^{-1}$. Can a similar approach be used for the product of two quadratic forms as above? I can’t figure out how to do it, but I don’t understand exactly why it should be different. I can get close to the answer by approximating $$ x’Bx approx frac{1}{x’B^{-1}x} $$ but I think that only holds when $x$ is an eigenvector of $B$, which it probably wouldn’t be. Can anyone help me see what I’m missing here? Ideally, I’m hoping there is a way to solve this using efficient matrix operations instead of an iterative method, but if there isn’t, I’d like to be able to understand why.

Thanks!

ap.analysis of pdes – Canonical forms on higher degree Jet bundles similar to the Liouville form

On a smooth manifold of dimension $n$, the application value of the canonical $1$-form, the Liouville form on $T^*(X)$, to the Hamiltonian mechanics is well known; $T^*(X)$ is a degree $1$-Jet bundle. My question is Do canonical forms similar to the Liouville form exist on higher degree Jet bundles?
I ask this because, beyond the invariant sub-principal symbol of a pseudodifferential operator, nothing much seems to be known to handle multiple characteristic problems, especially of the non-involutive
type. I am aware of Ivrii-type Fuchsian operators, already posing great difficulties.

Google Forms is hiding responses under “Other” in the Summary tab

I am running a poll on Google Forms with many options, and over 93 responses are hidden in this “Other” category on the summary page. There is no “Other” option on the multi-select checkboxes, nor any way to leave an answer blank. Is there any way to show “Other” responses within Google Forms, since I don’t know how out how to make a graph work from responses in Google Sheets?Image showing a bar graph with "Other". There are 93 responses.

forms – How to handle blocking UI elements while waiting for server response

Lately I’ve been using React + Formik to create great user experiences.
I’ve a question about blocking the UI when the XHR is still processing.

Imagine a register form with only a sign up button. As soon as the button is clicked I disable the button, it show a loader and sets the cursor to default. All good so far.

In that same view of the webpage there is also a link to “Already have an account? Sign In!” (and a fiew other hrefs). The “Sign In!” part is an URL, which is still clickable. What do I do in this situation? Should I block the “Sign In” link from being clicked?

Because when the user clicks “Sign In!” when no response has been received yet from the backend it either returns 200 registering was successful and redirects. Or it returns a validation error in which case the component is unmounted and React gives errors.

forms – React blocking UI when waiting for XHR

Lately I’ve been using React + Formik to create great user experiences.
I’ve a question about blocking the UI when the XHR is still processing.

Imagine a register form, with only a sign up button. As soon as the button is clicked, I disable the button, show a loader and set it’s cursor to default. All good so far.

In that same view of the webpage there is also a link to “Already have an account? Sign In!” (and a view other hrefs). The “Sign In!” part is an URL, which is still clickable. What do I do in this situation? Should I block the “Sign In” href?

Because when the user clicks “Sign In!” when no response has been received yet from the backend. It either returns 200 registering was succesful and redirects. Or it returns a validation error in which case the component is unmounted and React gives errors.

forms – How to add Post Update Notification Bubble for custom post types?

WordPress | Question

I have created a custom post type to store booking information submitted from a front-end form by customers. In the back-end, however, I don’t see any notification bubble like when you see a bubble in the comments tab in the backend when someone posts a comment on a post.

Is there anyway I can see notifications in the dashboard when there’s a new form submission? Please do advise on that.

forms – Should a blank option always be included in inputs?

For example when asking a user what pet they have and it’s a required field, a Please select option is included since the pet is currently unknown:

<select required>
  <option value="">Please select</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>

However if we already know the pet since it’s been saved previously, and we only want to allow the user to change the required field, when the user returns to the page should we still include the Please select option?

So in this case, is it better to remove Please select so they cannot deselect the field:

<select required>
  <option value="dog">Dog</option>
  <option value="cat" selected>Cat</option>
  <option value="hamster">Hamster</option>
</select>

Or keep the Please select so the dropdown behaves the same as the original one they used to set the value. If they do deselect the field the browser will prompt them to provide an option when the form is submitted.

<select required>
  <option value="">Please select</option>
  <option value="dog">Dog</option>
  <option value="cat" selected>Cat</option>
  <option value="hamster">Hamster</option>
</select>

i.e. is it suitable to modify the options on a required <select> in this way when an option is saved?

When uploading a file on Google Forms, I would like the file uploads to go into a custom folder based on the form response (their name)

Ex. someone submitting the form with a file upload and on form submit it creates a custom folder based on their form response (their name) on google drive with their submission in it.

Using this script, I can put all files into one folder, but I don’t know enough about script to know where to change what the folder is named

const PARENT_FOLDER_ID = "<<Folder ID here>>";

const initialize = () => {
  const form = FormApp.getActiveForm();
  ScriptApp.newTrigger("onFormSubmit").forForm(form).onFormSubmit().create();
};

const onFormSubmit = ({ response } = {}) => {
  try {
    // Get a list of all files uploaded with the response
    const files = response
      .getItemResponses()
      // We are only interested in File Upload type of questions
      .filter(
        (itemResponse) =>
          itemResponse.getItem().getType().toString() === "FILE_UPLOAD"
      )
      .map((itemResponse) => itemResponse.getResponse())
      // The response includes the file ids in an array that we can flatten
      .reduce((a, b) => (...a, ...b), ());

    if (files.length > 0) {
      // Each form response has a unique Id
      const subfolderName = response.getId();
      const parentFolder = DriveApp.getFolderById(PARENT_FOLDER_ID);
      const subfolder = parentFolder.createFolder(subfolderName);
      files.forEach((fileId) => {
        // Move each file into the custom folder
        DriveApp.getFileById(fileId).moveTo(subfolder);
      });
    }
  } catch (f) {
    Logger.log(f);
  }
};