Finding multiple PHP generated inputs with Jquery/Javascript

Question

I can't seem to figure this one out.. I am trying to use Javascript to select an input value. The problem is that the form is being looped through a php array that gets eve which makes every single form the same name and the inputs the name. The javascript will only let me get the value of the first form. I have tried putting the forms into arrays with [] but I cant't get it.. please help.

    $find = mysql_query("
       SELECT `name`, `desc`, LEFT(`desc`, 80),`price`, `page`, `id`
       FROM `bang` 
       ORDER BY id ASC LIMIT 2 ") or die(mysql_error());

       while($resultt= mysql_fetch_array($find)){
          echo '<form id="linkcenter" action="">';
          echo '<input type="hidden" value="'.$resultt['id'].'" id="linkcenterr" name="linkcenterr"';
          echo '<input type="button" name="butn" value="Send" onClick="loadInfoo()">';
          echo '</select>';
          echo '</form>';
    }

Javascript and jQuery in seperate file:

    function loadInfoo() {  
       var id = document.getElementById('linkcenterr').value;
       //ajax and more java bellow that i know is working..
    }

All I am using the jquery for is to animate a box and then this input is going throught the javascript and sent to a php file which runs a sqlquery and echos all of the data from the database.

I know all the other code is working the problem is I don't know how to format these forms into an array so that the javascript can get each ones values when its clicked.

Michael Berkowski · Accepted Answer · 2012-11-07 01:12:30Z

An id attribute in an HTML element must be unique to the document. You are using the same id='linkcenterr' for all your form inputs and <form> tag, which is not valid. Most browsers will only choose the first one.

You must give unique ids to every node:

while($resultt= mysql_fetch_array($find)){
    // Use $resultt['id'] in the node id
    echo '<form id="linkcenter' . $resultt['id'] . '" action="" class="linkcenter-form">';
    // Use $resultt['id']  with another string in the node id
    // Don't forget to close the tag > here.
    echo '<input type="hidden" value="'.$resultt['id'].'" id="input_linkcenterr' . $resultt['id'] . '" name="linkcenterr" class="linkcenterr-input">' ;
    echo '<input type="button" name="butn" value="Send" onClick="loadInfoo()">';
    echo '</select>';
    echo '</form>';
}

In your JavaScript, you must then target them individually via document.getElementById() or in groups via document.getElementsByTagName().

If you are using jQuery as you have tagged, you can target all the forms with:

// Get all by class
var forms = $('form.linkcenter-form');

// Get all the inputs by class
var inputs = $('input.linkcenterr-input');

In your function loadInfoo(), you should pass the $resultt['id'] as a parameter, which you can use to target elements by id.

 // Pass the id into the function
 echo '<input type="button" name="butn" value="Send" onClick="loadInfoo(' . $resultt['id'] . ')">';

And define the function to use the id parameter in its selector:

function loadInfoo(idVal) {  
    // Concatenate the id param with onto linkcenterr:
    var id = document.getElementById('input_linkcenterr' + idVal).value;

    // Or the jQuery version:
    var id = $('#input_linkcenterr' + idVal).val();
}

Thanks man both your guy's answers worked. Thanks for that jquery part its exactly what i was looking for.

Kurt · Accepted Answer · 2012-11-07 00:44:43Z

0

Give <form> a class attribute and use that to get the forms. For example

HTML:

<form class="my_forms">
...

JQuery:

var forms = $(".my_forms");

answered Nov 7, 2012 at 0:44

Kurt

7,2222 gold badges22 silver badges16 bronze badges

Comments

Mike Brant · Accepted Answer · 2012-11-07 16:57:06Z

0

Simply implement a counter in your loop and add the counter value to the id like this:

$i=0;
while($resultt= mysql_fetch_array($find)){
    echo '<form id="linkcenter'.$i.'" action="">';
    echo '<input type="hidden" value="'.$resultt['id'].'" id="linkcenterr'.$i.'" name="linkcenterr"';
    echo '<input type="button" name="butn" value="Send" onClick="loadInfoo('.$i.')">';
    echo '</select>';
    echo '</form>';
    $i++;
}

Then adjust your javascript to get the value based on eh passed parameter

function loadInfoo(index) {  
var id = document.getElementById('linkcenterr'+index).value;
//ajax and more java bellow that i know is working..
}

edited Nov 7, 2012 at 16:57

answered Nov 7, 2012 at 0:43

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

Collectives™ on Stack Overflow

Finding multiple PHP generated inputs with Jquery/Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related