I don’t know how to send text
, checkbox
, radio
data and also image file
at the same time using ajax jquery post (in order not to refresh the page).
Here are the codes I have.
index.php
<form action="save.php" method="POST"> Your Name : <input type="text" name="username" id="username"> <BR> Your Sex : <input type="radio" class="get_gender" name="gender" id="genderM" value="Male">Male <input type="radio" class="get_gender" name="gender" id="genderF" value="Female">Female <BR> Your Hobbies : <input type="checkbox" class="get_hobby" name="basket" id="basket" value="Basketball">Basketball <input type="checkbox" class="get_hobby" name="foot" id="foot" value="Football">Football <input type="checkbox" class="get_hobby" name="volley" id="volley" value="Volleyball">Volleyball <BR> Your Grade : <select name="grade" id="grade"> <option value="1>1</option> <option value="2">2</option> <option value="3">3</option> </select> <BR> Upload Photo : <input type="file" name="image" id="image"> <BR> <input type="button" name="save" id="save" value="Save" onclick="save()"> </form>
save.php
<?php include "connection.php"; $usename = $_POST['username']; $gender = $_POST['gender']; $hobby = $_POST['hobby']; $grade = $_POST['grade']; $photo = $_FILES['image']['name']; $sql = "insert into user (username, gender, hobby, grade, photo) values('$username','$gender','$hobby','$grade','$photo')"; $query = mysqli_query($con,$sql); header("location: index.php"); ?>
index.js
function save(){ var username = document.getElementById("username").value; var grade = document.getElementById("grade").value; var hobby = []; $('.get_hobby').each(function(){ if($(this).is(":checked")) { hobby.push($(this).val()); } }); hobby = hobby.toString(); var gender = []; $('.get_gender').each(function(){ if($(this).is(":checked")) { gender.push($(this).val()); } }); gender = gender.toString(); $.ajax({ type: "POST", url: 'save.php', data: { username: username, hobby: hobby, hobby: hobby, grade: grade }, success: function(result){ } }); }
Please help
Advertisement
Answer
You can simplify your save
function – and send both form data and an image at the same time by using a FormData
object:
function save_data() { var formData = new FormData($('#userform')[0]); $.ajax({ url: '/test13.php', type: 'POST', data: formData, processData: false, contentType: false, success: function (response) { alert(response); } }); }
Note you need a couple of other changes. The form needs an id
attribute e.g.
<form id="userform">
You should change the name
attributes of the hobbies to hobby[]
i.e.
<input type="checkbox" class="get_hobby" name="hobby[]" id="basket" value="Basketball">Basketball <input type="checkbox" class="get_hobby" name="hobby[]" id="foot" value="Football">Football <input type="checkbox" class="get_hobby" name="hobby[]" id="volley" value="Volleyball">Volleyball
And you need to add
processData: false, contentType: false,
To your ajax object.
In your PHP code, you would need to assemble $hobby
from the raw form values:
$hobby = implode(',', $_POST['hobby']);
and you should include a check for $_POST['gender']
being set:
$gender = $_POST['gender'] ?? '';
I needed to change the name of your function as save
was causing conflicts. I renamed it to save_data
. You may not find this is an issue.