Я создаю onlineshop, и у меня есть три формы (которые используют 2 разных php-файла). Первая форма – текст, основанный на том, что пользователь может заполнить заголовок, цену и описание продукта. Вторая форма – загрузка изображения для нового продукта. Третья форма – выбор категории (таблицы) из базы данных для добавления записи в указанную таблицу
Как мне это сделать с помощью AJAX? new в php и AJAX, пожалуйста, помогите мне изменить мой код.
1-я форма
<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 (используется 1-й формой)
<?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); ?>
Вторая форма
<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>
3-я форма
<?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 (используется третьей формой)
<?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); ?>