Databases
StackOverflow2013
Postsdbo
POdiv with form, and that form being displayed inside the same div
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdiv with form, and that form being displayed inside the same div
    primarykey
    data
    text
    <p>My first post here, and Ithink i searched a lot BEFORE asking this question.</p> <p>I used these examples but without sucess:</p> <ul> <li><p><a href="https://stackoverflow.com/questions/1218245/jquery-submit-form-and-then-show-results-in-an-existing-div">jquery submit form and then show results in an existing div</a></p></li> <li><p><a href="https://stackoverflow.com/questions/1266697/form-submit-in-div-using-jquery">Form submit in DIV using jQuery</a></p></li> </ul> <p>My question is:</p> <p>I have a div with a form inside it</p> <pre><code>&lt;div id="mydiv"&gt; &lt;form id="myform" method="post" action="action.php?id=1&amp;lang=en"&gt; ... &lt;/form&gt; &lt;/div&gt; </code></pre> <p>the problem is:</p> <p>1) I can't submit the form result to the div "mydiv"</p> <p>2) the goal is to submit without doing a refresh </p> <p>neither 1 nor 2 works for me</p> <p>javascript used:</p> <pre><code>$(document).ready(function() { $('#myform').submit(function () { $.post('action.php?id=1&amp;lang=en', $('#myform').serialize(), function (data, textStatus) { $('#mydiv').append(data); }); return false; }); }); </code></pre> <p>EDIT: i use 2 files:</p> <p>1 is the main file, and the second file (the one that have the "myform") is used inside the "mydiv".</p> <p>when i SUBMIT, the form JUMP to a new page (not supposed) but without any Jquery/javascript scripts loaded (because they are in the mainfile).</p> <pre><code>example: FILE_1 main.php (with jquery/js scripts loaded) loads inside "mydiv" FILE_2 action.php (with the form) </code></pre> <p>complicated?</p> <hr> <p>an update to my question:</p> <p>i created a simple script to show you what im trying to do here:</p> <p>divform.html</p> <p> </p> <pre><code>&lt;title&gt;test&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;!-- THIS SCRIPT ALLOW TO USE A DIV AS A TARGETED IFRAME --&gt; &lt;script type="text/javascript"&gt; /*********************************************** * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no) var loadedobjects="" var rootdomain="http://"+window.location.hostname var bustcacheparameter="" function ajaxpage(url, containerid){ 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)? "&amp;"+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 &amp;&amp; (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&lt;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.createElement('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 } } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="centerbody" style="width: 600px; height: 300px; border: 1px solid #ccc; margin: 0 auto;"&gt; &lt;div id="linkzone" style="width: 120px; height: 250px; border: 1px solid #f00; float: left; display: inline;"&gt; &lt;a href="javascript:ajaxpage('action.php?i=link1', 'mydiv');"&gt;goto link1&lt;/a&gt; &lt;br&gt; &lt;a href="javascript:ajaxpage('action.php?i=link2', 'mydiv');"&gt;goto link2&lt;/a&gt; &lt;/div&gt; &lt;div id="mydiv" style="width: 400px; height: 200px; border: 1px solid #000; float: right; display: inline;"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and a php script that is loaded inside "Mydiv" / do the form thing:</p> <p>action.php:</p> <pre><code>&lt;script type="text/javascript"&gt; /** THIS SCRIPT IS SUPPOSED TO ALLOW A FORM SUBMITION BEING loaded in the same div, without refreshing it */ $(document).ready(function() { $('#myform').submit(function () { $.post('action.php?i=link2', $('#myform').serialize(), function (data, textStatus) { $('#mydiv').append(data); }); return false; }); }); &lt;/script&gt; &lt;? if ($_GET['i']=="link1") { echo "link 1"; ?&gt; &lt;br&gt;&lt;a href="javascript:ajaxpage('action.php?i=link2', 'mydiv');"&gt;goto link2&lt;/a&gt; &lt;? } if ($_GET['i']=="link2") { $error="0"; $sent=""; if (isset($_POST['submit'])=="go") { if ($_POST['form_1']!=""){ echo "good...( {$_POST['form_1']} )...&lt;p&gt;"; $sent=1; } else{ $error=1; } } if ($sent=="1"){ echo "...gogogogo... should refresh to another link...5 secs after... (inside here)"; } else{ echo "link 2"; ?&gt; &lt;br&gt;&lt;a href="javascript:ajaxpage('action.php?i=link1', 'mydiv');"&gt;goto link1&lt;/a&gt; &lt;form id="myform" method="post" action="action.php?i=link2"&gt; input zone: &lt;input type="text" name="form_1"&gt; &lt;input type="submit" value="go" name="submit"&gt; &lt;/form&gt; &lt;? if ($error=="1") { echo "* mandatory fields"; } } } ?&gt; </code></pre> <p>probably now you can understand better what im trying to fix/do.</p> <p>thanks, and sorry for some bad-posting, as i said, my 1st post and im not very used to this :)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USxampione
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCan you show your Javascript?
      singulars
      1. POdiv with form, and that form being displayed inside the same div
      1. USWaleed Khan
    2. CO`action="action.php?id=1&lang=en"` Try not to mix GET and POST. If you can, put `id` in a hidden input, and store `lang` in a cookie or session variable.
      singulars
      1. POdiv with form, and that form being displayed inside the same div
      1. USWaleed Khan
    3. COYou don't submit to a div ! You submit to a page (request)
      singulars
      1. POdiv with form, and that form being displayed inside the same div
      1. USPetar Sabev
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload