CODEWITHSUNDEEP
phpmysqlajax
Oliver
Oliver

Reputation: 31

ajax insert data to sql but not reload the site just clear the input box

I need some help. I try to make insert over input box but not really work like I need.
I have a terminal for user to see there info after scan the RFID card.
I setup the my script to scan for the last insert so if is a new id inserted so show some popup.
I try now to put in one input box for the scanner. after scan, should send the data to a link (it will insert in db) than input should clear it self after send data and not reload the site.

Is it possible?

<script src="js/lib/jquery/1.11.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("form#myform").submit(function(event) {
        event.preventDefault();
        var mcode = $("#mcode").attr("mcode");

        var formData = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "add.php",
            data: "mcode="+mcode+",
            success: function(data) {

                 success: function(){alert('success');}
            }
        });
    });
});
</script>

<form id="myform" class="form_statusinput">
        <input class="input" name="mcode" id="mcode" placeholder="Say something" autocomplete="off">
    <div id="button_block">
        <input type="submit" id="button" value="Feed" >
    </div>
</form>

Upvotes: 0

Views: 57

Answers (2)

Navid_pdp11
Navid_pdp11

Reputation: 4012

you are calling form submit witch will force your page to reload. you must use button input type instead of submit and use ajax to send data to the server side. this code can make things clear:

 <!DOCTYPE html>
    <html>
    <body>

       <form id="myform" class="form_statusinput">
            <input class="input" name="mcode" id="mcode" placeholder="Saysomething" autocomplete="off">
            <div id="button_block">
                <input type="submit" id="button" value="Feed" >
                <input type="button" id="button1"  value="test"></button>
            </div>
        </form>

   </body>
   </html>


   <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" 
charset="utf-8"></script>
      <script type="text/javascript">
           $("#button1").on("click", function(){

           var mcode = $("#mcode").val();
           $.ajax({
              type: "POST",
              url: "add.php",
              data: {
                  mcode: mcode
              },
              success: function(data) {

                   alert('success');
               }
        });
});
</script>

Upvotes: 1

TALE
TALE

Reputation: 1

<script src="js/lib/jquery/1.11.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("form#myform").submit(function(event) {
        event.preventDefault();
        var mcode = $("#mcode").val();


        $.ajax({
            type: "POST",
            url: "add.php",
            data: {
                mcode: mcode
            },
            success: function(data) {

                 success: function(){alert('success');}
            }
        });
    });
});
</script>

<form id="myform" class="form_statusinput">
        <input class="input" name="mcode" id="mcode" placeholder="Say something" autocomplete="off">
    <div id="button_block">
        <input type="submit" id="button" value="Feed" >
    </div>
</form>

Upvotes: 0

Related Questions