We help IT Professionals succeed at work.

JAVASCRIPT POST FORM TO FUNCTION

rockas1982
rockas1982 asked
on
I have this java script function that i request from a php page and it updates a specific div

function ajaxpage(url, containerid){
document.getElementById(containerid).innerHTML="<center><H4>Loading ..."
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createKAVLIElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Open in new window


I was using a form like this

<form name="boost" action="#" method="post">

<p>
<label>Category</label>              
<select id="bcategory" class="" style="font-weight:bold;color:red;width:200px;text-align:center;" >
<option value=""></option>
<option value="DELAY VOICE">DELAY VOICE</option>
<option value="DELAY INTERNET">DELAY INTERNET</option>
<option value="OTHER">OTHER</option>
</select>
<br /><small>Please select the right category</small>
</p>

<p>
<label>CLI</label>
<input id="bcli" class="text-input" style="font-weight:bold;color:red;width:190px;text-align:center;" type="text" name="medium-input" maxlength="10" autocomplete="off" onKeyup="showCity(this.value);"/> 
<br /><small>Customer CLI problem refers to</small>
</p>

<p>
<label>SITE</label>
<label id="bsite" style="color:red">N/A</label>
</p>

<p>
<label>COMMENTS</label>
<input id="bcomments" class="text-input " style="font-weight:bold;color:red;width:90%;" type="text" name="medium-input" maxlength="2254" autocomplete="off"/> 
<br /><small>Keep it short ...</small>
</p>


<a class="button-r" id="breset" style="width:70px;text-align:center;" href="#" onclick="document.boost.reset();document.getElementById('bsite').innerHTML = 'N/A';" >CLEAR</a>

<a class="button-b" id="bboost" style="width:70px;text-align:center;" href="#" onclick="javascript:ajaxpage('action.php?action=add&bcategory='+document.getElementById('bcategory').value+'&bcli='+document.getElementById('bcli').value+'&bsite='+document.getElementById('bsite').innerHTML+'&bcomments='+document.getElementById('bcomments').value , 'main-content');" >BOOST</a>

<div id="respond"></div>

</fieldset>
<div class="clear"></div><!-- End .clear -->
</form>

Open in new window


but when i post large text in the textarea field  the result is empty in the database this is because i use the get method through link (sexnod.php?data=1), is there any way i could use post or any other way to post large data to second.php file so i could save them to my database or post them in to the same page i don't know

thnx sory for my english

p.s. maybe this helps http://mentaljetsam.wordpress.com/2008/06/02/using-javascript-to-post-data-between-pages/
Comment
Watch Question

Hello rockas1982,

You can use AJAX with POST method.

Look at following link for example

http://www.javascriptkit.com/dhtmltutors/ajaxgetpost2.shtml

http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

http://www.daniweb.com/web-development/php/threads/178496

Hope this will help you.

Thank You.

Amar Bardoliwala.