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.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    93
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Submit a form with AJAX without reloading

    For some reason i need to submit a form to an external website without changing the page. I'm a newbie with AJAX and i don't know how to do it so i would really appreciate if someone could help me.

    Here's the form i need to submit:

    <form action="https://nidieunimaitre.spreadshirt.com/shop/basket/addtobasket" method="post" name="tshirt_form" id="tshirt_form">
    <input type="hidden" name="product" id="productId" value="101894422"/>
    <input type="hidden" name="article" id="articleId" value="10568008"/>
    <input type="hidden" name="view" id="currentView10568008" value="351"/>
    <input type="hidden" name="color" id="productColor10568008" value="2"/>

    Size
    <select id="size" name="size">
    <option value="2" >S</option>
    <option selected value="3" >M</option>
    <option value="4" >L</option>
    <option value="5" >XL</option>
    <option value="6" >XXL</option>
    </select>
    <br>

    Quantity
    <select id="quantity" name="quantity">
    <option selected value="1" >1</option>
    <option value="2" >2</option>
    </select>
    </form>


    <div id="other">
    SUBMIT FORM
    </div>


    <script>
    $('#tshirt_form').submit(function() {
    alert('wtf do i need to do now ?');
    return false;
    });

    $('#other').click(function() {
    $('#tshirt_form').submit();
    });
    </script>
    Thanks a lot !

  • #2
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hey there,

    I suggest you post this in the AJAX subforum here:

    http://www.codingforums.com/ajax-design/

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you need the .ajax() function http://api.jquery.com/jQuery.ajax/

    - Id write an example but if you do a quick forum search youll find alot of examples ( it's about as common a question as how to show and hide elements on click)

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    93
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I'd really appreciate an example of a script that i could use to transmit the data of my form to the external website once the form is submitted because i'm really lost

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    93
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have tried following this tutorial:
    http://www.simonerodriguez.com/ajax-...ubmit-example/

    But it's not working I don't understand what i'm doing wrong

    Code:
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script src="scripts/ajaxsbmt.js" type="text/javascript"></script>
    </head>
    <body>
    
    <form name="MyForm" action="https://nidieunimaitre.spreadshirt.com/shop/basket/addtobasket" method="post"
    onsubmit="xmlhttpPost('https://nidieunimaitre.spreadshirt.com/shop/basket/addtobasket, 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">
        <input type="hidden" name="product" id="productId" value="101894422"/>
        <input type="hidden" name="article" id="articleId" value="10568008"/>
        <input type="hidden" name="view" id="currentView10568008" value="351"/>
        <input type="hidden" name="color" id="productColor10568008" value="2"/>
    
    Size
    <select class="b-core-ui-select__select" id="size" name="size"><option value="2" >S</option><option selected value="3" >M</option><option value="4" >L</option><option value="5" >XL</option><option value="6" >XXL</option></select>
    <br>
    
    Quantity
    <select class="b-core-ui-select__select" id="quantity" name="quantity">
    <option selected value="1" >1</option>
    <option value="2" >2</option>
    </select>
    
    <br>
    
    <input name="send_button" type="submit" value="Send" />
    </form>
    
    
    <div id="MyResult"></div>
    
    </body>
    </html>

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You're missing an apostrophe after /addtobasket:

    Code:
    onsubmit="xmlhttpPost('https://nidieunimaitre.spreadshirt.com/shop/basket/addtobasket', 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">
    I haven't checked beyond this.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    New Coder
    Join Date
    May 2007
    Posts
    93
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, it was a dumb error.

    Ok now the script *seems* to send the data (at least it doesnt reload the page)

    But after clicking the submit button, the basket is still empty

    When sending the form, a product is supposed to be added to the basket here:
    https://nidieunimaitre.spreadshirt.com/shop/basket/

    It works when i use a normal form, but doesn't work when i try to submit with AJAX

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I am unable to assist further, but suspect it might be a restriction of 'cross-domain posting'.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    New Coder
    Join Date
    May 2007
    Posts
    93
    Thanks
    4
    Thanked 0 Times in 0 Posts
    damn

    Any idea how i could submit a form to another domain without having to reload the page ?

    Currently i was using a method to submit the forum into an hidden iframe. It works very good BUT doesn't work in safari browser. I have explained my problem with this method here:
    http://www.codingforums.com/showthre...34#post1290234

    So, submit to iframe is buggy and AJAX submit doesn't work... Is there another way ?

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Maybe investigate HTML5/XHR2 for modern browsers.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

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