CODEWITHSUNDEEP
javascriptphpjqueryhtml
zacknafein
zacknafein

Reputation: 50

I'm trying to use Ajax to send data to another page

Ok so it's a bit complex, and I don't understand why this is not working. I'm trying to make a page where you have some textbox and dropbox list, and a datagrid using easyui (that part works well). What I am trying to do is that when I'm selectionning something in one dropbox list, I'm doing 2 actions : Sending some info to another php page to write in a database, and changing the columns of my datagrid. This almost works. I write in the database, but every values are null, and my columns changes.

So, what I have for my droplist is something like :

    function changecolumn(){
    //those are my data from textbox/dropbox list
    		var headerData = {
    			'date'      : $('input[name=date]').val(),
    			'sunset'    : document.getElementById('sunset').value,
    			'sunrise'    : $('input[name=sunrise]').val(),
    			'moonset'    : $('input[name=moonset]').val(),
    			'moonrise'    : $('input[name=moonrise]').val(),
    			'moonphase'    : $('input[name=moonphase]').val(),
    			'instrument'    : selectedInstrument,
    			'obsname'    : $('input[name=obsname]').val(),
    			'astroresp'    : $('input[name=astroresp]').val(),
    			'techname'    : $('input[name=techname]').val()
    		};
        
    //Trying to uses ajax here.    
    		$.ajax({  
                              url:"test.php",  
                              method:"POST",
                              data: "headerData",
                              //data: {sunset : document.getElementById('sunset').value, sunrise : document.getElementById('sunrise').value, moonset : document.getElementById('moonset').value, moonrise : document.getElementById('moonrise').value, moonphase : document.getElementById('moonphase').value, instrument : selectedInstrument, obsname : document.getElementById('obsname').value, astroresp : document.getElementById('astroresp').value, techname : document.getElementById('techname').value  },
    			   success: function(data) {
                    alert("Data was succesfully captured"); },
            })
                // using the done promise callback
                .done(function(data) {

                    // log data to the console so we can see
                    console.log(data); 

                    // here we will handle errors and validation messages
                });


        //THIS PART IS WORKING, FOR MY DATAGRID
    		var listInstrument = document.getElementById("instrument");
    		var selectedInstrument = listInstrument.options[listInstrument.selectedIndex].text;
    		
    		if(selectedInstrument == 'one'){
    			$('#dg').datagrid({
    				columns:[[
            //this part is working
    				]]
    			});
    		}
    		else { 
        //this part is working
    		}
    		
    	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="instrument" name="instrument" onchange="changecolumn()">
    <option>
    <option> one
    <option> two
    <option> three
</select>

And in my PHP page, I uses : $sunrise = $_POST['sunrise']; to try to get the data, but everything is empty..

I'm not sure what is wrong, anyone have any idea?

Upvotes: 0

Views: 127

Answers (2)

flyingfox
flyingfox

Reputation: 13506

you using data: "headerData" to set data as a string in your ajax call ,you need to change it as below:

var headerData = {
        date      : $('input[name="date"]').val(),
        sunset    : document.getElementById("sunset").value,
        sunrise    : $('input[name="sunrise"]').val(),//add " in the query
        moonset    : $('input[name="moonset"]').val(),
        moonrise    : $('input[name="moonrise"]').val(),
        moonphase    : $('input[name="moonphase"]').val(),
        instrument    : selectedInstrument,
        obsname    : $('input[name="obsname"]').val(),
        astroresp    : $('input[name="astroresp"]').val(),
        techname    : $('input[name="techname"]').val()
};
//console.log(headerData); //check if it has data or not

$.ajax({  
          url:"test.php",  
          type:"POST",
          data: headerData,                
          success: function(data) {
                alert("Data was succesfully captured"); 
          },
}).done(function(data){

});

Upvotes: 2

Satish51
Satish51

Reputation: 119

You need to add "dataType: json", as you are passing data in a json format

$.ajax({  
          url:"test.php",  
          method:"POST",
          data: headerData,
          dataType: 'json',                
          success: function(data) {
                alert("Data was succesfully captured"); 
          },
})

Upvotes: 1

Related Questions