javascript - How can I use Ajax to update data in two different input type forms without it clearing information from the other? -

i creating webpage allow users upload own images , create collage, able add title , (eventually) save/retrieve title.

i using ajax handle setting image background using js below:

function setuploadedbackground(filename){     var ajx;     if (window.xmlhttprequest)     {// if browser if ie7+[or] firefox[or] chrome[or] opera[or]safari         ajx=new xmlhttprequest();     }     else     {//if browser ie6, ie5         ajx=new activexobject("microsoft.xmlhttp");     }     ajx.onreadystatechange=function()     {         if (ajx.readystate==4 && ajx.status==200)         {             //change background         }     }     ajx.open("get","index.jsp",true);     ajx.send();     return false; } 

the form "uploadaction" uses following action jsp upload , save files.

<form id= "uploadform" action="                      <%@ page import="java.io.*,java.util.*, javax.servlet.*" %>                     <%@ page import="javax.servlet.http.*" %>                     <%@ page import="org.apache.commons.fileupload.*" %>                     <%@ page import="org.apache.commons.fileupload.disk.*" %>                     <%@ page import="org.apache.commons.fileupload.servlet.*" %>                     <%@ page import="org.apache.commons.io.output.*" %>                      <%                     int uploadfailed = 0;                     file file ;                     string filename = null;                     int maxfilesize = 500000 * 1024;                     int maxmemsize = 5000 * 1024;                     servletcontext context = pagecontext.getservletcontext();                     string filepath = context.getinitparameter("file-upload");                      // verify content type                     string contenttype = request.getcontenttype();                     //if (contenttype.indexof("multipart/form-data") >= 0) {                      diskfileitemfactory factory = new diskfileitemfactory();                     // maximum size stored in memory                     factory.setsizethreshold(maxmemsize);                     // location save data larger maxmemsize.                     factory.setrepository(new file("uploads/"));                      // create new file upload handler                     servletfileupload upload = new servletfileupload(factory);                     upload.setheaderencoding("iso-8858-2");                      // maximum file size uploaded.                     upload.setsizemax( maxfilesize );                     try {                         // parse request file items.                         list fileitems = upload.parserequest(request);                          // process uploaded file items                         iterator iter = fileitems.iterator();                          while ( iter.hasnext () ) {                             fileitem fi = (fileitem)iter.next();                             if ( !fi.isformfield () ) {                                  // uploaded file parameters                                 string fieldname = fi.getfieldname();                                 filename = fi.getname().replaceall("\\s", "");                                  string mimetype = getservletcontext().getmimetype(fi.getname());                                  if(mimetype == null) mimetype = fi.getcontenttype();                                 if (mimetype.startswith("image")) {                                     string command = "update users set mm11='"+filename+"' name = 'gjeta'";                                     st.executeupdate(command);                                      boolean isinmemory = fi.isinmemory();                                     long sizeinbytes = fi.getsize();                                      // write file                                     if( filename.lastindexof("\\") >= 0 ) {                                         file = new file( filepath + filename.substring( filename.lastindexof("\\"))) ;                                     }                                     else {                                             file = new file( filepath + filename.substring(filename.lastindexof("\\")+1)) ;                                         }                                         fi.write( file ) ;                                     }                                     else uploadfailed = 2;                                  }                             }                         } catch(exception ex) {                             system.out.println(ex);                             if(ex.tostring().contains("iofileuploadexception")) uploadfailed = 1;                         }                     //}                     %>"                         method="post" enctype="multipart/form-data">                     <input class="uploads" type="file" name="file" size="50"/>                     <input class="uploadfile" type="submit" value="upload file"/>                     <script type="text/javascript">                         <% if (uploadfailed == 0) { %>                         setuploadedbackground('<%=filename%>');                         <% } else if (uploadfailed == 1) { %>                                 alert("maximum file size exceeded");                                 <% } else if (uploadfailed == 2) { %>                                         alert("please upload image");                                     <% } %>                      </script>                 </form> 

my problem doing erases data in other form use allow users input , update collage title. code here:

<form id = "nameboardform" method="post">     <input type='text' name='collagename' id='collagenameinput' />     <input type='submit' name='submit' id='submitbtn' value="save collage" class='enableoninput' disabled='disabled' /> </form> 

to update title using ajax, use js

$( "#nameboardform" ).on( "submit", function( event ) {                event.preventdefault();                console.log( $( ).serialize().replace(new regexp("\\+", "g"), ' ') );                updatetitle($( ).serialize().replace(new regexp("\\+", "g"), ' '));                 }); 

i know problem when uploading file, upload form redirects action page, , although use ajax set uploaded image background of container div, fact not using

event.preventdefault(); 

means form submit causes redirect, far understand. have tried using same kind of logic nameboardform uses, ie, using jquery change happens on submit cannot file name parameter need using serialize() because seems return empty string file input form (even though works text input form)

is there way can around this? @ moment if user uploads image, set div background, , can change collage title 'untitled' own collage name, using ajax, without affecting uploaded image/background of div. however, if user sets name of collage first, when image uploaded , set background, collage title reset 'untitled' user loses data have input...

eventually idea save filename database under collage title users can search collages titles have used before , have collage redisplayed based on images uploaded. however, means data input collage title crucial , cannot erased ajax setting image div background - advice? have been googling solution ages seems file input forms weird, , haven't found useful.

edit-----------------------

the resulting html is:

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml">     <head>         <title>testing</title>         <script src="js/jquery-1.8.1.min.js" type="text/javascript" language="javascript"></script>         <script src="js/setuploadedbackground.js" type="text/javascript" language="javascript"></script>         <script src="js/enablebutton.js" type="text/javascript" language="javascript"></script>          <!--script src="params.js" type="text/javascript"></script-->          <link href="css/newstyle.css" rel="stylesheet" type="text/css" />     </head>     <body>                     <h3 id="title"><div class="collagetitle">untitled</div></h3>          <form id = "nameboardform" method="post">             <input type='text' name='collagename' id='collagenameinput' />             <input type='submit' name='submit' id='submitbtn' value="save collage" class='enableoninput' disabled='disabled' />         </form>          <div id="uploadscontainer" class="mm11container" style="top:100px; left: 300px;">             <div id="img" class="mm11 card front face">                 <form id= "uploadform" action=""                     method="post" enctype="multipart/form-data">                     <input class="uploads" type="file" name="file" size="50"/>                     <input class="uploadfile" type="submit" value="upload file"/>                     <script type="text/javascript">                         <% if (uploadfailed == 0) { %>                         setuploadedbackground('<%=filename%>');                         <% } else if (uploadfailed == 1) { %>                                 alert("maximum file size exceeded");                                 <% } else if (uploadfailed == 2) { %>                                         alert("please upload image");                                     <% } %>                      </script>                 </form>             </div>         </div>         <script src="testing.js" type="text/javascript"></script>     </body> </html>