Results 1 to 5 of 5

Thread: ajax tabs content form submit

  1. #1
    Join Date
    Sep 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ajax tabs content form submit

    1) Script Title:
    ajaxtabscontent

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...tent/index.htm

    3) Describe problem:
    ok, i have this calling up a page with a simple form on it. how can i make it so when i hit the submit button that it loads in the same tab?

    i have tried all sort of stuff but cant think of what would work. anyone know?

    <form name="messageForm" method="post" action="_message.php">
    Subject: <input type="text" name="Subject" maxlength="50" size="40" value=""></td>
    Text: <textarea name="Text" cols="65" rows="4"></textarea>
    <input type="submit" name="Submit" value="Send Message" class="button">
    </form>

    so when i hit submit, the post results are shown in the same tab? i have tried this and it dont work

    onsubmit"javascript:linkjax('_message.php', 'ajaxcontentarea', 2, 'tabit');"

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    There is no easy way, as basically you'd have to edit the form submission script itself (message.php) to not redirect to a new page upon submission, but echo the result back to the browser for the Ajax script to pick up. In other words, you'd have to be proficient with PHP.

    An easier way is to define an iframe containing message.php as one of the contents for the Ajax Tab Content script to load. That way, when the form gets submitted, the result stays in the iframe, which in turn is contained within the tab content.

  3. #3
    Join Date
    Sep 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    well its not hard to echo back the result, but how do you keep it within the content tab? thats what i am asking.

  4. #4
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by inferno_23ca View Post
    1) Script Title:
    ajaxtabscontent

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...tent/index.htm

    3) Describe problem:
    ok, i have this calling up a page with a simple form on it. how can i make it so when i hit the submit button that it loads in the same tab?

    i have tried all sort of stuff but cant think of what would work. anyone know?

    <form name="messageForm" method="post" action="_message.php">
    Subject: <input type="text" name="Subject" maxlength="50" size="40" value=""></td>
    Text: <textarea name="Text" cols="65" rows="4"></textarea>
    <input type="submit" name="Submit" value="Send Message" class="button">
    </form>

    so when i hit submit, the post results are shown in the same tab? i have tried this and it dont work

    onsubmit"javascript:linkjax('_message.php', 'ajaxcontentarea', 2, 'tabit');"
    Here ya go

    POSTFORM.PHP
    HTML Code:
    <script type="text/javascript" src="ajaxform.js" language="javascript"></script>
    
    <div id='form_reactie' style="display:block;">
    <form action="javascript:get(document.getElementById('FormReactie'));" name="FormReactie" id="FormReactie">
    <input name="type" id="type" type="hidden"/>
    <!-- POST THE VARS -->
    <input name="post1" id="post1" type="hidden" value="<?= $post1; ?>" />
    <input name="post2" id="post2" type="hidden" value="<?= $post2; ?>" />
    <input name="post3" id="post3" type="hidden" value="<?= $post3; ?>" />
    <!-- SUBMIT -->
    <input type="submit" name="button" value="Submit" onclick="javascript:get(this.parentNode);" />
    </form>
    </div>
    <span name="post_reactie" id="post_reactie"></span>
    AJAXPOST.JS
    HTML Code:
    	<script type="text/javascript" language="javascript">   
    	var http_request = false;
       function makePOSTRequest(url, parameters) {
          http_request = false;
          if (window.XMLHttpRequest) { // Mozilla, Safari,...
             http_request = new XMLHttpRequest();
             if (http_request.overrideMimeType) {
    
                http_request.overrideMimeType('text/html');
             }
          } else if (window.ActiveXObject) { // IE
             try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                try {
                   http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
             }
          }
          if (!http_request) {
             alert('Cannot create XMLHTTP instance');
             return false;
          }
          
          http_request.onreadystatechange = ShowContent;
          http_request.open('POST', url, true);
          http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          http_request.setRequestHeader("Content-length", parameters.length);
          http_request.setRequestHeader("Connection", "close");
          http_request.send(parameters);
       }
    
       function ShowContent() {
          if (http_request.readyState == 4) {
             if (http_request.status == 200) {
                //alert(http_request.responseText);
    		  
            result = http_request.responseText;
    		<!-- RESULT DIV -->
    		document.getElementById('post_reactie').innerHTML = result;
    	          
             } else {
                alert('Error while showing results');
             }
          }
       }
       
       function get(obj) {  
    
          var poststr = "post1=" + encodeURI( document.getElementById("post1").value ) +
    	  				"&post2=" + encodeURI( document.getElementById("post2").value ) +
    					"&post3=" + encodeURI( document.getElementById("post3").value );
    	
    	  <!-- REQUEST POST FILE -->
          makePOSTRequest('post.php', poststr);
    	  <!-- HIDE FORM DIV -->
    	  document.getElementById('form_reactie').style.display = 'none';
       }
    </script>
    POST.PHP
    PHP Code:
    <?    $post1    =    $_POST['post1'];
        
    $post2    =    $_POST['post2'];
        
    $post3    =    $_POST['post3'];
        
    $sql=("INSERT INTO post (post1, post2, post3) 
                                         VALUES ('NULL', '
    $_POST[post1]', '$_POST[post2]', '$_POST[post3]')"); 
        
    mysql_query($sql) or die(mysql_error());

    ?>
    <div align="center">
    Klik <a href="javascript:linkjax('agenda/<?= $post1?>.php?ID=<?= $post2?>', 'ajaxcontentarea', 1)">hier</a> om te verversen</td>
    </div>

  5. #5
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    There is no easy way, as basically you'd have to edit the form submission script itself (message.php) to not redirect to a new page upon submission, but echo the result back to the browser for the Ajax script to pick up. In other words, you'd have to be proficient with PHP.

    An easier way is to define an iframe containing message.php as one of the contents for the Ajax Tab Content script to load. That way, when the form gets submitted, the result stays in the iframe, which in turn is contained within the tab content.
    I am using ColdFusion scripting and this might be exactly what I am looking for!

Bookmarks

Posting Permissions

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