We Keep Coding

Get form ID and it's fields values dynamically from multiple forms

Inside a table, I've created multiple forms using a loop based on data inside database.
Now I am not getting a way to implement a logic by which I wanted to identify of which form submit button is pressed so that I can update data accordingly in database.
What I did is putted an ID of that particular row as submit button id, but I am not getting how to put the same ID in javascript file (separate file) to fetch the field details, can someone help?
<?php
foreach ($get_subscribed_data as $filtered_items) { ?>
<tr>
<form id="<?php echo $filtered_items->id; ?>" method="POST">
<td><input type="text" class="form-group" id="user_account_name" value="<?php echo $filtered_items->user_account_name; ?>"><?php echo $filtered_items->user_account_name; ?></td>
<td><input type="text" class="form-group" id="user_project_name" value="<?php echo $filtered_items->user_project_name; ?>"><?php echo $filtered_items->user_project_name; ?></td>
<td><input type="text" class="form-group" id="start_date" value="<?php echo $filtered_items->start_date; ?>"><?php echo $filtered_items->start_date; ?></td>
<td><input type="text" class="form-group" id="due_date" value="<?php echo $filtered_items->due_date; ?>"><?php echo $filtered_items->due_date; ?></td>
<td><input type="submit" id="<?php echo $filtered_items->id; ?>" class="btn-primary btn-sm">Submit</button></td>
</tr></form>
<?php } ?>
UPDATE:
jQuery code I am using:
$(document).ready(function() {
$('.row-submit').on('click', e => {
alert('test');
e.preventDefault();
let $tr = $(e.target).closest('tr');
$.ajax({
type: "POST",
url: ajaxurl,
action: "send_modification_training_data",
data: {
user_account_name: $tr.find('.user_account_name').val(),
user_project_name: $tr.find('.user_project_name').val(),
start_date: $tr.find('.start_date').val(),
due_date: $tr.find('.due_date').val(),
},
success: response => {
console.log(response);
}
});
});
});

I'm presuming that you're using AJAX to send the form data, otherwise you wouldn't need to know which form was submit as the browser will collate the data for you.
To retrieve the data related to the clicked submit button you need to correct your HTML. Firstly, you need to remove all id attributes from the HTML you generate in the PHP loop as it will create duplicate values which is invalid, they must be unique. Change them to classes instead. Secondly, you cannot place a form element as a child of a tr.
In fact, given that you're using a table here you cannot use a form at all, as there's no way to make the HTML valid. You need to collate the input data on each row. To do this you can use closest() to find the tr related to the button and retrieve the input values using find(). Something like this:
<?php foreach ($get_subscribed_data as $filtered_items) { ?>
<tr>
<td>
<input type="text" class="form-group user_account_name" value="<?php echo $filtered_items->user_account_name; ?>">
<?php echo $filtered_items->user_account_name; ?>
</td>
<td>
<input type="text" class="form-group user_project_name" value="<?php echo $filtered_items->user_project_name; ?>">
<?php echo $filtered_items->user_project_name; ?>
</td>
<td>
<input type="text" class="form-group start_date" value="<?php echo $filtered_items->start_date; ?>">
<?php echo $filtered_items->start_date; ?>
</td>
<td>
<input type="text" class="form-group due_date" value="<?php echo $filtered_items->due_date; ?>">
<?php echo $filtered_items->due_date; ?>
</td>
<td>
<button type="button" class="btn-primary btn-sm row-submit">Submit</button>
</td>
</tr>
<?php } ?>
$('.row-submit').on('click', e => {
e.preventDefault();
let $tr = $(e.target).closest('tr');
$.ajax({
url: 'your-handler.php',
type: 'POST',
data: {
user_account_name: $tr.find('.user_account_name').val(),
user_project_name: $tr.find('.user_project_name').val(),
start_date: $tr.find('.start_date').val(),
due_date: $tr.find('.due_date').val(),
},
success: response => {
console.log(response);
}
});
});

Cannot pass form data to database (PHP, Jquery)

