Get form input from specific form by name [JS]

Question

I have a from that PHP builds with and jQuery and ajax retrieve to the current page. The problem now is that all of the input elements have the same names and Id's. The forms do have unique ID's. How to I point to the unique form then to the input ID's that have duplicates?

All I need is something like document.FormId.inputID.value() So that I can get data from specific forms as the inputs themselves share Ids

Here is the code that the PHP uses:

while ($row = mysqli_fetch_array($result)) {
   $Output .= 
"<tr>".
'<form name="'.$row['EmailID'] .'"  action="" method="post">'.
"<td>" .
'<input name="Email" type="email" id = "Email" value="'.$row['Email'].'">'                      ."</td>"."<td>".
'<input name="FName" type="text" id = "FName" value="' . $row['FName'] .
'">' .
"</td>"."<td>" .
<input name="LName" type="text"  id = "LName" value="' . $row['LName'] .
'">' . "</td>".
//this hidden value passes the Email ID with the form
'<input id="EmailID" type="hidden" value="' . $row['EmailID'] . '" name="EmailID">'.

"<td>" .
'<input type="button" class="button" name = "Edit" id="Action" value = "Edit"  onclick="validateInput('.$row['EmailID'].')  />' 
. "</td>".
"<td>" 
. '<input type="button" class="button" name = "Delete"  id="Action"   value="Delete"
 onclick="validateInput('.$row['EmailID'].');" />'. "</td>".
"</form>".
"</tr>";
}   
echo $Output;

here is a form that it produces:

<tr>
<form name="21" action="" method="post">    <td><input name="Email" type="email" id="Email" value="[email protected]"></td>
<td><input name="FName" type="text" d="FName" value=""></td>
<td><input name="LName" type="text" id="LName" value=""></td>
<input id="EmailID" type="hidden" value="21" name="EmailID">
<td><input type="button" class="button" 
name="Edit" id="Action" value="Edit" onclick="validateInput(21) /></td>
<td><input type=" button"=""></td>
</form>

</tr>

Now here is the old JS that would pull the values then later use them through ajax. Right now this is broken and not working, but you can see how it was working.

function validateInput(RowId) { 


$(function() {
    $('.Action').click(function(event) {
        alert('Button ' + String(event.target.value) + ' was clicked!');
    });
});

var Action = document.getElementById("Action").value;
alert(Action);
if(Action == 'Delete'){
    var EmailID = document.getElementById("EmailID").value;
    var Email = document.getElementById("Email").value;
    alert("'Action == 'Delete'" + EmailID);


    $.ajax({
        url: "ProEmail.php",
        data: { Action: Action, EmailID: EmailID, Email:Email },
        type: "POST",
        success : function (data) {
            LoadTables();                       
        }
    });
    return null;
    }


var Fname = document.getElementById("FName").value;
var Lname = document.getElementById("LName").value;

@SamCreamer ... thank you but I did have it working just fine a different way with duplicut ids. I do want to see it it will work by using the form names then the element Ids. — WhiteShadow
– WhiteShadow, Commented Jun 23, 2014 at 14:17
yes, you can make it work using names, classes, etc, but IDs should still be unique. EDIT: otherwise what's the point of an ID? — Sam Creamer
– Sam Creamer, Commented Jun 23, 2014 at 15:02
Using duplicated IDs doesn't explicitly invalidate your HTML, but will almost certainly cause a lot of problems if you ever want to refer to them with javascript (which you do). — Sam Creamer
– Sam Creamer, Commented Jun 23, 2014 at 15:11

wahiddudin · Accepted Answer · 2014-06-23 14:28:28Z

1

Since your form has a name attribute, you can access the particular form using javascript by using document.formName. In your case document.21 should work.

answered Jun 23, 2014 at 14:28

wahiddudin

1036 bronze badges

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

7 Comments

WhiteShadow Over a year ago

Thankyou, Ill give that a shot. document.forms[formName].elements["InputID"].value; would that be it?

WhiteShadow Over a year ago

Cannot read property 'elements' of undefined on this line var test = document.forms[RowId].elements[FName].value;

wahiddudin Over a year ago

This should be a working example in your case: document.forms[0].elements['FName'].value. The quotes are important

wahiddudin Over a year ago

Use document.forms[0] to reference your first form and subsequent numbers for subsequent forms. rowId wont work as a good reference because it's a number and you're dealing with arrays and collections. Sorry if this is confusing or not helping you but I have tested this and it works for me.

WhiteShadow Over a year ago

So I would need to add reference numbers for the input IDs anyway wouldn't I?

|

Collectives™ on Stack Overflow

Get form input from specific form by name [JS]

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related