Submitting form from different <div> HTML - php

i have problem with submitting a form using 2 defferent div(tabs). I want to submit all the value from this form.. but when i submit, the value that i receive only from (div class="tab1") not from div class="tab2". how can i submit all the value even using different div
page.php
<div class="tab1">
<h2>Basic Information</h2>
<form name="pages_details" method="post" action="pages/save_pages.php">
<table>
<tr>
<td>Name:</td>
<td><input name="name" type="text" ></input></td>
</tr>
<tr>
<td>Order:</td>
<td><input name="ord" type="text"></input></td>
</tr>
</table>
</div>
<div class="tab2">
<h2>Additional Information</h2>
<table>
<tr>
<td>Special:</td>
<td><input name="special" type="text" ></input></td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title" type="text"></input></td>
</tr>
</table>
</div>
<input type="submit" name="save" value="save">
</form>
save_pages.php
<?php
$name = $_REQUEST['name'];
$ord = $_REQUEST['ord'];
$special = $_REQUEST['special'];
$title = $_REQUEST['title'];
echo $name;
echo $ord;
echo $special;
echo $title;
?>

Try to make sure you close tags in the right order.
Structuring code like this can cause some weird bugs.
Not right:
<div>
<form>
</div>
</form>
So you might want to do it like this.
<form>
<div>
</div>
</form>

I would suggest to use jquery ajax to submit the form based on your case.
For example:
var datas = $(form).serialize();
$.post("pages/save_pages.php", datas, function(){
});
Referring:
post - http://api.jquery.com/jQuery.post/
serialize - http://api.jquery.com/serialize/

Related

Displaying HTML form values on PHP

This is test.html
<!DOCTYPE html>
<html>
<body>
<form method="POST" action="test.php">
<table>
<tr>
<th>content_id</th>
<th>title</th>
<th>image</th>
</tr>
<tr>
<td><input type="text" name="content_id" size="26"></td>
<td><input type="text" name="title" size="26"></td>
<td><input type="text" name="image" size="26"></td>
</tr>
</table>
<input type="button" id="cancel" name="cancel" value="Cancel"> <a href="index.php"/></a>
<button type="submit" id="submit" value="Submit">Submit</button>
</form>
</body>
</html>
This is test.php
<?php
error_reporting(E_ALL);ini_set('display_errors','1');
echo $_POST["content_id"];
echo $_POST["title"];
echo $_POST["image"];
?>
I want to pass the form's value to the PHP and display it but it shows this instead.
EDIT: I apologize for the vague and confusing question, thanks for the assistance everyone!
An error (500) occurs because your syntax is invalid. You can't mix text and commands.
There are two methods of sending data to PHP; GET and POST. GET sends information in URL parameters, and POST sends data in headers. You must use the appropriate PHP method to get data in each format. Given you set the method in the HTML form as POST, you should use _POST in PHP:
<?php
echo "Welcome ".$_POST["content_id"];
echo "Welcome ".$_POST["title"];
echo "Welcome ".$_POST["image"];
?>
In the future, you should look at the error_log, or enable error reporting so that you can see the actual results from the PHP runtime. Details on this can be found here.
The 500 error is because Welcome is not executable PHP code. Put it outside the <?php ?> tags
Your form method is using GET, your test.php should be:
<?php
echo $_POST["content_id"];
echo $_POST["title"];
echo $_POST["image"];
?>
And your form misses its end tag and a submit button:
<form method="POST" action="test.php">
<table>
<tr>
<th>content_id</th>
<th>title</th>
<th>image</th>
</tr>
<tr>
<td><input type="text" name="content_id" size="26"></td>
<td><input type="text" name="title" size="26"></td>
<td><input type="text" name="image" size="26"></td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
Here's the form screenshot: https://imgur.com/a/3ST9k
And here's the php script result: https://imgur.com/a/YUUl4

Sending post request of all my data in an associated array

