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 6 of 6

Thread: Ajax form data

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    158
    Thanks
    71
    Thanked 1 Time in 1 Post

    Ajax form data

    Hi, just wondering. If I have a form but the form doesnt have conventional input types as shown below (using JQuery Mobile)
    Code:
    <form id="form2">
                <div data-role="collapsible-set" data-theme="c" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:80%;">
                <div data-role="collapsible" data-inset="false" id="from-container">
                    <h2>From <span id="from-header-content">Please choose...</span></h2>
                    <ul data-role="listview" data-inset="false">
                        <li><span class="code">LON</span><span class="name">London Area Airports</span></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-inset="false" id="to-container">
                    <h2>To <span id="to-header-content">Please choose...</span></h2>
                    <ul data-role="listview" data-inset="false">
                        <li><span class="code">LON</span><span class="name">London Area Airports</span></li>
                    </ul>
                </div>
            </div>
                <div data-role="fieldcontain">
                    <input id="submit-btn2" type="submit" value="SEND" data-inline="true"/>
                </div>
            </form>
    Is there anyway to get this data sent to php via ajax? I was hoping I could do the conventional
    Code:
    $('#form2').submit(function () {
     $.post("forms/requestProcessor.php", $("#form2").serialize(), function (data) {
            confirmationVar.text(data);
        });
    
    });
    But that doesnt seem to work. Is there another way to get this sort of data over?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well, you would need to take a look at the resulting html of your listviews so you can figure out how the selections are being identified on the client side. if it's not using form inputs, maybe it applies a specific class to those selections? if so you could use .each() on elements with that class, get the id of the selection and the text of the selection and push that info into an array as a name/value set and then use .serializeArray() to sort the data to be posted.

  • Users who have thanked DanInMa for this post:

    nick2price (04-09-2013)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    158
    Thanks
    71
    Thanked 1 Time in 1 Post
    On a few of the forms aswell, I actually do create an input element like so
    Code:
    var $input = $("<input/>").appendTo($headerContent);
    Is there any way to add a name attribute to this? I have tried without success
    Code:
    $input.attribute('name', 'myInput');

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    in jQuery its .attr() . remember you need a way to uniquely identify the data into a name/value set. Im assuming you have a DB that this data is going into? so how are you defining those fields now?

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    158
    Thanks
    71
    Thanked 1 Time in 1 Post
    Its not actually going into a database, just sending it to php to be emailed. Come to think about it though, I dont think I would need to get the inputs. I have a file which has a function for every "input" I have (not form input, just a general input. Some inputs are selects etc). In each of these functions, I add the inputs to the header. So I do something like
    Code:
    $list.find("li").live("tap", function(evt) {
        $this.data("name", $(this).html());
        $this.trigger("collapse");
    });
    
    var name = $this.data("name");
    if (name) {
        $headerContent.html(name);
    }
    The above is for a tap event, but I also do similar things for field inputs.

    Could I then ajax this to php, maybe something like
    Code:
    $.ajax({
            type: 'POST',
            url: 'forms/requestProcessor.php',
            data: { name: this.data("name"), age: this.data("age") },
            success: function(response) {
            }
        });

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    jQuery is great, isn't it? million ways to skin a cat


  •  

    Posting Permissions

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