Show edited input by php function from html form in realtime

[Bukk]

I'm quite new in web programming and I'm using php functions preg_replace, trim and iconv to modify user's input so I can use it as valid URL. User inserts string into html form

Code: Select all

    <form action="newtopic.php" method="POST">
       <p><input class="topic-name" type="text" placeholder="Topic name" name="topic" id="topicInput" onkeyup="duplicate()"/></p>
       <p><textarea class="content" placeholder="Text" name="content" id="contentInput"></textarea></p> 
       <p><input class="submitButton" type="submit" value="Submit form"/></p>
       </form>

This is called after submiting the form and it works flawlessly:

Code: Select all

    $stringURL = $_POST['topic'];
    $stringURL = preg_replace('/[^\\pL0-9]+/u', '-', $stringURL);
    $stringURL = trim($stringURL, "-");
    $stringURL = iconv("utf-8", "us-ascii//TRANSLIT", $stringURL);
    $stringURL = preg_replace('/[^-a-z0-9]+/i', '', $stringURL);
    $stringURL = strtolower($stringURL);

But is it possible to show user what will be URL look like in real time? I read about using AJAX and jQuery but I can't figure it out.

I used this function but the result is that it will print whole function text into textfield, instead of edited stringURL.

Code: Select all

    <script type="text/javascript">
    	function duplicate(){
    	var id = document.getElementById('topicInput').value;
    		var urlTopicName = function(id) {
    			$.ajax({
    			url: 'ajaxStringScript.php',
    			type: 'POST',
    			data: {id:id},
    				success: function(data) {
    					console.log(data);
    				}
    			});
    		};
    	
    	
    	var f2 = document.getElementById('contentInput');
    	f2.value = urlTopicName;
    	}
    </script>

aJaxStringScript.php

Code: Select all

    <?php
        if (isset($_POST['id'])) {
            deleteClient11($_POST['id']);
            function deleteClient11($x) {
               // your business logic
    			$stringURL = $x;
    			$stringURL = preg_replace('/[^\\pL0-9]+/u', '-', $stringURL);
    			$stringURL = trim($stringURL, "-");
    			$stringURL = iconv("utf-8", "us-ascii//TRANSLIT", $stringURL);
    			$stringURL = preg_replace('/[^-a-z0-9]+/i', '', $stringURL);
    			$stringURL = strtolower($stringURL);
    			return $stringURL;
            }
        }
    ?>

[AdoptiveSolution]

I changed it to this.

The HTML File :

Code: Select all

<script>
$(document).ready(function(){
	$('#topicInput').on('change',function(){
		var topicInput = $(this).val();
		if(topicInput){
			$.ajax({
				type:'POST',
				url:'ajaxStringScript.php',
				data:'topic='+topicInput,
				success:function(html){
					$('#contentInput').html(html);
				}
			});
		};
	});
});
</script>

<form action="newtopic.php" method="POST">
	<p><input class="topic-name" type="text" placeholder="Topic name" name="topic" id="topicInput" /></p>
	<p><textarea class="content" placeholder="Text" name="content" id="contentInput"></textarea></p>
	<p><input class="submitButton" type="submit" value="Submit form"/></p>

</form>

The PHP file ( ajaxStringScript.php ) :

Code: Select all

<?php
if (isset($_POST['topic'])) {
	$stringURL = $_POST['topic'];
	$stringURL = preg_replace('/[^\\pL0-9]+/u', '-', $stringURL);
	$stringURL = trim($stringURL, "-");
	$stringURL = iconv("utf-8", "us-ascii//TRANSLIT", $stringURL);
	$stringURL = preg_replace('/[^-a-z0-9]+/i', '', $stringURL);
	$stringURL = strtolower($stringURL);
	echo $stringURL;
}
?>

As I understand it, you type an URL and when you tab out the field, an URL like :

http://www.php-forum.com/phpforum/ will change to :

http-www-php-forum-com-phpforum

[Bukk]

Oh yes! This is almost exactly what I've needed. And it works! I've change the 'change' to 'keyup' and it works flawlessly. THANK YOU SO MUCH!