I want to create a table in which it is editable in each of it row. At the same time I want to be able to take all the rows of data and put it in a file.
The problem I am having is when I click the button with id = download, I couldnt get all the data in all rows but only the first row as if I clicked the submit button for the id = firstRow.
Anyone know how can I retrieve all the rows of data in one click of a button?
I am just using PHP currently so it would be a great help to solve this using PHP, or HTML for that matter.
<form method="post" action="allRows.php">
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Single</th>
<th>Test button</th>
</tr>
<tr>
<form action="oneRow.php" method="post">
<td><input type="text" name="person[0][name]"></td>
<td><input type="text" name="person[0][age]"></td>
<td><input type="text" name="person[0][sex]"></td>
<td><input type="text" name="person[0][spouse]"></td>
<td><input id="firstRow" type="submit" name="test"></td>
</form>
</tr>
<tr>
<form action="oneRow.php" method="post">
<td><input type="text" name="person[1][name]"></td>
<td><input type="text" name="person[1][age]"></td>
<td><input type="text" name="person[1][sex]"></td>
<td><input type="text" name="person[1][spouse]"></td>
<td><input id="secondRow" type="submit" name="test"></td>
</form>
</tr>
</table>
<input id="download" type="submit" name="Download" value="Download">
</form>
You can not nest forms inside forms, that is invalid html, so if you want to have all those features, you will need to employ javascript to submit all the forms at once by assembling them into a js form but pure PHP is not possible unless you submit one form with all the fields at one time.
<!-- You need the jQuery library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Single</th>
<th>Test button</th>
</tr>
<tr>
<!-- You need to add class="rowform" to each form tag -->
<form action="oneRow.php" method="post" class="rowform">
<td><input type="text" name="person[0][name]"></td>
<td><input type="text" name="person[0][age]"></td>
<td><input type="text" name="person[0][sex]"></td>
<td><input type="text" name="person[0][spouse]"></td>
<td><input id="firstRow" type="submit" name="test"></td>
</form>
</tr>
<tr>
<form action="oneRow.php" method="post" class="rowform">
<td><input type="text" name="person[1][name]"></td>
<td><input type="text" name="person[1][age]"></td>
<td><input type="text" name="person[1][sex]"></td>
<td><input type="text" name="person[1][spouse]"></td>
<td><input id="secondRow" type="submit" name="test"></td>
</form>
</tr>
</table>
<!-- Create the empty download all form, add id="allrows" -->
<form method="post" action="allRows.php" id="allrows">
<input id="download" type="submit" name="Download" value="Download">
</form>
<script>
// Start document listener
$(document).ready(function(e) {
// Listen for the download form to submit
$('#allrows').on('submit',function(e) {
// Stop it from reloading the page (submitting the form)
e.preventDefault();
// Create a storage array
var data = [];
// Loop through each form (each form tag needs the "rowform" class
$.each($('.rowform'),function(k,v) {
// Fetch all the data from the form
data[k] = $(v).serialize();
});
// Create a storage array for the form
var form = [];
// Start building a form
form.push('<form action="allRows.php" method="post">');
// Implode the form data from each form
form.push('<input name="allfields[]" value="'+data.join('" /><input name="allfields[]" value="')+'" />');
// Create a submit field
form.push('<input type="submit" value="submit" /></form>');
// Combine the html form
form = form.join('');
// Submit the form
$(form).submit();
});
});
</script>
In the php, you will need to check for the allfields key so:
if(!empty($_POST['allfields'])) {
// do code
}
What you will see is something like:
Array
(
[allfields] => Array
(
[0] => person%5B0%5D%5Bname%5D=qewrqwer&person%5B0%5D%5Bage%5D=adsf&person%5B0%5D%5Bsex%5D=fdsdfds&person%5B0%5D%5Bspouse%5D=sdfds
[1] => person%5B1%5D%5Bname%5D=sssssss&person%5B1%5D%5Bage%5D=sssweeeee&person%5B1%5D%5Bsex%5D=qqqqqq&person%5B1%5D%5Bspouse%5D=222222
)
)
And you will see that field have a series of arrays and query strings. Process how you want from that point using urldecode() etc.

i have include html form element with php but that does not post

