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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Ajax form input to variable

    Hello CodingForums,

    These are two snippets that works similar but need to combine them into script that fetch input values from form with each function


    These are two scripts that needs to combine and adapt into query for serialized form fields value' output to single string (second example to iterate form but to output as first example)

    Code:
    <hr>First example:Form Fields Variable Combining into String<hr><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <form> Product Name: <input type='text' id='txtName' value="jQuery By Example" /> <br/> <br/> Description 
    
    :<input type='text' id='txtDesc' value="It's Rocking" /> <br/><br/> Price :<input type='text' id='txtprice' 
    
    value="jQuery" /> <br/><br/> <input type='hidden' id='hdnData' /> <input type='button' class='order' 
    
    value='Submit' /> <p></p> </form>
    <form> Product Name: <input type='text' id='txtName' value="jQuery By Example" /> <br/> <br/> Description 
    
    :<input type='text' id='txtDesc' value="It's Rocking" /> <br/><br/> Price :<input type='text' id='txtprice' 
    
    value="jQuery" /> <br/><br/> <input type='hidden' id='hdnData' /> <input type='button' class='order' 
    
    value='Submit' /> <p></p> </form>
    <script>
    $(document).ready(function() { $('.order').click(function(e) { var txtData = []; $("form 
    
    :input[type=text]").each(function() { txtData.push($(this).val()); }); $("#hdnData").val(txtData.join(" : ")); 
    
    $('p').html($("#hdnData").val()); e.preventDefault(); }); });
    </script>
    
    <hr>Second example: Form Fields Values Looping through all forms and elements / needs adoption to output into variable string as above<hr>
    <form> Product Name: <input type='text' id='txtName' value="jQuery By Example" /> <br/> <br/> Description 
    
    :<input type='text' id='txtDesc' value="It's Rocking" /> <br/><br/> Price :<input type='text' id='txtprice' 
    
    value="jQuery" /> <br/><br/> <input type='hidden' id='hdnData' /> <input type='submit' value='Submit' 
    
    value='Submit' /> <p></p> </form>
    <form> Product Name: <input type='text' id='txtName' value="jQuery By Example" /> <br/> <br/> Description 
    
    :<input type='text' id='txtDesc' value="It's Rocking" /> <br/><br/> Price :<input type='text' id='txtprice' 
    
    value="jQuery" /> <br/><br/> <input type='hidden' id='hdnData' /> <input type='submit' value='Submit' /> <p></p> 
    
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <script>
    function submitForm(form){
        $(':input', form).each(function(){
           alert($(this).val());
        });
    }
    
    $(document).ready( function (){
        $('form').submit( function(){
            submitForm(this);
            return false;
        });
    });
    </script>
    Please help on this!

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    first problem, you are linking the jQuery library twice, you only need to do it once.
    second problem is you are using $('form') on a page with 2 forms. so it will reference both forms. Is this intended? Do you want to collect all the data from both forms then submit via ajax?

    to submit a form via ajax I generally do it like this

    Code:
    $(document).ready(function(){
     $("#myform").submit(function(e){
    e.preventDefault();
    var myData= $(this).serialize();
    $.ajax({
      type: "POST",
      url: "some.php",
      data: myData
    })
    })
    });
    Last edited by DanInMa; 09-09-2013 at 02:33 PM.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hello thank you for response,

    the above example includes two forms and scripts that are intended two work separately and I want to have the first form process output of form fields as the second form - for each multiple forms on page.

    please some suggestions

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by n381 View Post
    Hello thank you for response,

    the above example includes two forms and scripts that are intended two work separately and I want to have the first form process output of form fields as the second form - for each multiple forms on page.

    please some suggestions
    I'm sorry but I still do not understand the intent of what you want to accomplish. In the first part it looks like you want to make a serialized string, possibly for some kind of submittal of the form. You don't have to put it in an array then join it into a string, you can simply use .serialize() or .serializeArray() if you want an array created.

    what do you want to do with the data in the first form?

    side note:

    give the forms unique ID's or use this:
    $("form:eq(0)") == first form

    $("form:eq(1)") == second form

    $("form") == ALL forms on the page

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 583 Times in 564 Posts
    am i right to think that you want to combine all the queryString parameters of two forms into one data object/submit?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts
    hello again, well it's more complicated to describe than actual form operating

    I'm trying to get input elements of form(several form instances separately) and pass values to variable and output on a line.

    Adopted functionalities of both.. Regards

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by n381 View Post
    hello again, well it's more complicated to describe than actual form operating
    If you can't explain it , how are we supposed to understand?

    Quote Originally Posted by n381 View Post
    I'm trying to get input elements of form(several form instances separately) and pass values to variable and output on a line.
    So you want to get the values from both forms, put them all in a continuous, unbroken string variable, and show that string on the page somewhere?

    Code:
    $('form').submit(function(e){
    e.preventDefault();//prevent default action
    var myData = [];
    $.each($('form').find(":input"),function(){myData.push($(this).val()) });//get values of all form inputs
    alert(myData.join(",")); 
    });
    Last edited by DanInMa; 09-10-2013 at 05:30 AM.


  •  

    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
    •