CODEWITHSUNDEEP
javascriptjqueryhtmlajaxforms
user2439278
user2439278

Reputation: 1214

How to handle form input with AJAX GET

This is my first attempt to create a page with HTML and javascript.

I have created a Form with 2 input (form and to date) and submit Button. The same page contains the table.

<h1 style="text-align:center"><b style="color:#ccc">ALM Availability Report</b></h1> 
<form id="availform" method="get">
<label for="fromdate"> FROM DATE </label>
<input id="from" type="datetime-local" name="fromdate">
<label for="enddate"> TO DATE </label>
<input id="end" type="datetime-local" name="enddate">
<button name="submit_button" class="submit_button" id="submit_button">Submit</button>
</form>
<br>
<br>
<div id=almserv >
    <span  style="top:10%;">ALM Service Availability %</span><br><br><br>
    <span id=servnum style="top:20%;font-size:75pt;"></span>
</div>
<br>
<br>

<div id="spinner" class="spinner" style="display:none;">
    <img id="img-spinner" src="./images/ajax-loader4.gif" alt="Loading"/>
</div>      

    <table id="service_table">
                    <thead>
                        <tr>
                            <th>Service Name</th>
                            <th>Service Desc</th>
                            <th>Time OK %</th>
                            <th>Time Warning %</th>
                            <th>Time Critical %</th>
                        </tr
                    </thead>
                    <tbody></tbody>
                    </table>

I'm using Nagios for server monitoring. I have generated the REST API url to access the Nagios and fetch the availability report. I need to pass the from date and to date form input to the AJAX call of the URL.

var end =  Form todate
var start = Form fromdate
servicereport = " http://xx.xx.xx/nagios/cgi-bin/archivejson.cgi?query=availability&availabilityobjecttype=servicegroups&hostgroup=ALM&servicegroup=ALM+Tools&assumedinitialhoststate=up&assumedinitialservicestate=ok&starttime=" + start + "&endtime=" + end;
$.support.cors = true;

 $.ajax({
 type: "GET",
 url: servicereport,
 crossDomain: true,
 beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization',
                        make_base_auth("nagiosadmin", "nagiosadmin"));
                },

 dataType: 'json',     //data format
 success: servicedisplay
 });

On success, the table will be updated with the values.

How to achieve this?

Upvotes: 0

Views: 46

Answers (1)

user2439278
user2439278

Reputation: 1214

I achieved this by below javascript.

HTML : 

<form name="NAME" id="avialform" action="">
  <fieldset>
     <legend style="color:white">AVAILABILITY REPORT</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>From Date :</label><input id="from" type="datetime-local" name="fromdate" /></td>
           <td><label>To Date :</label><input id="to" type="datetime-local" name="todate" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="vzuui-btn-red-active closeedit" type="button" id="getrepo">Submit</button>
</form>

Javascript:

$(document).ready(function(){
$("#getrepo").click(function(){
var Fdate = document.getElementById("from").value;
var Tdate = document.getElementById("to").value;
//ajax call

});
});

Upvotes: 1

Related Questions