Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question How to use a form & post method to update database?

    I'm new to ajax and trying to put together code that will use a form and post method to update a database. In my first attempt, I declared and defined variables and had a submit button, when clicked, transfer the variable data - this worked just fine. However, when I tried to have the variables set via form input types, ie text box, radio buttons, etc. it does not work. First, the information typed/select in the form gets appended to the url - which defeats the post method purpose. Second, since the database is not updated, the php coded page seemingly is not receiving the variable information. Can anyone tell me where I've gone wrong? Thanks. Below is the code for the javascript/html components:

    Code:
    <html>
    <head>
    <title>Update Your Superhero</title>
    
    <script language="javascript">
    function sendData(){
       var XMLHttpRequestObj = false;
       
       var id;
       var newname;
       var newpower;
       var newweapon;
       var newtrans;
       
       var data = "id=" + id + "&" + "newname=" + newname + "&" + "newpower=" + newpower + "&" + "newweapon=" + newweapon + "&" + "newtrans=" + newtrans;
       
       if (window.XMLHttpRequest){
          XMLHttpRequestObj = new XMLHttpRequest();
          } else if (window.ActiveXObject) {
          XMLHttpRequestObj = new ActiveXObject("Microsoft.XMLHttp");
          }
          
       if (XMLHttpRequestObj){
          var url = "updatinghero.php";
          XMLHttpRequest.open("POST", url, true);
          XMLHttpRequest.setRequestHeader('Content-type', 'Application/x-www-form-urlencoded');
          
          XMLHttpRequestObj.onreadystatechange = function(){
             if(XMLHttpRequestObj.readystate == 4 && XMLHttpRequestObj.status == 200) {
             
             }
       }
       XMLHttpRequestObj.send(data);
    }
    }
    </script>
    </head>
    
    <body>
    <form>
    Select Id Number:
    <input type="radio" id="id" name="id" value="0">0</input>
    <input type="radio" id="id" name="id" value="1">1</input>
    <input type="radio" id="id" name="id" value="2">2</input>
    <input type="radio" id="id" name="id" value="3">3</input>
    <input type="radio" id="id" name="id" value="4">4</input>
    <input type="radio" id="id" name="id" value="5">5</input>
    <input type="radio" id="id" name="id" value="6">6</input>
    <br>
    Change Name:<input type="text" id="newname" name="newname"></input><br>
    Change Power:<input type="text" id="newname" name="newname"></input><br>
    Change Weapon:<input type="text" id="newweapon" name="newweapon"></input><br>
    Change Transportation:<input type="text" id="newtrans" name="newtrans"></input><br>
    <input type="submit" id="submit" name="submit" value="Submit" onClick="sendData()"></input>
    </form>
    </body>

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    well, how are you planning on getting the variable data to the ajax request?

    unless i'm missing something you're calling sendData() but aren't having it grab the values.


    to get the form values...

    Code:
    var myinput = document.<formname>.<inputname>.value;
    ...replacing <formname> and <inputname> with the respective names.


    also, and important to the above... you cannot have multiple elements with the same id!



    so, if you're not sending the var data then the receiving page won't be able to get it

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts
    After making a few corrections and adjustments, I still can't get my code to work. Below are my errors and their corrections.

    I was calling sendData(), but wasn't having it gather the input values. I corrected this with the following code:
    Code:
    var x = document.form['formname'].element['fieldname'].value;
    I also mis-typed XMLHttpRequestObj as XMLHttpRequest when I was using the open method (line 19 in my code, in my previous posting).

    My entire code with corrections is below. Any ideas where I might be still going wrong?
    Code:
    <html>
    <head>
    <title>Updating Heros with AJAX</title>
    <script language="javascript">
    
    function sendData(){
    	var XMLHttpRequestObj = false;
    	
    	var id = document.form['heroUpdate'].element['id'].value;
    	var newname = document.form['heroUpdate'].element['newname'].value;
    	var newpower = document.form['heroUpdate'].element['newpower'].value;
    	var newweapon = document.form['heroUpdate'].element['newweapon'].value;
    	var newtrans = document.form['heroUpdate'].element['newtrans'].value; 
    	
    	var params = "id=" + id + "&" + "newname=" + newname + "&" + "newpower=" + newpower + "&"+ "newweapon=" + newweapon + "&" + "newtrans=" + newtrans;
    	
    	if (window.XMLHttpRequest){
    		XMLHttpRequestObj = new XMLHttpRequest();
    	} else if (window.ActiveXObject){
    		XMLHttpRequestObj = new ActiveXObject("Microsoft.XMLHttp");
    		}
    		
    	if (XMLHttpRequestObj){
    		var url = "updatinghero.php";
    		XMLHttpRequestObj.open("POST", url, true);
    		XMLHttpRequestObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    	
    		XMLHttpRequestObj.onreadystatechange = function(){
    			if (XMLHttpRequestObj.readystate == 4 && XMLHttpRequestObj.status == 200){
    		
    			}	
    		}
    	XMLHttpRequestObj.send(params);
    	}
    }			
    </script>
    </head>
    
    <body>
    <form name="heroUpdate" method="post">
    Select Id Number:
    <input type="radio" name="id" value="0">0</input>
    <input type="radio" name="id" value="1">1</input>
    <input type="radio" name="id" value="2">2</input>
    <input type="radio" name="id" value="3">3</input>
    <input type="radio" name="id" value="4">4</input>
    <input type="radio" name="id" value="5">5</input>
    <input type="radio" name="id" value="6">6</input>
    <br>
    Change Name:<input type="text" name="newname"/><br>
    Change Power:<input type="text" name="newname"/><br>
    Change Weapon:<input type="text" name="newweapon"/><br>
    Change Transportation:<input type="text" name="newtrans"/><br>
    
    <input type = "submit" name="submit" value="Submit" onClick="sendData()" />
    </form>
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I made 2 changes to make the code work:

    Firstly, I changed the code for retrieving values from the form. The code I now have is:
    Code: [Select]
    var x = document.getElementById('formName').fieldName.value;

    Secondly, in my form I was using radio buttons, to successfully retrieve the correct value I used the following.
    Code: [Select]
    interval = document.getElementById('formName').fieldName.length;
    for (i=0; i<interval; i++){
    if(document.getElementById('formName').fieldName[i].checked){
    var id = document.getElementById('formName').fieldName[i].value;
    }
    }
    With the aforementioned changes/corrections I got the code to work.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •