Jquery display message

therockers · September 7, 2014, 2:46am

Alright, so I’m at a lost right now.

I have a Jquery script that displays user input without refreshing the page. What I’m trying to achieve is only display user input once per submit.

So let’s say a user inputs a text message such as

This is just a demo message

When they submit again and they haven’t refreshed or done anything to the page. This is what it looks like.

This is just a demo message.

Well, this is the second demo message.

What I really want is to replace the first message with the second message so basically it overwrites their first submission and it doesn’t add onto the first submission. My code keeps adding onto the submission and it doesn’t replace it. I’m at my lost right now.

Here’s my code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
	$('#form').on('submit',function(e) {
		$.ajax({
			url: '',
			data: $(this).serialize(),
			type: 'POST',
			success: function(data){
				console.log(data);
				$('#my_div').append(data).serialize();
				$('#form')[0].reset();
				$("#test").on('button').attr("enabled", "enabled").val("").serialize();
			}
		});
		e.preventDefault();
	});
});
</script>
<style type="text/css">
code {
	word-wrap: break-word;
}
</style>
</head>

<body>
<div id="my_div"></div>
<form action="" id="form" name="form" method="POST">
	<textarea id="test" name="test" style="width: 400px; height: 400px;" value=""></textarea><br />
	<button id="button" type="submit">Submit</button>
</form>
</body>
</html>

James_Hibbard · September 8, 2014, 6:54am

Hi,

You don’t need AJAX to do this.

Just attach an event listener to the form, so that when it submits, the default action is prevented.
Then you are free to do whatever you want with the string.

Here’s a simple example:

<p>You entered: <span id="result">nothing yet</span></p>

<form>
  <textarea></textarea><br />
  <button>Submit</button>
</form>

$('form').on('submit', function(e) {
  e.preventDefault();
    
  // You can now do whatever with the data
  $("#result").text($("textarea").val());
});

Demo

I hope that helps. Let me know if I misunderstood something.

therockers · September 8, 2014, 8:44am

James_Hibbard:

Hi,

You don’t need AJAX to do this.

Just attach an event listener to the form, so that when it submits, the default action is prevented.
Then you are free to do whatever you want with the string.

Here’s a simple example:
<p>You entered: <span id="result">nothing yet</span></p>

<form>
  <textarea></textarea><br />
  <button>Submit</button>
</form>
$('form').on('submit', function(e) {
  e.preventDefault();
    
  // You can now do whatever with the data
  $("#result").text($("textarea").val());
});
Demo

I hope that helps. Let me know if I misunderstood something.

Well, you are on the right spot, but I should show the entire code so you get what I’m trying to do.

<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {

	if($_POST['test'] == "") {
	} else {

		function get_sourcecode_string($str, $return = false, $counting = true, $font_color = '#666'){

			$str = highlight_string($str, TRUE);
			$replace = array(
				'<font' => '<span',
				'color="' => 'style="color: ',
				'</font>' => '</span>',
				'<code>' => '',
				'</code>' => '',
				'<span style="color: #FF8000">' => '<span style="color: '.$font_color.'">',
				'<img' => '<img'
			);

			foreach ($replace as $html => $xhtml){
				$str = str_replace($html, $xhtml, $str);
			}

			// delete the first <span style="color:#000000;"> and the corresponding </span>
			// $str = substr($str, 30, -9);
			$str = substr($str, 30);

			$arr_html = explode('<br />', $str); 
			$out = '';

			foreach ($arr_html as $line){
				$line = str_replace(chr(13), '', $line);
				$out .= $line . '<br />';
			}

			$out = '<code>'."\
".$out.'</code>';

			if($return) {
				return $out;
			} else {
				echo $out;
			}
		}

		$test = $_POST['test'];
		echo get_sourcecode_string($test) . "<br />";
	
		exit();
	
	}

} else {
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
	$('#form').on('submit',function(e) {
		$.ajax({
			url: '',
			data: $(this).serialize(),
			type: 'POST',
			success: function(data){
				console.log(data);
				$('#my_div').append(data).serialize();
				$('#form')[0].reset();
				$("#test").on('button').attr("enabled", "enabled").val("").serialize();
			}
		});
		e.preventDefault();
	});
});
</script>
<style type="text/css">
code {
	word-wrap: break-word;
}
</style>
</head>

