Avoid Refresh of Page on submit

kranai · June 6, 2019, 6:26pm

Hi
I have these two files one editprofile.html and edit.php. I am trying to edit/update record and displaying the record again. I am using XMLHttpRequest Object because I want to display on certain part of the current page using Ajax.

Problem - it does not update and also it refreshes the screen and returns me to my original state when I first loaded editprofile. I need to know (1) why it is not updating and executing the “if …part of the edit.php fie” and (2) how to avoid refresh and clear of complete page each time the “Update” button is click! Below are code for the two files:

Appreciate if anyone can let me know and explain where I have gone wrong. Help much appreciated.

ediitprofile.html

Blockquote

<!doctype html>

Patient Profile

The XMLHttpRequest Object

Do you want to update the patient data? : Yes No

Display at this point....

Blockquote

edit.php

Blockquote

<?php $con = mysqli_connect("localhost","root","","medical_camps"); // Check connection if (mysqli_connect_errno()) {echo "Failed to connect to MySQL: " . mysqli_connect_error();} $id=5; // assign 5 for testing $icnumber="12345678955555"; // assign number that is in database // Read data record from database and assigned to $row $query = "SELECT patient.id, patient.patient_name, patient.ic_num, patient.gender, patient.dob FROM patient where patient.ic_num='$icnumber'" ; $result = mysqli_query($con, $query) or die ( mysqli_error($con)); $row = mysqli_fetch_assoc($result); ?> Update Record

<h1>Update Data</h1>
<?php

$status = "";
if(isset($_POST['new']) && $_POST['new']==1){
	$id=$_REQUEST['id'];					
	$name =$_REQUEST['name'];                 
	$gender =$_REQUEST['gender'];                   
	$dob = $_REQUEST['dob'];      				   				 
	$update="update patient set patient_name='".$name."', gender='".$gender."', dob='".$dob."' where patient.ic_num='".$icnumber."'";			
	mysqli_query($con, $update) or die(mysqli_error());
	$status = "Record Updated Successfully. </br></br><a href='view.php'>View Updated Record</a>";
	echo '<p style="color:#FF0000;">'.$status.'</p>';}
else {?>
		<form name="form" method="post" action=""> 
		<input type="hidden" name="new" value="1" />
		<input name="id" type="hidden" value="<?php echo $row['id'];?>" />
		<span class="inline">
			<label class="labeltag">Name: </label><input type="text" name="name" size="35" placeholder="Enter Name" required value="<?php echo $row['patient_name'];?>" >
			<label class="labeltag">IC-Num: </label><input type="text" name="icnum"  maxlength="14" size="12" placeholder="Enter IC-Num" required value="<?php echo $row['ic_num'];?>" >
		</span>
		<br />
		<span class="inline">
			<label class="labeltag">Gender: </label><input type="text" name="gender" size="5" placeholder="Enter Gender" required value="<?php echo $row['gender'];?>" >
			<label class="labeltag">Dob: </label><input type="text" name="dob" size="12" placeholder="Enter Dob (YYYY-MM-DD)" required value="<?php echo $row['dob'];?>" >
		</span>
			<p><input id="submit" name="submit" type="submit" value="Update" ></p>
		</form>
	<?php } ?>

Blockquote

astonecipher · June 7, 2019, 2:31pm

If you are using ajax then you want to prevent the default behavior, though, changing the input type to button rather than submit as well.

mdahlke · June 11, 2019, 6:38pm

This would require AJAX to do. I would recommend putting an ID on the form element so you can reference that in your JavaScript. Then use JS to send the request to your PHP script.

I haven’t worked vanilla JS to do a XMLHttp Request in a very long time, but here is an example of a jQuery one:

$('form').on('submit', function(e){
    // prevent the form from submitting
    e.preventDefault();

    $.ajax({
        type: 'post',
        url: 'path/to/file.php',
        data: {} // form data,
        complete: function(){
            // done
       }
    });

That should be enough to get you started.
You can also look at the jQuery AJAX documentation here: http://api.jquery.com/jquery.ajax/