hi i use a form and i add a few textarea my form with php. But i click submit buton it does not post. Why? is there any problem?
<form onsubmit="return form_kontrol()" name="form1" class="block-content form" id="simple_form" method="POST" action="<?php echo $editFormAction; ?>">
<div id="kodlar">
< ? php
$i=1;
mysql_select_db($database_verisi_tabanisi, $verisi_tabanisi);
$query_sipsa = "SELECT * FROM sifreler where kayit_id=".$_GET['id'];
$sipsa = mysql_query($query_sipsa, $verisi_tabanisi) or die(mysql_error());
$row_sipsa = mysql_fetch_array($sipsa);
$totalRows_sipsa=mysql_num_rows($sipsa);
do{
echo "<p style=\"display:inline;\" id=\"p".$i."\">
<label for=\"sifre\">Kod ".$i.":</label>
<textarea disabled name=\"kod".$i."\" id=\"kod".$i."\" cols=\"70\" rows=\"3\" style=\"margin-left:10px;\">".$row_sipsa['sifre']."</textarea>
<img src=\"images/icons/fugue/cross-circle.png\" width=\"16\" height=\"16\">
<p>";
$i++;
} while($row_sipsa = mysql_fetch_array($sipsa));
? >
</div>
this is php code and everything is normal.
<table width="461px">
<tr> <td width="35%"><label for="kullanici">İsim Soyisim:</label></td>
<td width="65%"><input name="isim" type="text" id="isim" class="full-width" style="width:300px;" value="<?php echo $row_sipsa['isim_soyisim'];?>"></td>
</tr>
</table>
<br> <br>
<table width="461px">
<tr> <td width="35%"><label for="sifre">Telefon:</label></td>
<td width="65%"><input name="tel" type="text" id="tel" class="full-width" style="width:300px;" value="<?php echo $row_sipsa['telefon'];?>"></td>
</tr>
</table>
Disabled form element won't post to other page.
If you want make textarea disabled the you have below options:
Make them readonly by adding the readonly property to the element.
disable them in CSS/JavaScript. Color it like it's disabled, and
don't allow editing with JavaScript
Leave it disabled, and remove the disabled on submit.
Choose anyone. :-)

How to update the data in particular table row in HTML?

