[Jquerymobile] How can I update a database with Ajax
Dear All,
I am new with jquerymobile. I created a simple form and I would like to update my database when the user press submit the form.
I created that form:
- <div class="ui-collapsible-set" data-content-theme="d" data-theme="c" data-role="collapsible-set">
- <div data-role="collapsible" data-collapsed="true">
- <h3 class="">Apple</h3>
- <form method="post" id="fruit_1">
- <div data-role="fieldcontain">
- <label for="fd_nom">Nom du fruit :</label>
- <input type="text" name="fd_nom" id="fd_nom" data-mini="true" value="Apple" />
- </div>
- <div data-role="fieldcontain">
- <label for="fd_active">Actif:</label>
- <select name="fd_active" id="fd_active" data-role="slider" data-mini="true">
- <option value="0" <?php ($data_fruits['fd_active']) ? print('') : print('selected'); ?>>Off</option>
- <option value="1" <?php ($data_fruits['fd_active']) ? print('selected') : print(''); ?>>On</option>
- </select>
- </div>
- <div data-role="controlgroup">
- <button data-theme="b" type="submit" class="submit" id="submit_1" name="submit" value="submit">Submit</button>
- <button data-theme="c" type="reset" name="reset" value="reset">Effacer</button>
- </div>
- </form>
- </div>
- </div>
Then I also created another file call update.php to callect the $_POST parameter and update the data. The sql queries are niot listed because this is not my problem
- <?php
- $firstName = $_POST['tb_nom'];
- $lastName = $_POST['tb_description'];
- echo "First Name: " . $firstName . " Last Name: " . $lastName;
- ?>
My is that I do not how how to send my data to the update.php file with AJAX
In my form I could add the action="update.php" but then my update file display "undefined"
I supposed that they must a javascript code, then I found this, but from that step I am not sure about what I am going.
- <script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#log").text(data);
}
function onError(data, status)
{
// handle an error
}
$(document).ready(function() {
$(".submit").click(function(){
var formData = $("#fruit_1").serialize();
$.ajax({
type: "POST",
url: "sql/update.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
Some one can help me to perfect my code?
MAny thanky for all