javascript click function not working on form generated in php

Question

I have a form created using echo command in php. It is being displayed correctly. I have a javascript which detects click on radio button of form and displays the hyperlink/anchor corresponding to each button group, which is not working.

But if I create the form in html only without any php, it works perfectly. please HELP.

Form creation

echo("<form name ='input' action = 'result.php' method = 'POST'>");
while($row = mysqli_fetch_array($result,MYSQLI_NUM))
{
    echo(($i+1)." ".$row[1]."<br>");
    echo("
    <input type = 'radio' value = $row[2] name = '$i'>$row[2]&nbsp&nbsp&nbsp&nbsp
    <input type = 'radio' value = $row[3] name = '$i'>$row[3]<br>
    <input type = 'radio' value = $row[4] name = '$i'>$row[4]&nbsp&nbsp&nbsp&nbsp
    <input type = 'radio' value = $row[5] name = '$i'>$row[5]&nbsp&nbsp
    <a id='$i' href='javascript:clear($i)'>Reset</a><br>");
    $i++;
    $z[]=$row[6];
}

SCRIPT

$('input:radio').click(function() { 
    var n = $(this).attr('name');
    var k ='#' + n;
    alert($(this).attr('name')); 
    $(k).show(400);
    });

And the generated HTML sent to the browser would also be helpful. — Erik Nedwidek
– Erik Nedwidek, Commented Oct 4, 2013 at 15:37
Try putting the html output. php's echo isn't your problem because that is interpreted in the server. In this code I can say. 1) Close the form. 2) quote the radio value. Those aren't errors per se but will show cleaner output — Alwin Kesler
– Alwin Kesler, Commented Oct 4, 2013 at 15:38
@ErikNedwidek this is the generated HTML sent to browser : pastebin.com/eNviPC09 — user2692256
– user2692256, Commented Oct 4, 2013 at 15:41

Ashis Kumar · Accepted Answer · 2013-10-05 02:48:37Z

2

You can try changing $('input:radio') to $('input[type="radio"]').

Try this

$('input[type="radio"]').on('click', function() { 
    var n = $(this).attr('name');
    var k ='#' + n;
    alert($(this).attr('name')); 
    $(k).show(400);
});

edited Oct 5, 2013 at 2:48

answered Oct 4, 2013 at 15:38

Ashis Kumar

6,5542 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pavlo Over a year ago

Could you expand your answer a bit more about the difference between those two selectors?

Erik Nedwidek Over a year ago

The difference in those selectors is that the second uses the [attribute=value]. The : is used with pseudo classes and radio is not a pseudo class. Examples of pseudo classes are input:first-child, input:focus, etc.

Trevor · Accepted Answer · 2013-10-04 15:38:25Z

0

$('body').on('click','input:radio',(function() { 
  var n = $(this).attr('name');
  var k ='#' + n;
  alert($(this).attr('name')); 
  $(k).show(400);
});

When clicking on dynamically created elements you need to use event delegation.

answered Oct 4, 2013 at 15:38

Trevor

16.1k10 gold badges56 silver badges85 bronze badges

5 Comments

Pavlo Over a year ago

Form is generated server-side, there are no AJAX calls in the question, why do you think it is dynamically created?

Edward Over a year ago

Not if it was generated using php, AJAX maybe but not php alone.

Trevor Over a year ago

Only because he said that his same jquery was working in pure html. But if I create the form in html only without any php so I assumed that maybe the php was being shown after the document was initially loaded.

Trevor Over a year ago

That would lead me to believe that something is wrong with his html generation via php and not his java script then.

Trevor Over a year ago

Great, If your html body is really big i.e. contains more then just your form I would recommend surrounding your form by a div and doing $('#yourDivID').on('click','input:radio'.. etc.. so that its just listening on your div for clicks and not the whole body. It would improve performance on large html files. Note: the div would need to be part of your original html and not generated by your php.

Alwin Kesler · Accepted Answer · 2013-10-04 15:40:52Z

0

Hmm... your problem is that $row array should be with curly brackets because you're in double quotes

echo("<form name ='input' action = 'result.php' method = 'POST'>");
while($row = mysqli_fetch_array($result,MYSQLI_NUM))
{
    echo(($i+1)." ".$row[1]."<br>");
    echo("
    <input type = 'radio' value = '{$row[2]}' name = '$i'>{$row[2]}&nbsp&nbsp&nbsp&nbsp
    <input type = 'radio' value = '{$row[3]}' name = '$i'>{$row[3]}<br>
    <input type = 'radio' value = '{$row[4]}' name = '$i'>{$row[4]}&nbsp&nbsp&nbsp&nbsp
    <input type = 'radio' value = '{$row[5]}' name = '$i'>{$row[5]}&nbsp&nbsp
    <a id='$i' href='javascript:clear($i)'>Reset</a><br>");
    $i++;
    $z[]=$row[6];
}

answered Oct 4, 2013 at 15:40

Alwin Kesler

1,5301 gold badge20 silver badges42 bronze badges

1 Comment

Edward Over a year ago

This would have flagged Encaps error, OP didn't show any error.

Collectives™ on Stack Overflow

javascript click function not working on form generated in php

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related