CODEWITHSUNDEEP
javascriptjqueryforms
WhiteShadow
WhiteShadow

Reputation: 323

Get form input from specific form by name [JS]

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;

Upvotes: 0

Views: 7278

Answers (1)

wahiddudin
wahiddudin

Reputation: 103

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.

Upvotes: 1

Related Questions