Changing html content with PHP/AJAX

Question

I hope someone can help.

I want to replace an input element in a document using AJAX and PHP, depending on the value of a variable in the php.

The html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Modal Contact Form Demo</title>
<meta name="description" content="Creating Modal Window with Twitter           
Bootstrap">

<link href="assets/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">      
</script>
<script src="assets/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#submit").click(function(event) {
event.preventDefault();
$.ajax ({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg) {
$("#log").html(msg);
},
error: function() {
alert("failure");
}
});
}); 
});
</script>

<style type="text/css">
body { margin: 50px; background: url(assets/bglight.png); }
.well { background: #fff; text-align: center; }
.modal { text-align: left; }
</style>

</head>
<body>

<div class="container">
<div class="well well-large">
<h2>Twitter Bootstrap Modal Contact Form Demo</h2>
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<label class="label" for="name">Your Name</label><br>
<input type="text" name="name" class="input-xlarge" id="contactName"><br>
<label class="label" for="email">Your E-mail</label><br>
<input type="email" name="email" class="input-xlarge"><br>
<label class="label" for="message">Enter a Message</label><br>
<textarea name="contactMessage" class="input-xlarge" id="contactMessage">     
</textarea>
</form>
</div>
<div class="modal-body" id="log"> </div>
<div class="modal-footer">
<input class='btn btn-success' type='submit' value='Send!' id='submit'>
</div>
</div>
<div id="contactButton"><p><a data-toggle="modal" href="#form-content"     
class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
</div>
</div>

</body>
</html>

The process.php (a little redacted) looks like this:

<?php
$myemail = '[email protected]';

$error = "";

//Validates the fields and set the 'name', 'email' and message fields to        
required. I have removed this part of the code.  It works and the error   
displays in the html

//Displays the success message
if (isset($_POST['name']) AND ($error != "")) {
echo "<span class=\"alert alert-danger\" ><strong>The following errors exist   
in your form: </strong></span><br><br>";
echo $error;
} else {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['contactMessage']);
echo "<span class=\"alert alert-success\" >Your message has been received.     
Thanks! Here is what you submitted:</span><br><br>";
echo "<strong>Name:</strong> ".$name."<br>";    
echo "<strong>Email:</strong> ".$email."<br>";  
echo "<strong>Message:</strong> ".$message."<br>";

//Sends e-mailto = $myemail, also deleted because this works.

?>

What I want to happen is, when the user clicks on the submit button and the php variable ($error='') then, <input class='btn btn-success' type='submit' value='Send!' id='submit'> must be replaced by <input class='btn btn-success' type='button' value='Close' id='close' data-dismiss='modal'>

Any assistance would be appreciated.

Have you read this ? And please just post the relevant code.. — Naruto
– Naruto, Commented Jan 27, 2015 at 11:37
I have. I am new at this. I will get better. I am basically just looking for a way to reference a php attribute in jQuery so that I can include it in an if statement. — Agfokkit
– Agfokkit, Commented Jan 27, 2015 at 15:44

Think Different · Accepted Answer · 2015-01-28 09:55:25Z

1

Change your JQuery AJAX code to:

$(document).ready(function () {
    $("#submit").click(function(event) {
        event.preventDefault();
        $.ajax ({
            type: "POST",
            url: "process.php",
            data: $('form.contact').serialize(),
            dataType: 'json',
            success: function(msg) {
                $("#log").html(msg.html);
                if(!msg.error){
                    $(".modal-footer .btn-success").attr('type','button').val('close');
                    $(".modal-footer .btn-success").attr('id','close');
                    $(".modal-footer .btn-success").attr('data-dismiss','modal');
                }    
            },
            error: function() {
                alert("failure");
            }
        });
    }); 
});

And you php code to:

<?php

$myemail = '[email protected]';

$error = "";
$html = '';
$err = false;
//Validates the fields and set the 'name', 'email' and message fields to        
required. I have removed this part of the code.  It works and the error   
displays in the html

//Displays the success message
if (isset($_POST['name']) AND ($error != "")) {
    $html .= "<span class=\"alert alert-danger\" ><strong>The following errors exist in your form: </strong></span><br><br>";
    $html .= $error;
    $err = true;
} else {
    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['email']);
    $message = strip_tags($_POST['contactMessage']);
    $html .= "<span class=\"alert alert-success\" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
    $html .= "<strong>Name:</strong> ".$name."<br>";    
    $html .= "<strong>Email:</strong> ".$email."<br>";  
    $html .= "<strong>Message:</strong> ".$message."<br>";

    //Sends e-mailto = $myemail, also deleted because this works.
}

echo json_encode(array('error'=>$err,'html'=>$html);

?>

edited Jan 28, 2015 at 9:55

answered Jan 27, 2015 at 11:44

Think Different

2,8251 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Agfokkit Over a year ago

This will change the attributes, I know, but it will do so when the user clicks on send, regardless of whether there are errors or not. I want the code to check whether the $error is empty and when it is empty, then it should change the attributes. I don't know how to reference the php variable in the jQuery code. That is where I am stuck.

Agfokkit Over a year ago

Why do you use '=>' instead of just '='?

Think Different Over a year ago

=> is used to assign value to array key. $array['key'] = 'value'; is the same as $array = array('key'=>'value'); Whereas = is assignment operator.

Collectives™ on Stack Overflow

Changing html content with PHP/AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related