Since the <form> can not inside <tr>, I can not assign the form for each row. And at the end I have create a from like this
<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>
So, it seems when I submit data it submit every input, how can I send only a specific row? Thanks
Since forms send all the values, (since your using <button>), you could assign each row a key that corresponds to that row. Then use that in the textbox. Note: Textbox values must be an array structure, so that particular key from the submit update can be used (kinda like filtering). Consider this example:
<?php
if(isset($_POST['update'])) {
$product_key = $_POST['update'];
$product_name = $_POST['my_product_name'][$product_key];
echo $product_name;
// this should correspond to that same textbox row that you selected
}
?>
<form method="POST" action="">
<table>
<tr>
<td><input type="text" name="my_product_name[1]"></td>
<td><button name="update" type="submit" value="1">Update</button></td>
</tr>
<tr>
<td><input type="text" name="my_product_name[2]"></td>
<td><button name="update" type="submit" value="2">Update</button></td>
</tr>
</table>
</form>
This is not possible. A form sends everything in it. You have to use multiple forms in order to do that. Can you explain why you want to send each row separately. Let us know the complete problem so we can provide you much better solution :)
You must use separate forms. To avoid this issue, you could try using div's and style them with css.
<div class="big-wrapper">
<div class="form-wrapper">
<form id="first-input">
<input name="my_product_name">
<button type="submit">Click Here To Submit Form 1</button>
</form>
</div>
<div class="form-wrapper">
<form id="second-input">
<input name="my_product_name">
<button type="submit">Click Here To Submit Form 2</button>
</form>
</div>
Example of above code (with no additional css): http://postimg.org/image/p0olzl933/
One method would be to have form tags that wrap tables and each table effectively becomes a row.
Honestly, there are a lot of ways to do this... you could handle it using Javascript with something like I have below or generating a special table with a server-side script and writing that to the page. You could use ajax calls to send the values that change to a web service, etc.
Hope that thelps.
<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>
<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>
...
Collect the value then push it into the form on submit.
<script>
function dosubmit(e){
var value = $(this).parents('tr').find('input.some').val();
$(this).parents('tr').find('input.my_product_name').val(value);
}
</script>
<table>
<tr>
<td><input name="some"/></td>
<td>
<form onsubmit="dosubmit(event)">
<input type="hidden" name="my_product_name"/>
<input type="submit" value="Submit">
</form>
</td>
</tr>
<tr>
<td><input name="some"/></td>
<td>
<form onsubmit="dosubmit(event)">
<input type="hidden" name="my_product_name"/>
<input type="submit" value="Submit">
</form>
</td>
</tr>
<tr>
<td><input name="some"/></td>
<td>
<form onsubmit="dosubmit(event)">
<input type="hidden" name="my_product_name"/>
<input type="submit" value="Submit">
</form>
</td>
</tr>
</table>
I don't know how much good a jsbin will be, but here it is
You can submit the value in form by setting in hidden parameter as follows:
HTML:
<form action="" id="formId">
<input type="hidden" name="product_name" id="hiddenValue" />
</form>
<table>
<tr>
<td><input name="my_product_name"></td>
<td><button type="submit" onclick="submitForm(this)"></td>
</tr>
<tr>
<td><input name="my_product_name"></td>
<td><button type="submit" onclick="submitForm(this)"></td>
</tr>
</table>
Script:
<script>
function submitForm(id){
var input = id.parentElement.parentElement.getElementsByTagName("input")[0].value;
//Retrieving value of specific rows
document.getElementById("hiddenValue").value = input;
//Submits the form with given id.
document.getElementById("formId").submit();
}
</script>

Multiple Submit Buttons in HTML

For testing purpose I designed simple HTML form as follows
<html>
<head>
<title>Test Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="0" align="center">
<tbody>
<tr>
<td>First Name</td>
<td><input type="text" name="txtfname" value="" size="10" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="txtlname" value="" size="10" /></td>
</tr>
<tr>
</tbody>
</table>
</body>
</html>
Now on this single HTML page I want to perform basic SQL functionality with MySQL using PHP. I want 4 submit buttons (Insert Delete Update Search) on single HTML form. I tried it by taking DIV tag but still its not working. Any suggestions???
<form method="post">
<table border="0" align="center">
<tbody>
<tr>
<td>First Name</td>
<td><input type="text" name="txtfname" value="" size="10" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="txtlname" value="" size="10" /></td>
</tr>
<tr>
<input type="submit" name="insert" value="insert" />
<input type="submit" name="update" value="update" />
<input type="submit" name="delete" value="delete" />
<input type="submit" name="search" value="search" />
</tr>
</tbody>
</table>
</form>
Now you can check which button was used to submit using regular php stuff isset() like below.
<?php
if(isset($_POST['insert'])) {
//perform insert
}
if(isset($_POST['search'])) {
// perform search
}
?>
u mean to ask u want to perform 4 action's.
just use an ajax call on onClick action of each button.
do not create a form, just make a function call.
You can create four forms on your HTML page as following
<form action="insert.php" method="post">
<!-- Some form data here -->
<input type="submit">
</form>
<form action="delete.php" method="post">
<!-- Some form data here -->
<input type="submit">
</form>
<form action="update.php" method="post">
<!-- Some form data here -->
<input type="submit">
</form>
<form action="search.php" method="post">
<!-- Some form data here -->
<input type="submit">
</form>
from your question I understand above scenario
Hope it helps
you can do tat using this code...
<input type="button" onclick="var e = document.getElementById('form_id'); e.action='adress1'; e.submit();" value="submit1">
<input type="button" onclick="var e = document.getElementById('form_id'); e.action='adress2'; e.submit();" value="submit2">
<input type="button" onclick="var e = document.getElementById('form_id'); e.action='adress3'; e.submit();" value="submit3">

Categories