Form 'onsubmit' not getting called

Asked
Active3 hr before
Viewed126 times

6 Answers

getting
90%

if you wanna send the form return true. – cocco Nov 7 '13 at 21:42 ,Find centralized, trusted content and collaborate around the technologies you use most., You should try to validate forms not on the client side, because a user can change the code easily. Also, check out jQuery, it has really nice form handling, and will make your job easier when you have larger and more complex inputs. Here's a link to a useful plugin. Good luck! – Carpetfizz Nov 7 '13 at 21:43 ,and here's the validate function:

You can override the original prototype "submit" method like this:

HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;

HTMLFormElement.prototype.submit = function() {
   this._submit();
   alert('Deddy Is Great :)'); // or fire the onsubmit event manually
};
load more v
88%

I am trying to call a JavaScript function when the submit button of a form is clicked.,For some reason, the function is not called when it is named 'submit', but when it is named anything else, it works.,Note that when a form's submit method is called directly, its submit handler is not called.,Because submit() is the reserved function to submit a form in core JS.

Here is the code:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript"> 
            function submit(){
               console.log('test');
            }
        </script>
    </head>     
    <body>
        <form>
            <input type="text"/>
            <input type="submit" onclick="submit()"/>
        </form>
    </body>
</html>
load more v
72%

The onsubmit event occurs when you try to submit a form. You can put your form validation against this event type. The following example shows how to use onsubmit. Here, we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true, the form will be submitted, otherwise it will not submit the data.,How to call a Java function inside JavaScript Function?,How to call a function in JavaScript?,How to call a JavaScript function on a click event?

The onsubmit event occurs when you try to submit a form. You can put your form validation against this event type. The following example shows how to use onsubmit. Here, we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true, the form will be submitted, otherwise it will not submit the data.

<script>
   <!--
      function validation() {
         all validation goes here
         .........
         return either true or false
      }
   //-->
</script>
load more v
65%

As noted in the comments in the previously linked question, the onSubmit function does not get called when submitting in this way - how can I get the Id of the record that was created?,You can use the same way to submit from linked question - no need to change that,Jason, here is an example of field validation when using a button outside of the RecordEdit form.,When you create new record, you do not have record id before submit and so you cannot get it in onsubmit event. Instead you should be using onsuccess event.

You can use the same way to submit from linked question - no need to change that

update: function(component, event, helper) {
   component.find("editForm").submit();
}

Now, to get the created record id, you need to handle onsuccess event:

< lightning: recordEditForm
onload = "{!c.handleLoad}"
onsubmit = "{!c.handleSubmit}"
onsuccess = "{!c.handleSuccess}"

Now, in handleSuccess method, you can get id from event param:

handleSuccess: function(cmp, event, helper) {
   var params = event.getParams();
   cmp.set('v.recordId', params.response.id);
}
load more v
75%

Even now with 16.8.6 still not working, I need dispatch event:,You can submit from the form element, but you need to dispatch the submit event.,does not do the trick when targeting chrome.,Using the requestSubmit solution seems to work.

form.dispatchEvent(new Event('submit'))
load more v
40%

3- when in the form onsubmit call the credentialVerify function, i have console.log(e) but it is showing as undefined, but as i understand onsubmit will call the function and through the event argument by default.,Built on Forem — the open source software that powers DEV and other inclusive communities.,1- As i understand useEffect is used to invoke the function after render, but in the below code, once the form is sumbitted (onSubmit={credentialVerify}) it will call the credentialVerify() function as below, so i dont think we need useEffect here, but still the code doesnt call the API unless i use the useEffect statement., We strive for transparency and don't collect excess data.

function Signin() {
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const updateName = (e) => {
    setName(e.target.value);
  };
  const updatePassword = (e) => {
    setPassword(e.target.value);
  };
  const [items, setItems] = useState([]);
  useEffect(() => {              //Point-1  useEffect- API not call atall without this statement
    credentialVerify();
  }, []);
  const credentialVerify = async (e) => {
    console.log(e);                                         //Point-3 this is coming as undefined
    const data1 = await fetch("http://localhost:5000/api/customers");
    const incomingdata = await data1.json();
    console.log(data1);
    console.log(incomingdata);
    console.log(name, password);
    setItems(incomingdata);
  };
  return (
    <div>
      <div>
        {
          <form className="formstyle" onSubmit={credentialVerify}>
            <input
              type="text"
              placeholder="Username"
              name="username"
              value={name}
              onChange={updateName}
            />

            <input
              type="text"
              placeholder="Password"
              name="password"
              value={password}
              onChange={updatePassword}
            />
            <button type="submit">Submit</button>
          </form>
        }
      </div>
      <div>

        {items.map((entry) => {
          let key = entry.email;
          let valuefirst = entry.firstName;
          let valuelast = entry.created_at;

          return (
            <p key={key}>
              {key}: {valuefirst}bb {valuelast}
            </p>
          );
        })}
      </div>
    </div>
  );
}
export default Signin;

Other "getting-undefined" queries related to "Form 'onsubmit' not getting called"