Home/ Questions/Q 9249823
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T10:17:42+00:00

Evening, I seem to have hit an issuee with submitting this html form via

  • 0

Evening, I seem to have hit an issuee with submitting this html form via a javascript onclick() function. This is my first time trying this, and i am new to js/ajax, however from my understanding of both i am doing this correctly… In the end this is my goal: user enters info – javascript/ajax constructs GET request and sends it – my php form runs each input field as its own query, every time the query is ran, it then echos the percentage of progress (after each query it runs) – which then (via the ajax) returns that percentage to my HTML5 progress bar (kudos to the new <prgress> tag.) and in turns creates a progress bar. however
1. I think i may be going about this wrong
2. the way im doing this should work
3. Im at the end of my rope…

here is my js:

function reply(){
 var total = document.getElementById("setName").name;
  var firstArray = new Array();
   for(i = 1; i <= total; i++){
    firstArray[] = "i = document.getElementById(i)";
   }
  //implode firstArray for uset in $_GET
  //aparently its called join...
  var GET = firstArray.join('&');

    //need to set up xml to run php for query
     if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp = new XMLHttpRequest();
      }
     else
      {// code for IE6, IE5
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

     xmlhttp.onreadystatechange = function(){
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
         document.getElementById("progressBar").innerHTML = xmlhttp.responseText;
       }
     };
xmlhttp.open("GET","ajaxQuery.php?"+GET,true);
xmlhttp.send();
}

Again, I am new to js/ajax, but not PHP, running the querys is not a problem and that part is working flawless, but this wont even run the onclick…. any and all help is apreciated guys.

as a side note, my input fields use numbers as name attribute, to better interact with the js, but here is the onclick call 

<button type = "button" onClick = "reply()">Submit</button>

I understand this could be A LOT better, feel free to tear it apart, the best way to learn is to be critisized on ones mistakes 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tried to rewrite some of your code with jQuery. It should work, but I did not test it:

    <!--Import jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">

    $(function() {
        $("#submitButton").click(function(){
            reply();
        })
    });

    function reply(){
        var total = document.getElementById("setName").name;
        var firstArray = new Array();
        for(i = 1; i <= total; i++){
            firstArray[] = "i = document.getElementById(i)";
        }
        //implode firstArray for uset in $_GET
        //aparently its called join...
        var GET = firstArray.join('&');     

        var jqxhr = $.ajax( {
            type: "GET",
            url: "ajaxQuery.php?"+GET
        } )
        .done(function(data) { 
            $("#progressBar").html( data );    
        });



    }
</script>

<button type = "button" id="submitButton">Submit</button>
    • 0