<body>
<div id="my_div"></div>
<form action="" id="form" name="form" method="POST">
	<textarea id="test" name="test" style="width: 400px; height: 400px;" value=""></textarea><br />
	<button id="button" type="submit">Submit</button>
</form>
</body>
</html><?php
}
?>

What I’m trying to do is have a Jquery and PHP file such as this and allow people to post any HTML or PHP and they can see what they have inputted. It’s also color coded so it’s pretty user friendly. The thing is, when you submit something it shows perfectly, but then if you re-submit something without refreshing the page or doing anything with the page, it will just be put at the bottom of every submission instead of actually replacing the first submission with a newly submitted data.

Here’s a picture of what it does right now.

This is what I want it to do.

I know that your code does the exact thing I’m asking for, but I need to do Jquery post. Yours only just displays the data. I’m trying to achieve storing the data in my database.

James_Hibbard · September 8, 2014, 8:47am

Do you want to store every submission in the database, or just the one the user is happy with?

therockers · September 8, 2014, 9:01am

Well, for the main part; no. When the user hits the “Submit” button, it automatically submits the data into the database. I was going to add in a section where it auto refreshes to the newly updated data.

James_Hibbard · September 8, 2014, 9:02am

Would it then be a good idea to have a preview which is generated while the user types into the text area.
Then, when they are happy with what they have typed, they can submit it.

therockers · September 8, 2014, 9:11am

I actually had that thought in mind when I was typing the first quote I did up there. The preview isn’t too hard. I know it has something to do with onkeyup commands. But I want to focus on the problem at hand. I have another alternative way, but it’s not Jquery like and I think it wouldn’t get much likes on it. Basically, if I can’t get this to work, I can just have a preview option and then do a hard page submission where it refreshes the page and submits the information allowing the back button on the browser to show up.

James_Hibbard · September 10, 2014, 6:40am

Hi,

So, I’m still not 100% sure what you are trying to do.
When the user types something and submits the form, you want to file off an AJAX request, do something server-side, then insert the server’s response into the page (thereby replacing the previous response if there was one).
Is that right?

therockers · September 10, 2014, 8:04pm

Continuing the discussion from Jquery display message:

Yes. That’s what I’m trying to do, but see. Right now, it’s not inserting anything yet. Right now, it’s just displaying the data. I know for sure it has to do with Javascript or I would of posted it in the PHP section. I know that PHP isn’t the problem.

Do you see in my 2 pictures I have above, it shows one with 2 messages and one with just 1 message? Well, that’s what I’m trying to achieve. The last picture with just 1 data is what I want. But right now, it’s displaying all of the data that is being typed in.

Try the code out for yourself and you’ll know what I’m talking about. Do this.

Type a random message first, then hit the submit button. You’ll see that your message was submitted successfully. Now type a whole different message or anything you want, then hit the submit button. Now you’ll see that your message was inserted at the bottom of your first message, but your first message hasn’t disappeared yet.

That’s what I’m trying to explain here. I don’t want the first message to be there. I want the 2nd message to replace the first message so when you hit the “submit” button multiple times, the div will replace your data and put in a new data.

What I’m explaining is just exactly like your Fiddle code you provide, but what I’m trying to tell you is that your Fiddle code is not what I really want. Reason why is because your Fiddle code doesn’t use Jquery Post. Mine does and I’m trying to figure out how to use your FIddle code and at the same time, use Jquery Post.

I think you’re confusing yourself because my problem is fairly easy to explain.

James_Hibbard · September 10, 2014, 8:10pm

Assuming you left the url attribute in your $.ajax() call blank on purpose, try altering the following in your success callback:

$('#my_div').append(data).serialize();

to:

$('#my_div').html(data).serialize();

therockers · September 10, 2014, 8:21pm

James_Hibbard:

Assuming you left the url attribute in your $.ajax() call blank on purpose, try altering the following in your success callback:
$('#my_div').append(data).serialize();
to:
$('#my_div').html(data).serialize();

Thanks. That worked. Now I’m seeing what I was asking for.

Topic		Replies	Views
Ajax form doesn't reload after message display JavaScript	1	1068	November 29, 2018
Show text message if form field populated JavaScript	14	2448	August 28, 2010
Jquery script working only once require page refresh JavaScript	1	2838	October 9, 2014
Clear Text field after displaying message JavaScript jquery	8	1830	January 9, 2018
Script Not Creating Any Sort of Change on Form Submission JavaScript	7	788	October 8, 2014

Jquery display message

Related topics