Submit without reload page ajax, javascript

[tivadarsubotica]

Hi,

I have a part of script, this is the form submitted with php and after submit, that reload the page. How can I do submit query without reload page (to page stay on same place where is it).

<form action="index.php?c=listing_vesti#kajron_<?php echo $vesti_id; ?>" method="post">
                  <button type="submit" id="SubmitBTN" class="btn <?php echo $kajron_btn; ?>" name="kajronbtn"><input class="form-check-input" type="checkbox" id="kajron" name="kajron" value="<?php echo $vesti_kajron; ?>" <?php echo $kajron_checked; ?>>Kajron</button>
                  <input type="hidden" id="vesti_id" name="vesti_id" value="<?php echo $vesti_id; ?>">
                  <input type="hidden" id="kajron" name="kajron" value="<?php echo $vesti_kajron; ?>">
                </form>

Thanks in advanced,

T

[requinix]

You mentioned AJAX in the title so... how about that?

[tivadarsubotica]

2 hours ago, requinix said:

You mentioned AJAX in the title so... how about that?

I don’t know if it can be solved with Ajax or any other way

Jus to see You should see how looks when is OFF and when is ON the button...

The most important to page stay on the same place after submit to dont scrolling up or down...

As You see I have in Form:

index.php?c=listing_vesti#kajron_<?php echo $vesti_id; ?>

what give me back the "clicked" on the top of the page, not on the same place where is clicked.

Edited May 12, 2021 by tivadarsubotica

[requinix]

If you don't want the page to do anything then use AJAX instead of a <form>.

So yes, AJAX can definitely do what you want.

[tivadarsubotica]

47 minutes ago, requinix said:

If you don't want the page to do anything then use AJAX instead of a <form>.

So yes, AJAX can definitely do what you want.

This is the problem, how can I do this, to click on submit and reload data without reload page and to page stay on same place where is it. Im wery "weak" with javascript aor Ajax... 😭

[requinix]

If you need to use AJAX but don't know how then this would be a good time to learn.

Are you using a Javascript framework? If so then see what it offers for AJAX support.
If not then you should look into the Fetch API - not XMLHttpRequest, that's mostly obsolete, but the fetch() function and stuff related to it. What you would do is, when someone clicks the button to "submit" the "form", you create a Request with appropriate information (eg, a URL, the POST method, and FormData body), give that to fetch(), and it will give you a Response that you can read from.

[Strider64]

I personally like using the Fetch API as it's pretty straight forward and pretty darn easy to use (once you get the hang of coding it):

Here's an example from my contact page:

 

    /* Success function utilizing FETCH */
    const sendUISuccess = function (result) {
        //console.log('Result', result);
        if (result) {
            d.querySelector('#recaptcha').style.display = "none";
            submit.style.display = "none";
            notice.style.display = "grid";

            notice.textContent = "Email Successfully Sent!";
            notice.style.color = "green";
            message.style.display = "grid";

            d.querySelectorAll('form > *').forEach(function (a) {
                a.disabled = true;
            });
        }
    };

    /* If Database Table fails to update data in mysql table */
    const sendUIError = function (error) {
        console.log("Database Table did not load", error);
    };

    const handleSaveErrors = function (response) {
        if (!response.ok) {
            throw (response.status + ' : ' + response.statusText);
        }
        return response.json();
    };

    const saveRequest = (sendUrl, succeed, fail) => {

        fetch(sendUrl, {
            method: 'POST', // or 'PUT'
            body: JSON.stringify(sendEmail)

        })
            .then((response) => handleSaveErrors(response))
            .then((data) => succeed(data))
            .catch((error) => fail(error));
    };

 

[tivadarsubotica]

35 minutes ago, requinix said:

If you need to use AJAX but don't know how then this would be a good time to learn.

Are you using a Javascript framework? If so then see what it offers for AJAX support.
If not then you should look into the Fetch API - not XMLHttpRequest, that's mostly obsolete, but the fetch() function and stuff related to it. What you would do is, when someone clicks the button to "submit" the "form", you create a Request with appropriate information (eg, a URL, the POST method, and FormData body), give that to fetch(), and it will give you a Response that you can read from.

Yes, I know that I must to learn, the problem is time, time to do something that asking to me. Usual I ask for example, and then I see, how its work, than I can (step by step) learn and search for other solutions of my problems. If I had a solution to my question I know what are do up to now and adding a solution will see how can I go on if I had another problem. So, this is the way how I thinking...

[tivadarsubotica]

44 minutes ago, requinix said:

If you need to use AJAX but don't know how then this would be a good time to learn.

Are you using a Javascript framework? If so then see what it offers for AJAX support.
If not then you should look into the Fetch API - not XMLHttpRequest, that's mostly obsolete, but the fetch() function and stuff related to it. What you would do is, when someone clicks the button to "submit" the "form", you create a Request with appropriate information (eg, a URL, the POST method, and FormData body), give that to fetch(), and it will give you a Response that you can read from.

In My post "Bilingual mod_rewrite" You explained me in a great way how can I use bilingual (or multilingual) pages in htaccess, so thats the right way how I understand the scripts...

[requinix]

8 hours ago, tivadarsubotica said:

Yes, I know that I must to learn, the problem is time, time to do something that asking to me. Usual I ask for example, and then I see, how its work, than I can (step by step) learn and search for other solutions of my problems. If I had a solution to my question I know what are do up to now and adding a solution will see how can I go on if I had another problem. So, this is the way how I thinking...

What about the time to maintain this code? There is more than just writing the code and saving the file. What will you do if you have to come back to this file again in the future? What if you need to do another similar AJAX feature somewhere else?

Your time to learn this is not a price to pay but an investment in yourself and your employer.

Strider64 gave an example of how to do this.

8 hours ago, tivadarsubotica said:

In My post "Bilingual mod_rewrite" You explained me in a great way how can I use bilingual (or multilingual) pages in htaccess, so thats the right way how I understand the scripts...

AJAX and mod_rewrite are two completely different things.