Jump to content

Submit without reload page ajax, javascript


Recommended Posts

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

Link to comment
Share on other sites

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.

off.jpg

on.jpg

Edited by tivadarsubotica
Link to comment
Share on other sites

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... 😭

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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));
    };

 

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.