CODEWITHSUNDEEP
javascriptjqueryhtml
markzzz
markzzz

Reputation: 47965

How to get HTML (with data inserted by the user) from a form

I have this jQuery code and my form :

<script type="text/javascript">
    $(document).ready(function() {                      
        var customForm=$('#addChartForm').html();   

        $("#addChartForm").delegate("form[name=chartForm]", "submit", function(e){
            e.preventDefault();

            customForm=$('#addChartForm').html();

            ... some AJAX operations ...
        });     
    });
</script>

<div class="main_content_remark" id="addChartForm" style="height:140px;">
    <form method='post' name="chartForm">
        <div class="categoryName">
            <div class="categoryName1">
                Title
            </div>

            <div class="categoryName2">
                <input type="text" maxlength="50" name="title" class="input400" />
            </div>

            <div class="categoryName3">
                <input type="submit" value="Create Chart" />
            </div>                  
        </div>              
    </form>
</div>

I'd like to store into the variable customForm the form code and all data inserted by the user in the input box.

For the code I mean the form HTML. In fact, with $('#addChartForm').html() I get it, but in addiction (and that's the problem) I'd like to get the data inserted by the user

Is it possible? how can I do this?

Upvotes: 1

Views: 230

Answers (6)

VAShhh
VAShhh

Reputation: 3504

Use something like this to store the data in an associative array

<script type="text/javascript">
        var customForm = array();
        $(document).ready(function() {

            $("#addChartForm").delegate("form[name=chartForm]", "submit", function(e){
                e.preventDefault();

                customForm['html'] = $('form[name=chartForm]').html();
                customForm['form'] = $('input[name=title]').val();

                ... some AJAX operations ...
            });
        });    
</script>

Upvotes: 1

Senad Meškin
Senad Meškin

Reputation: 13756

Add id to your input text name it as title for example

$('#title').attr('v-rel', $('#title').val());

customForm=$('#addChartForm').html().replace('v-rel', 'value');

ta da, you have it, html with values...

Upvotes: 1

Sujit Agarwal
Sujit Agarwal

Reputation: 12508

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Type 'correct' to validate.</p>
  <form action="javascript:alert('success!');">
    <div>
      <input type="text" />

      <input type="submit" />
    </div>
  </form>
  <span></span>
<script>

    $("form").submit(function() {
        $("span").text($("input:first").val()).show();
        return true;
    });
</script>

</body>
</html>

Here is the code that you want to make. I GUESS.

Upvotes: 0

John
John

Reputation: 1319

To answer your comment "I mean the HTML code :) In fact, with $('#addChartForm').html() I get it, but in addiction (and that's the problem) I'd like to get the data inserted by the user. – markzzz 7 mins ago" ...

customForm=$("input").val();

To get the INPUTED value of the input box use the above, since you have not defined the input box with a id or class you will need to call by "input" if you later add more inputs i recomend setting unique ID's

Upvotes: 1

Scott Harwell
Scott Harwell

Reputation: 7465

You could do something like this to store the data in an object...

<script type="text/javascript">
    $(document).ready(function() {                      
        var customForm = {
            html: $('#addChartForm').html(); 
            input400: $('#input400').val();
        };     
    });
</script>

Then reference the html like this

customForm.html

and the input value like this

customForm.input400

Upvotes: 1

Thor Jacobsen
Thor Jacobsen

Reputation: 8851

Using customForm = $('#addChartForm').clone(true) you will clone the entire form, including data and events, according to jQuery Docs - this will be the DOM elements, though, not the HTML markup.

Upvotes: 1

Related Questions