get value from dynamic added text input

Question

i have to add some text input dynamically on my page as following:

$table=""; $n=0;
$arrayform=array();
foreach($rslt as $rows){                
            $table=$table."
                <div class='img-rounded row' style='margin-bottom:2%' >
                    <div class='col-lg-1'></div>
                    <div class='col-lg-4'>
                        <input id='cap-".$n."' type='text' class='form-control' value='".$rows['caption']."'>
                    </div>
                    <div class='col-lg-1' id='rightarrow'>
                        <img id='img-".$n."' src='img/right-arrow.png' width='45' height='30' alt=''/>
                    </div>
                    <div class='col-lg-4'>
                        <input id='val-".$n."' type='text' class='form-control' value='".$rows['value']."'>
                    </div>
                    <div class='col-lg-1'>
                        <input type='button' id='btn-".$n."' onClick='removeval(\"".$rows['caption']."\",\"".$rows['value']."\",\"".$_GET['id']."\",\"".$rows['id']."\")' class='btn btn-danger' value='Remove Column'>
                    </div>
                </div>
                <div id='divrslt-".$n."' class='row text-success' style='margin-left:10%; margin-bottom:2%'>
                </div>              
            ";

the id of form element's determine by $n variable and other strings.

i wrote following code to construct parameter list of input text values for send to a javascript function.

        $arrayform[$rows['caption']]="cap-".$n.".value,val-".$n.".value, ";         $n++;
}

And with following code i use the array that constructed in prior line as parameter to updatechartval() javascript function.

$table=$table."
    <div class='row' style='margin-left:4%'>
        <button type='button' class='btn btn-success' onClick='updatechartval(".implode(" ",$arrayform)."\"".$_GET['id']."\")' value='update'>
            Update
        </button>

    </div>
";

And then i echo that:

echo $table;

the rendered button code is:

<button type="button" class="btn btn-success" onclick="updatechartval(cap-0.value,val-0.value,  cap-1.value,val-1.value,  cap-2.value,val-2.value,  cap-3.value,val-3.value, &quot;126&quot;)" value="update">
            Update

but when i run the code, the id of element's was sent instead value of the text input's. how can i solve this? thanks...

BTW, read about onClick http://stackoverflow.com/questions/4380719/onclick-or-onclick — n-dru, Mar 16 '15 at 19:01

score 0 · Accepted Answer · answered Mar 16 '15 at 18:54

You are suffering from the javascript equivalent of an SQL injection attack:

[..snip..] onclick="updatechartval(cap-0.value,val-0.value,[..snip..]
                                   ^^^^^^^^^^^

You need to quote your parameters in the function call, because right now that code is being interpreted/executed as:

updateCharval(unknown/undefined variable "cap" minus 0.value, ...

An integer has no .value attribute, and since you're trying to subtract that undefined value attribute from an undefined variable, you're going to get a whole back of stuff blowing up in your face.

Your generator function should look more like:

$arrayform[$rows['caption']]="'cap-".$n.".value','val-".$n.".value' etc...
                              ^----------------^ ^----------------^

Note the extra quotes.

score 0 · Answer 2 · answered Mar 16 '15 at 18:56

You need to get the value of the input from the updatechartval(param1, param2) function. Right now you're trying to run javascript outside of a javascript tag.

So you'd end up with something like this:

function updatechartval(a,b) {
    valueA = document.getElementById(a).value;
    valueB = document.getElementById(b).value;
}

get value from dynamic added text input

2 Answers2