Question posted in
You can find the official documentation here.

Update input fields one at a time without page refresh – Jquery ajax

I have a mixture of input fields, textareas and combo boxes which I would like to be able to update one at a time (without page refresh) but I am not quite sure how to approach this. When update is clicked it should update the MySQL Database respectively. I know how to update all of them at the same time but I am trying to avoid using this method. Every input, textarea, combo has a input type submit next to them to get me started.
This is part of the html file that I am referring too.

<form action="" class="customform" method="post" id="file-upload-form" enctype="multipart/form-data">
                
                <h5>Set competition name</h5>
                <input type="text" id="Gamename" name="Gamename" value="<?php echo $GameName; ?>" size="400" style="max-width: 410px">&nbsp;&nbsp;<input name="Update1" type="submit" value="Update" style="width: auto;">
                
                <h5>Set competition date & time</h5>
                <input type="text" id="demo" name="timedate" value="<?php echo $sdate; ?>" size="200" style="max-width: 210px">&nbsp;&nbsp;<input name="Update2" type="submit" value="Update" style="width: auto;">

What would be the best way to achieve this? Would I need to use Ajax, Javascript or Jquery? I am not asking for all the code to be written for me, just some guidance on how to approach it. thanks

Tags:

2

Answers


  1. 0

    this was done by ajax full code is here with all guidance.

    https://steemit.com/utopian-io/@sogata/how-to-update-data-mysql-from-php-without-reload-page-using-jquery-ajax

                   $.ajax({
                        url:'update.php',
                        method:'POST',
                        data:{
                            name:name,
                            ctgr:ctgr
                        },
                        success:function(response){
                            alert(response);
                        }
                    });
    Login or Signup to reply.
  2. 0

    Try:

    HTML

    <div id="output"></div> // This is where response (res/err) will be showed

    JS

    var form = document.getElementById("file-upload-form");
var output = document.getElementById("output");

form.onsubmit = () => {
    fetch("your_page.php", {
            method: "POST",
            body: new FormData(form)
        })
        .then(res => res.text())
        .then(res => {
            output.innerHTML = res;
        })
        .catch((err) => output.innerHTML = err);
    return false;
};

    You don’t need jQuery for such a simple task.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search