{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 劳资没心，怎么记你 的问题《how to submit 3 forms with one submit button using》','https://www.manongdao.com/q-1068975.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am creating an onlineshop and I have three forms( that use 2 different php files ). First form - text based for the user to fill in the Title, Price & Description of the product Second form- uploading an image for the new product Third form - choosing a category (table) from the database to add the record to the given table
How will I do that using AJAX? new in php and AJAX please help me how to modify my code.
1st form
<form action="insert.php" method="post" name="form1" enctype="multipart/form-data">
<div>
<label for="title">Title: </label><input type="text" name="title"/>
</div>
<div>
<label for="description">Desc: </label><input type="text" name="description"/>
</div>
<div>
<label for="price">Price: </label><input type="text" name="price" />
</div>
<input type="hidden" name="submit" value="Submit">
</form>
insert.php(used by 1st form)
<?php
$con=mysqli_connect('localhost','root', '',"onlineshop");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO mens (title, description, price)
VALUES
('$_POST[title]','$_POST[description]','$_POST[price]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
echo "1 record added";
mysqli_close($con);
?>
2nd form
<script type="text/javascript" src="../cms/scripts/jquery.min.js"></script>
<script type="text/javascript" src="../cms/scripts/jquery.form.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').live('change', function(){
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading"/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
<style>
body
{
font-family:arial;
}
.preview
{
width:160px;
border:solid 2px #dedede;
padding:10px;
}
#preview
{
color:#cc0000;
font-size:10px
}
</style>
<body bgcolor="#ffdd55">
<font face=Arial size=3 color="#880088">
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php' >
<small>Upload your image <input type="file" name="photoimg" id="photoimg" /></small>
</form>
<div id='preview'>
</div>
3rd form
<?php
include_once 'dropdown.php';
?>
<small>Choose category:</small>
<br>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<select name="Tables" id="ddTables" name="form3">
<?php
echo $tables;
?>
</select>
<input type="hidden" id="tableSubmit" value="Submit"/>
</form>
</div>
<!-- Submit 3 forms together-->
<script>
$('#form1_submit_button').click(function(){
$('#form1 #imageform #form3').submit();
});
</script>
dropdown.php(used by 3rd form)
<?php
$dbname = 'onlineshop';
if (!mysql_connect('localhost', 'root', '')) {
echo 'Could not connect to mysql';
exit;
}
$sql = "SHOW TABLES FROM $dbname";
$result = mysql_query($sql);
if (!$result) {
echo "No tables exist! \n";
echo 'MySQL Error: ' . mysql_error();
exit;
}
$tables = '';
while ($row = mysql_fetch_row($result)) {
$tables .="<option value='$row[0]'>$row[0]</option>";
}
mysql_free_result($result);
?>
jQuery has a nice function for that.(.post)
https://api.jquery.com/jQuery.post/
Use .val to read form data
http://api.jquery.com/val/
What I would suggest is some reorganization of your code - rather than trying to post to three separate pages from 1, perhaps try either combining the steps into one, or definitively separating them into 3.
For example:
(Separating into 3):
Page one, you fill out basic information of the product, which gets submitted and inserted into the database, then you are brought to page/step 2 (via hidden POST'd fields containing specific "product ID" or something), where you choose a category from the database. When you submit from there, it is inserted into the database, and you are brought to page/step 3, where you upload an image. After submitting this, you're done!
-Advantages: Smaller individual pages, easier to make adjustments to any one of them.
-Disadvantages: Difficult to change something that affects all 3 pages, and if the user has slow internet, can lead to it taking a long time to create a single product.
(Combining):
All information is entered on a single page - category selection, basic product info, and file upload. Submitting that page will process ALL the information in one fell swoop.
-Advantages: Easier to make large changes, all info is loaded/submitted at once so you won't end up with partial of incomplete data in your databases.
-Disadvantages: Lots of information to fill out on one page, may make finding a single thing to change difficult with a large amount of code.