Currently, I am implementing a code snippet to incorporate additional text boxes within a form. The main purpose is to enable users to input multiple languages they are proficient in.
<script>
jQuery(function($) {
var i = 0;
$('#theButton').click(addAnotherTextBox);
function addAnotherTextBox() {
$("#theForm").append("<br><label>Language <input type='text' name='language" + i + "' >");
}
});
</script>
<div id='theForm'></div>
<form id="form" name="form">
<input id='theButton' type='button' value='Add Medical History'>
<input id="submit" onclick="myFunctionlanguage()" type="button"
value="Update" class="btn btn-primary btn-block" >
</form>
The function triggered by the submit button essentially sends the collected data to a PHP file using AJAX, ensuring no need for page redirection or refresh for submission.
My current PHP code snippet:
$language = $_POST['language'];
if (isset($_POST['language1'])) {
$sql_insert1 = "INSERT into `languages` (`language`,`cc`,`userid`)
VALUES('$language','cc','$user->id')";
mysql_query($sql_insert1) or die("Insertion Failed:" . mysql_error());
}
However, it appears that the database isn't updating with each new language added through the text box.
Any insights or suggestions would be greatly appreciated.
Edit: - Despite trying out various examples provided below, the issue persists with adding entries into my database.
Is there a chance the problem lies within my onClick function implementation?
<script>
function myFunctionlanguage() {
var language = document.getElementById("location").value;
// Display success message upon data storage in database.
var dataString = '&language1=' + language;
if (location == '') {
alert("Please enter a language!");
} else {
// Using AJAX to submit the form data.
$.ajax({
type: "POST",
url: "includes/updatelanguage.php?userid=<?echo $user->id;?>",
data: dataString,
cache: false,
success: function(html) {
alert(html);
document.getElementById('close').click()
window.location.reload();
}
});
}
return false;
}
</script>