CODEWITHSUNDEEP
phpjavascriptformsdynamic
E. W. Chung
E. W. Chung

Reputation: 27

Modifying javascript to output form name instead of form id

I made several input field boxes with the following code:

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        $('.add').click(function(){
            par_id=$(this).parent().attr('id');
            count=$("#"+par_id+"> input").length;
            id=par_id.toString();
            $(this).parent().append("<br/><input type='text' id='"+id+"'>");
        });
    });//]]>  
</script>

I'm using the aforementioned code in order to create input fields that can dynamically add new fields.

This code creates multiple identical form ids, but I want it to create multiple identical form names so I can output it altogether using the foreach command.

Now I want to output the input data into a PHP using this 

<?php
    foreach($_POST['formid'] as $value) {
        echo "$value <br />";
    }
?>

What I want to ask is that the foreach command will only output data from the form name, but the javascript code I am using creates more input forms by the form id, not the form name.

So I need a code that will create more input boxes with form name, not form id!

I'm not sure how to modify the original code, since I got it from another website.

Please help!

Upvotes: 0

Views: 224

Answers (3)

RobG
RobG

Reputation: 147413

Just a comment:

> par_id = $(this).parent().attr('id');

The variable par_id should be kept local so declare it. The expression is simpler, more efficient and less to type as:

var par_id = this.parentNode.id;

regarding:

> count=$("#"+par_id+"> input").length;

As pointed out in other answers, the count variable is not used (and should be declared so it stays local). Since you want to use the element with id par_id more than once, consider:

var par_el = this.parentNode;
var par_id = par_el.id;
var count = $(par_el).find('input').length;

Using property access where available is much simpler and more efficient that calling functions to do the same thing.

Upvotes: 1

Nw167
Nw167

Reputation: 169

You simply need to add a name attribute to the code which is inserted by the javascript function.

Original:

$(this).parent().append("<br/><input type='text' id='"+id+"'>");

Ammended:

$(this).parent().append("<br/><input type='text' name='yourinputname' id='"+id+"'>");

EDIT: Just and afterthought...

If the ID serves no purpose and only the name attribute is required, the majority of this code is unnecessary and can be reduced to the following.

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        $('.add').click(function(){
            $(this).parent().append("<br/><input type='text' name='yourinputname');
        });
    });//]]>  
</script>

Upvotes: 1

bPratik
bPratik

Reputation: 7019

@Chung - I have tried to understand your question and have come up with the suggestions below, but you have to understand that your question is quite vague, confusing and possibly misleading.

Making minimal changes to your code:

$(document).ready(function() {
    $('.add').click(function() {
        par_id = $(this).parent().attr('id');
        par_name = $(this).parent().attr('name');
        count = $("#" + par_id + "> input").length;
        id = par_id.toString();
        $(this).parent().append("<br/><input type='text' name='" + par_name + "' id='" + id + "'>");
    });
});​

As demoed here:
http://jsfiddle.net/pratik136/2nV3m/

Some doubts/suggestions:

  • Why is there a count when you are not using it? par_id is always a string, but you are casting it to string, which suggests that you possibly were expecting the count in there somewhere?
  • In my suggested state, the form contains multiple inputs with the same name, as such, you will not be able to iterate over it using foreach, instead you will receive the values of all those elements as a comma-delimited list.
  • Are you then possibly wanting to name each element differently using the count and then loop at server-side using for instead of foreach? As demoed here: http://jsfiddle.net/pratik136/7pK29/

Upvotes: 1

Related Questions