EDIT
I have implemented the changes suggested and I still cant get this to work:
Form Page Follows (login.php)
<?php
$mac=$_POST['mac'];
$ip=$_POST['ip'];
$username=$_POST['username'];
$linklogin=$_POST['link-login'];
$linkorig=$_POST['link-orig'];
$error=$_POST['error'];
$chapid=$_POST['chap-id'];
$chapchallenge=$_POST['chap-challenge'];
$linkloginonly=$_POST['link-login-only'];
$linkorigesc=$_POST['link-orig-esc'];
$macesc=$_POST['mac-esc'];
if (isset($_POST['postcode'])) {
$postcode = $_POST['postcode'];
}
if (isset($_POST['email'])) {
$email = $_POST['email'];
}
?>
**SOME HTML HERE**
<script src="jquery-3.2.1.min.js"></script>
<script>
var js-postcode = document.login.getElementsByName("postcode").value;
var js-email = document.login.getElementsByName("email").value;
var formdata = {postcode:js-postcode,email:js-email};
$("button").click(function(){
$.ajax(
{
type: "POST",
url: "database.php", //Should probably echo true or false depending if it could do it
data : formdata,
success: function(feed) {
if (feed!="true") {
// DO STUFF
} else {
console.log(feed);
// WARNING THAT IT WASN'T DONE
}
}}}
</script>
</head>
<body>
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<table width="240" height="240" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<!-- removed $(if chap-id) $(endif) around OnSubmit -->
<form name="login" action="<?php echo $linkloginonly; ?>" method="post" onSubmit="return doLogin()" >
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="<?php echo $username; ?>"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td align="right">Postcode</td>
<td><input style="width: 80px" name="postcode" type="text" /></td>
</tr>
<tr><td align="right">Email</td>
<td><input style="width: 80px" name="email" type="text" /></td>
</tr>
<td><button><input type="submit" value="OK" /></button></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
and called file database.php is as follows:
<?php
if ((isset($_POST['postcode'])) && (isset($_POST['email']))) {
$postcode = $_POST['postcode'];
$email = $_POST['email'];
$connect= new mysqli_connect('xx','xx','xx','xx');
if ($conn->connect_errno) {
echo "There was a problem connecting to MySQL: (" . $conn->connect_errno . ") " . $conn->connect_error;
}
if (!($sql = $conn->prepare("INSERT INTO visitors(postcode,email) VALUES(postcode,email)"))) {
echo "Prepare failed: (" . $conn->errno . ") " . $conn->error;
}
//NOTE: the "ss" part means that $postcode and $email are strings (mysql is expecting datatypes of strings). For example, if $postcode is an integer, you would do "is" instead.
if (!$sql->bind_param("ss", $postcode, $email)) {
echo "Binding parameters failed: (" . $sql->errno . ") " . $sql->error;
}
if (!$sql->execute()) {
echo "Execute failed: (" . $sql->errno . ") " . $sql->error;
}
} else {
echo 'Variables did not send through ajax.'; // any echoed values would be sent back to javascript and stored in the 'response' variable of your success or fail functions for testing.
}
?>
Still I get nothing fed through from the form to the database. Even if I swap the variables for strings I get nothing through to the database however if I run database.php separately it works. Surely Im close to getting this working now .. any help appreciated and thanks so much for the assistance provided so far.
*************************** ORIGINAL QUESTION FOLLOWS *******************
I have a simple form as follows:
<form name="login" action="somethingelse.php" method="post" onSubmit="return doLogin()" >
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="<?php e$
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td align="right">Postcode</td>
<td><input style="width: 80px" name="postcode" type="text" /></td>
</tr>
<tr><td align="right">Email</td>
<td><input style="width: 80px" name="email" type="text" /></td>
</tr>
<td><button><input type="submit" value="OK" /></button></td>
</tr>
</table>
</form>
Because I need to use the form action to do something else, I need to use jQuery on the click of the button to send data to a database. Specifically the postcode and email address taken from the form. The part of the code relating to the jQuery is shown below:
<script language="JavaScript" >
$(document).ready(function(){
$("button").click(function(){
mysqli_query();
});
});
</script>
The called function mysqli_query is declared via an include statement and therefore lives in a different file. The function called is shown below:
mysqli_query( $connect, "INSERT INTO visitors(postcode,email) VALUES(postcode,email)");
I have been going round in circles for days with this. I know Im close to making it work but cant quite cross the finish line. Could somebody please point out what I'm doing wrong here?

WARNING: Never ever trust user input, always sanitize the input first AND use prepared statements otherwise, you're leaving youself vulnerable to SQL INJECTION ATTACKS
You're mixing up, Javascript is a clientside language, and mysqli is a PHP based function on the serverside of things.
What you should be doing is an ajax call with the values to a different PHP file that will make the database connection and insert the data.
var dataString = "postcode="+ postcode+"&email="+email;
$.ajax({
type: "POST",
url: "file_that_does_the_work.php", //Should probably echo true or false depending if it could do it
data: dataString,
success: function(feed) {
if (feed=="true") {
// DO STUFF
} else {
console.log(feed);
// WARNING THAT IT WASN'T DONE
}
}
file_that_does_the_work.php
<?
include("config.php"); // your thing that configures the connection
$postcode = sanitizationfunction($_POST["postcode"]);
$email = sanitizationfunction($_POST["email"]);
$query = $connection->prepare('INSERT INTO visitors(postcode,email) VALUES(?,?)');
$query->bindParam(1, $postcode);
$query->bindParam(2, $email);
if ($query->execute()) {
echo "true";
} else {
echo "false";
}
?>

form.php
<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="<?php echo $username?>"/>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td align="right">Postcode</td>
<td><input style="width: 80px" name="postcode" type="text" /></td>
</tr>
<tr><td align="right">Email</td>
<td><input style="width: 80px" name="email" type="text" /></td>
</tr>
<td><input type="submit" value="OK" /></td>
</tr>
</table>
</form>
`
somethingelse.php
<?php
foreach ($_POST as $key => $value) {
echo $key."=".$value."<br/>";
}
?>
I leave connectivity part to you :D

So, as others have pointed out, you are mixing up your client-side code and your server-side code. You need to send all the form data to a php file. The jquery ajax will send the data over to the script, and determine if this call was successful or not. If the call is not successful, you can run test logic. If it is, than you can do other logic, such as alert the user of a successful form submit.
Below is an example of the process:
ajax:
<script>
var formData = 'some data' // Get your form values and save here - postcode and email
$("button").click(function(){
$.ajax ({
method: 'POST',// you can do either post or get...
url: "page_to_handle_mysql_code.php",
data: formData
success: function( response ) {
//do something like alert("Submitted Successfully!");
}
fail: function( response) {
//Do testing such as console.log(response); NOTE: Response will be what ever your php page sends back.
}
});
)};
</script>
On your php page: page_to_handle_mysql_code.php
<?php
if ((isset($_POST['postcode'])) && (isset($_POST['email']))) {
$postcode = $_POST['postcode'];
$email = $_POST['email'];
//connect to mysql - I prefer prepared statements as the variables are prepared for safety when sent to MySQL
$conn = new mysqli($servername, $username, $password, $dbname);//you can either put the actually values in, or I include another php page in this one that sets my variables so I can resuse my code easily.
if ($conn->connect_errno) {
echo "There was a problem connecting to MySQL: (" . $conn->connect_errno . ") " . $conn->connect_error;
}
if (!($sql = $conn->prepare("INSERT INTO visitors(postcode,email) VALUES(?,?)"))) {
echo "Prepare failed: (" . $conn->errno . ") " . $conn->error;
}
//NOTE: the "ss" part means that $postcode and $email are strings (mysql is expecting datatypes of strings). For example, if $postcode is an integer, you would do "is" instead.
if (!$sql->bind_param("ss", $postcode, $email)) {
echo "Binding parameters failed: (" . $sql->errno . ") " . $sql->error;
}
if (!$sql->execute()) {
echo "Execute failed: (" . $sql->errno . ") " . $sql->error;
}
} else {
echo 'Variables did not send through ajax.'; // any echoed values would be sent back to javascript and stored in the 'response' variable of your success or fail functions for testing.
}
?>
This should help you get your values entered to MySQL. I hope it helps!

You can submit a form with jquery
mysqli_query is a function in your PHP, your javascript doesn't have access to the function. You have to make an http call from your javascript, which your PHP will receive and run mysqli_query on its end

ajax code not taking the data from table to second row

hi guys i have an issue on ajax. where ajax can't work to take the data of second rows.
This's code in model
function getdtbarang($barcode = FALSE) {
if ($barcode === FALSE)
{
$query = $this->db1->get('tblmstbarang');
return $query->result_array();
}
$query = $this->db1->get_where('tblmstbarang', array('barcode' => $barcode));
return $query->row_array();
}
This's code in controller:
function getdatabarang() {
$barcode = $this->input->post('barcode');
$data=$this->Mbarang->getdtbarang($barcode);
echo json_encode($data);
}
This's ajax code in view. NB:some code has updated
<script type="text/javascript">
function getdatabrg(barcode){
$('#barcode_2').each(function() {
var barcode =$('#barcode_2').val();
$.ajax({
type : "post",
data : "barcode=" +barcode,
url : "<?php echo base_url();?>index.php/master/barang/Cbarang/getdatabarang",
dataType:"json",
success: function(data){
for(var i in data)
{
var obj= data[i];
$("#barang_nama_2").val(obj.barang_nama);
$("#harga_beli_2").val(obj.harga_beli);
}}
});
});
}
$(document).ready(function() {
$('#barcode_2').keyup(function() {
getdatabrg();
});
});
</script>
<td><input type="text" class="form-control" id="barcode" name="barcode[]" value="<?php echo set_value('barcode['.$i.']') ;?>" onKeyUp="getValues()" ></td>
<td><input type="text" class="form-control" id="barang_nama" name="barang_nama[]" value="<?php echo set_value('barang_nama['.$i.']') ;?>" onKeyUp="getValues()" disabled></td>
<td><input type="text" class="form-control" id="harga_beli" name="harga_beli[]" value="<?php echo set_value('harga_beli['.$i.']');?>" onKeyUp="getValues()" disabled></td>
<td><input type="text" class="form-control" id="barcode_2" name="barcode[]" value="<?php $a=set_value('barcode[0]') ; echo $a;?>"></td>
<td><input type="text" class="form-control" id="barang_nama_2" name="barang_nama[]" value="<?php $a=set_value('barang_nama[0]') ; echo $a;?>" onKeyUp="getValues()" readonly></td>
<td><input type="text" class="form-control" id="harga_beli_2" name="harga_beli[]" value="<?php $a=set_value('harga_beli[0]'); echo $a;?>" onKeyUp="getValues()" readonly></td>
<td><input type="text" class="form-control" id="barcode_3" name="barcode[]" value="<?php echo $detail->barcode;?>"></td>
<td><input type="text" class="form-control" id="barang_nama_3" name="barang_nama[]" value="<?php echo $detail->barang_nama;?>" onKeyUp="getValues()" readonly></td>
<td><input type="text" class="form-control" id="harga_beli_3" name="harga_beli[]" value="<?php echo $detail->harga_beli;?>" onKeyUp="getValues()" readonly></td>
i hope getting solve for this problem. many thanks for all your response.

Like Zerfiryn mentioned : "You cannot use the same id for html elements. jQuery will only fetch the first element"
solutions: you can use the same class multiple times on html elements. Call not the id in your ajax but the class form-control.
So, replace $("#barcode") with $(".form-control")
writing an answer cause I can't place comments -.-

You have not constructed model correctly your model is directly outputting the data which so you will end up with the output something like
[{barang_name:"value"},{harga_beli:"value"}][{barang_name:"value"},{harga_beli:"value"}][{barang_name:"value"},{harga_beli:"value"}]...
which is not correct JSON
your should output correct JSON your output should be
[ [{barang_name:"value"},{harga_beli:"value"}], [{barang_name:"value"},{harga_beli:"value"}],.. ]
which is array of arrays
The simplest way to achieve this is
1 ) get the desired data from your model
function your_model_function()
{
$result = execute_query($sql);
$rows = array();
if($result->num_rows)
{
while($row = $result->fetch_row())
$rows[] = $row;
}
return $rows;
}
2) use json_encode to encode your whole data array in json format
$data = $this->model->your_model_func();
echo json_encode($data);
3) Use the JSON in your success callback function
//writing success function of ajax
function(data)
{
for(var i in data)
{
var row = data[i];
// to acccesss the data of row ie json object you can use . operator
console.log(row.key)
// manipulate dom content.
}
}
NOTE: i have written a pseudo code only you cannot directly copy paste it to get result it's just to clear your mind.

How to get foreach input value in javascript and pass it to ajax data?

This is my Form
<form method="post" id="BargainForm">
<input type="hidden" name="pro_id" class="pro_id" id="pro_id" value="<?php echo $pro_id; ?>">
<input type="hidden" name="customer_id" class="customer_id" id="customer_id" value="<?php echo $customer_id; ?>">
<input type="text" name="bargain_qty" class="bargain_qty" id="bargain_qty" placeholder="Qty" required/></br></br>
<?php if($productType = 'Configurable'): ?>
<?php foreach($attributes as $attribute): ?>
<input type="text" name="<?php echo strtolower($attribute['store_label']); ?>"
class="<?php echo strtolower($attribute['store_label']); ?>"
id="<?php echo strtolower($attribute['store_label']); ?>"
placeholder="<?php echo $attribute['store_label'] ?>"></br></br>
<?php endforeach; ?>
<?php else: ?>
<?php endif; ?>
<input type="text" name="bargain_price" class="bargain_price" id="bargain_price" placeholder="Total Price" required/></br></br>
<input type="submit" name="bargain_btn" class="bargain_btn">
</form>
Here is my javascript code
<script type="text/javascript">
$(function () {
$('.bargain_btn').click(function(e) {
var qty = $( "#bargain_qty" ).val();
var price = $( "#bargain_price" ).val();
var pro_id = $( "#pro_id" ).val();
var customer_id = $( "#customer_id" ).val();
var att_lable = $( "#<?php echo strtolower($attribute['store_label']); ?>" ).val();
alert(att_lable);
e.preventDefault();
$.ajax({
url: "<?php echo Mage::getUrl('bargain/Ajax/index'); ?>",
type: "POST",
data: {qty,price,pro_id,customer_id},
success: function(data) {
if(data.success) {
}
}
});
});
});
In form i am using foreach. If i have 2 data so it will display 2 input tags, i just don't know how to save values of that 2 input and pass it to data: {qty,price,pro_id,customer_id},
Thank you in advance!

Provide a common class to all textbox that are generated using loop like:
foreach(...)
{
echo '<input class="myTxt" value="" id="" />';
}
Jquery:
var arr = [];
$('.myTxt').each(function(){
arr.push($(this).val());
});
pass this array i.e. arr to ajax call in data{} section using serialize or on an index.

Replace
data: {qty,price,pro_id,customer_id},
By
data: "qty="+qty+"&price="+price+"&pro_id="+pro_id+"&customer_id="+customer_id+"&att_lable="+att_lable,

Do not use:
data: { qty, price, pro_id, customer_id },
Instead use:
data: $("#BargainForm").serialize(),
It will work only if your $attribute['store_label'] name is unique.

Getting form field values in php and then disabling it

i am using form in my page like this
<form method='post' action='' class='myform'>
<input type='text' name='name'>
<input type='text' name='email'>
<input class='btn' type='submit' name='submit' >
</form>
what i want i will get the values of form and then disable all its fields , now this is my code to disable all fields when form is submitted
$(document).on('click', '.btn', function(event) {
var currentForm = $(this).closest('form');
currentForm.find('input').prop('disabled', true);
});
and before this i'm trying to get values from $_POST like this
if(isset($_POST["submit"])){
$name= $_POST["name"];
$email= $_POST["email"];
}
but problem is that as i press submit button fields get disabled and i dont get any posted values , how do i get values first and then disable fields ?

Your mistake - You are disabling the input field by
currentForm.find('input').prop('disabled', true);
So when you submit the form, the field will be in disabled state and will not be posted.
Solution - please change the line to
currentForm.find('input').prop('readonly', true);

look this example or try with it....
if(isset($_POST["submit"]))
{
$name= $_POST["name"];
$email= $_POST["email"];
}
?>
<form method='post' action='' class='myform'>
<?php
if($name != '' && $email != '')
{
?>
<input type='hidden' name='name' value="<?php echo $name?>">
<input type='hidden' name='email' value="<?php echo $email?>">
<?php
}
?>
<input type='text' name="<?php echo ($name != ''?'hidden_name':'name')?>" <?php echo ($name != ''?'disabled':'')?> value="<?php echo $name?>">
<input type='text' name='<?php echo ($email != ''?'hidden_email':'email')?>' <?php echo ($email != ''?'disabled':'')?> value="<?php echo $email?>">
<input class='btn' type='submit' name='submit' >
</form>

You can use ajax for that like this:
$('.btn').bind('click', function() {
$.ajax({
url: "your page url here",
type: 'POST',
async:false,
success: function(response) {
$('input').prop('disabled', true);
}
});
});

you don't pass submit parameter to formdata, that's why you can't get it.
try this
<?php if(isset($_POST['name'])){ echo $_POST['name'] }?>