Javscript function on form submit

JavaScript
1

I am trying to activate a javascript function when I click on the form submit button
Without it redirection to another page. I dont know if that is possible?

my code:

Html:

 <form name="myform" " onsubmit="return CreateProduct()" method="post">
                <label>Title</label>
                <input id="TitleInput" placeholder="Title" />
                <label>Price</label>
                <input id="PriceInput" placeholder="Price" />
                <input type="submit" value="Submit2">
            </form>

javascript:

function CreateProduct() {
    const Titleform = document.getElementById("TitleInput");
    const Priceform = document.getElementById("PriceInput");
    const item = {
        title: Titleform.value.trim(),
        price: Priceform.value.trim()
    };
    fetch("api/Create", {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },

        body: JSON.stringify(item)
    })
        .then(response => response.json())
    .then(() => {
    TItleFIeld.value = '';
    }).catch(error => error('unable to add product', error));

}
2

You have an extra quote in your first line there, before onsubmit, but it seems to work regarless.

I haven’t used the onsubmit attribute, but it seems to have that built in. I usually just create my one submit button so I can handle it the way I want.

Sorry if that’s not great information.

I did notice a few other things - you have a habit of using PascalCase for your variables. I JS you should only do that for classes and object constructors. There are some other cases, but not in vanilla JS.

Also in this:

.catch(error => error('unable to add product', error));

error is not going to be a function.

3

Thank you,
yeah I was thinking about just creating inputs and a submit button without a form as you said, but i just wanted to make sure :slight_smile:

Thank you for the extra advice aswell.

Have a nice day

4

You can still use the form element for the semantic value.

I don’t know, I haven’t done this style of coding in a while. Maybe someone smarter than me has better advice - that’s just what I do.

5

onsubmit takes a script it can execute, so it needs to be valid JS (in this case, needs to call a function).return CreateProduct() is not that, it’s not valid JS.

Also, for future reference, I would strongly suggest using addEventHandler in your JS, don’t use HTML attributes like onsubmit, so eg

yourForm.addEventHandler("submit", CreateProduct);
6

its not working the way I want it
its still redirecting to another page

7

What page is it redirecting to, you haven’t specified an action attribute on your form?

The first thing you normally do when you don’t want the default “browser loads new page” behaviour is calling event.preventDefault() at the very top of your submit handler.

8

Thank you it worked :slight_smile:

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.