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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts

    prototype form submission

    hi guys I need a prototypr function to submit my form but I need it to be an onclick="" one cause I use a function to call forms come in to a div in html code and I understood that the javascripts does not redetect forms and divs in my page

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    depends once again on what you're trying to do. where are you submitting it to?

    js will find the new form, what it won't do is eval js that is created. you can however still include calls to an existing function within the populating code.

    prototype has a bunch of form handling, just need to know what you're trying to accomplish.

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I want submit the form via ajax and place the result from php file in a div where I have loaded the form

    I used below code but after submitting the form the whole page refreshes don't know why?
    Code:
    // here we define global variable
    var ajaxdestination="";
    
    function getdata(what,where) { // get data from source (what)
     try {
       xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
      		new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e) { /* do nothing */ }
    
     document.getElementById(where).innerHTML ="<center><img src='img/indicator.gif'></center>";
    // we are defining the destination DIV id, must be stored in global variable (ajaxdestination)
     ajaxdestination=where;
     xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
     xmlhttp.open("GET", what);
     xmlhttp.send(null);
      return false;
    }
    
    function triggered() { // put data returned by requested URL to selected DIV
      if (xmlhttp.readyState == 4) if (xmlhttp.status == 200)
        document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
    by setting action="#"
    and on input button nclick="getdata('view.php?id=$r[id]&ob=article','loading')"

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    ok, you can use all that if you want...... or you can use the ajax handling prototype has built in.

    in your other thread i put up a link to Ajax.Updater, which is what you want here.

    here is the code to take all the values from a form, send it to a php page with an ajax request and update an id with the return.

    Code:
    new Ajax.Updater('idofcontainer', 'mypage.php', {method: 'post', parameters: $('formid').serialize()});
    Updater will handle creating the request and post the values from your form to the php page you specify. Upon return, it will update the container you specify with the results. There are actually a LOT more options and callbacks you can use, but this basic example should get you going.

    If you want to you can include all of this in a function so you can call it all over the page if you so desire.

    Code:
    function updater(itemid,form){
    			
    			new Ajax.Updater( itemid, 'func.php', 
    			    { method: 'post', parameters: $(form).serialize()
    				} );
    			}

  • Users who have thanked ohgod for this post:

    SarahAria (02-13-2009)

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    no success here is what I've done
    the form that is loaded with the code I posted
    Code:
    <form id='myForm' action="javascript:void(0);">
    
    	<label for="FirstName" id="FirstNameLabel">
    		<span class="label" style=" float: $i_stl;">$addnews_subject: <span class="required">*</span></span>
    		<input type='text' name='subject' id="FirstName" title="$addnews_subject" value="$r[subject]" class="textbox validator-required" />
    	</label>
    
    	<label for="Surname">
    		<span class="label" style=" float: $i_stl;">$addnews_pics: <span class="required">*</span></span>
    		<INPUT TYPE='file' size='20' name='filename' id="Surname" title="$addnews_pics" value="$r[image]" class="textbox validator-required" />
    	</label>
    
    	<label for="Email">
    		<span class="label" style=" float: $i_stl;">$addnews_texts: <span class="required">*</span></span>
    		<textarea name='news' rows='15' cols='70'  id="addnews" title="$addnews_texts" class="textarea validator-required" >$r[news]</textarea>
    	</label>
    
    	<div class="toolbar">
            <input type='submit' value='Go'>
            |
    		<input type='reset' value='$addnews_clear'>
    	</div>
    
    <input type='submit' value='Go' onclick="updater(container,myForm,editnews.php)(,);">
    </form>
    and I added your function at the head of main page
    Code:
    <script type="text/javascript">
    function updater(itemid,form,page){
    
    			new Ajax.Updater( itemid, page,
    			    { method: 'post', parameters: $(form).serialize()
    				} );
    			}
    </script>

  • #6
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    Code:
    onclick="updater(container,myForm,editnews.php)(,);">
    well for starters your listing those like variables instead of plain old values. and i don't even know what (,) is supposed to be.

    try something like:

    Code:
    onclick="updater('container','myForm','editnews.php');">
    also, where is the element with the id of container?

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    sorry for that (,)

    but the form refreshes until I use javascript:void(0) in action
    and then nothing happens
    here is my min imized main page
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    
    
        <title><?php echo $admin_title ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="icon" href="images/favico.gif" type="image/x-icon">
    
    
    <!--Main adminstration scripts -->
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/mods.js"></script>
    <script type="text/javascript" src="js/FarzanehPro.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/boxes.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/menu.css" media="screen, projection">
    <link rel="stylesheet" type="text/css" href="css/calendar-win2k-1.css">
    <!--div plugin -->
    <script type="text/javascript" src="ajax/div.js"></script>
    <!--lytebox-->
    <script type="text/javascript" src="js/lytebox.js"></script>
    <link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />
    
        <script type="text/javascript">
    Event.observe('myForm', 'submit', function(event) {
        $('myForm').request({
            onFailure: function() { .... },
            onSuccess: function(t) {
                $('container').update(t.responseText);
            }
        });
        Event.stop(event); // stop the form from submitting
    });
    </script>
    <script type="text/javascript">
    function updater(itemid,form,page){
    
    			new Ajax.Updater( itemid, page,
    			    { method: 'post', parameters: $(form).serialize()
    				} );
    			}
    </script>
    </head><body id="html-body" class="adminhtml-dashboard-index">
    <div class="wrapper">
            <div class="header">
                <div class="header-top">
        <a href="http://demo-admin.magentocommerce.com/index.php/admin/"><img src="images/logo.png" alt="Magento Logo" class="logo"></a>
        <div class="header-right"><?php echo<<<ENDIT
            <p class="super" dir=$dir>
                $admin_loggedas &nbsp;مدير<span class="separator">|</span>Sunday, February 1, 2009<span class="separator">|</span><a href="http://demo-admin.magentocommerce.com/index.php/admin/index/logout/" class="link-logout">$admin_logout</a>
            </p>
    ENDIT;
    ?>
                </div>
    </div>
            <div class="clear"></div>
    
    <!-- menu start -->
    
    <!-- menu end -->
    <div class="nav-bar" dir=<?php echo $dir ?> >
        <ul id="nav">
        </ul>
    
        <p  ><a target="magento_page_help" id="page-help-link" href="http://www.simavisions.com/gethelp/<?php echo $lang; ?>/farzanehpro/dashboard/index/"><?php echo $admin_gethelp ?><img src=images/fam_help.gif /></a></p>
    
    </div>
    
            </div>
            <div class="notification-global">
                <span class="f-right"><?php echo<<<ENDIT
                $admin_msg1 <strong>2</strong> $admin_msg2 <strong>2</strong> $admin_msg3. <a href="http://demo-admin.magentocommerce.com/index.php/admin/notification/">$admin_toinbox</a>.
    ENDIT;
          ?>
                </span><?php echo<<<ENDIT
                <strong class="label">
    
        $admin_latestmsg: &nbsp;</strong> فرزانه نسخه 0.89 <a href="http://www.magentocommerce.com/blog/comments/magento-version-1203-now-available/" onclick="this.target='_blank';">$admin_viewmsg</a>
    ENDIT;
    ?>
    </div>
            <div class="middle" id="anchor-content">
                <div id="page:main-container">
                                <div id="messages"></div>
    
    <script type="text/javascript">
    //<![CDATA[
    function changeDiagramsPeriod(periodObj) {
        periodParam = periodObj.value ? 'period/' + periodObj.value + '/' : '';
        ajaxBlockParam = 'block/tab_orders/';
        ajaxBlockUrl = 'http://demo-admin.magentocommerce.com/index.php/admin/dashboard/ajaxBlock/' + ajaxBlockParam + periodParam;
        tabContentElementId = 'diagram_tab_orders_content';
        new Ajax.Updater(tabContentElementId, ajaxBlockUrl, {
            method: 'post',
            parameters: {isAjax: 'true', form_key: FORM_KEY}
        });
        ajaxBlockParam = 'block/tab_amounts/';
        ajaxBlockUrl = 'http://demo-admin.magentocommerce.com/index.php/admin/dashboard/ajaxBlock/' + ajaxBlockParam + periodParam;
        tabContentElementId = 'diagram_tab_amounts_content';
        new Ajax.Updater(tabContentElementId, ajaxBlockUrl, {
            method: 'post',
            parameters: {isAjax: 'true', form_key: FORM_KEY}
        });
    }
    
    function toggleCal(id) {
        $('dashboard_'+id+'_cal_div').toggle();
        $('dashboard_'+id+'_range_div').toggle();
    }
    //]]>
    </script>
    <div id="container">
            </div>
        </div>
        	<div id="loading-mask" style="display: none;">
        <p class="loader" id="loading_mask_loader" dir=<?php echo $dir ?>><img src="images/ajax-loader-tr.gif" alt="Loading..."><br><?php echo $admin_loading ?></p>
    </div>
    
    
    <div class="content-header-floating"><div class="content-header" style="float: <?php echo $align ?>">
        <table cellspacing="0">
            <tbody><tr>
                <td><h3 class="head-dashboard"><?php echo $admin_dashboard ?></h3></td>
            </tr>
        </tbody></table>
    </div></div></body></html>
    Last edited by SarahAria; 02-11-2009 at 03:06 PM.

  • #8
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    oh jesus

    you have an event observer acting on the form you're submitting with updater, i don't have any idea why you'd do that but it sure would cause a conflict.


    don't use void... don't use a link or a submit or whatever at all. just make a regular button or something and use an onclick event to call the function. then it would probably avoid that observer because it isn't submitting in the traditional sense.

  • #9
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    you mean even a use a regular button?
    I tried but no chance
    Code:
    <input type='button' value='Go' onclick="updater(container,myForm,editnews.php);">
    also tried a link but when I click nothing happens
    thanks dude
    Last edited by SarahAria; 02-11-2009 at 11:31 PM.

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks dude
    I executed the function successfully on a test page but on the main page
    gives an error like undefined form key
    I think it's because not being compatible with some other scripts I use?

  • #11
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    plz correct me could this function handle files too?

  • #12
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    what version of prototype are you using?

  • #13
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I think 1.6 also tried 1.5.0 no success
    perhaps I should use some other functions to send the file for me
    do you know a free ebook for learning prototype seems nice to learn I'm a php scripter
    Last edited by SarahAria; 02-12-2009 at 04:54 PM.

  • #14
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    bottom line, updater is normally super easy to use. i don't know how you're generating these forms (and i've never seen form-key or isAjax used as a param before, nor are they in the API that i see) but you must be hitting a conflict with some of your older code somehow. the fact that it worked on a test page but spazzed out on you on the main page supports this.

    the page is kind of a mess. out of general principle i'd say you might consider a clean start for it. are you really using everything that's in there? could it be cleaned up to remove the potential for conflict? i'd suggest re-evaluating what your page needs to do and building the logic from the bottom up again. it looks to me like you have redundant stuff in there.

    at the very least, just take a look at what you need your js to do. i think you'll find you can do a lot more with a lot less.



    and once again, you need those values you're passing in quotes... i see you forgot that again.





    if you'll make a list of things you need your js to do throughout the flow of the page i'd be happy to show you what i think might be the best way to accomplish those goals.
    Last edited by ohgod; 02-13-2009 at 02:51 PM.

  • Users who have thanked ohgod for this post:

    SarahAria (02-13-2009)

  • #15
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks dude now I'm sending all data from form to the php file I'm really learning something!
    the only problem is that the file (from form '<input type=file>') is not sent.

    What I am doing:
    right now I'm writing a Graphical CMS in php 80% it's now completed the only problem began since using ajax to make my cms really special without knowledge about it.

    the main problem:
    and right now I'm stocked at sending forms with files in ajax while the form is loaded with ajax.
    I'll try to upload a beta version tommorrow so you can see where the problem is

    thanks
    Sarah
    Last edited by SarahAria; 02-13-2009 at 10:03 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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