1

I'm a newbie to web development and have started to build a site to read form fields and add to an sql db and update records. I got the site to work using basic php, html, css and javascript (using mysqli for the db access). I added jquery to use ajax functionality to do asynchrous processing for forms input and all still worked. Most of this work was finished by using the wonderful stackoverflow. I then added jquery mobile (css and js files held in my base directory) to use dropdowns and smaller select icons, all of which work. I am now a bit stuck because when I submit the form data the form disappears. The page is left where the form was called from (which is what I want) but the page is blank. My jquery code is:

$(document).ready(function(){
   $("#submit").click(function(){

        var update = $('input:checkbox:checked').map(function(){
             return this.value;
         }).get();
         var casename = $("#new_client").val();
         var email = $("#email").val();
         var contactname = $("#contactname").val();
         var contactnum = $("#contactnum").val();
         var time = $("#time").val();
         var notes = $("#new_notes").val();
         if (update == 'TRUE'){
            alert("add client...!!");
            if(casename ==''|| email==''|| contactname==''|| contactnum==''|| time==''|| notes==''){
                 alert("Insertion Failed Some Fields are Blank....!!");
           }
         }
         else{
            alert("update client...!!");
            if(time==''|| notes==''){
                 alert("Insertion Failed Some Fields are Blank....!!");
           }
         }
         // Returns successful data submission message when form information is stored in database.
         $.post("caseupdate.php",{ update1: update, casename1: casename, email1: email,
                   contactname1: contactname, contactnum1: contactnum, time1: time, notes1: notes},
                        function(data) {
                        alert(data);
                        $('#form')[0].reset(); //To reset form fields
                        $('#form').show();
    //********ADDED THIS AS ONE ATTEMPT TO FIX BLANK PAGE
                        });


    });
});

and the form just does the normal form input stuff from select options input. The forms are selected from various switch functions. I tried using the php header function but wasn't sure how to use it properly I think. As I say I'm very new to this and have done this work in my spare time in about 8 weeks without having any prior knowledge of web development although I have done lots of C and C++. Is there a simple basic understanding I'm missing? Insights very welcome.

lrnzcig
  • 3,868
  • 4
  • 36
  • 50
Keith E
  • 11
  • 1
  • Check this one out: http://stackoverflow.com/questions/15205437/jquery-mobile-how-to-correctly-submit-form-data/15205612#15205612 – Gjermund Dahl Mar 30 '16 at 14:37
  • Also add the tag [jquery-mobile] – Gjermund Dahl Mar 30 '16 at 14:38
  • Hi Gjermund, thanks for the reply. I'll look at the link you suggest but since I posted I re-read the docs and I now see that I needed a 'return false' to prevent the form being submitted and being dismissed. I tried this in the js file and the form now stays put. Thanks again. I'll try to close the post. – Keith E Mar 30 '16 at 21:09
  • yes, the link is a good explanation - the return false needs to be within the 'event handling' code to cancel the event. Thanks Gjermund. – Keith E Mar 30 '16 at 21:12

0 Answers0