Adding HTML content from javascript /iQuery into a form

[JanMolendijk]

For day`s i`m busy to improve my comment system
& no I`m ready to place a url extractor but I hope
you can support me by this-one....

I want to get some content out from a javescript
& place it into my form so I can save the data.


This is the javascript

Code: Select all

<script type="text/javascript">
$(document).ready(function() {

	var getUrl  = $('#get_url'); //url to extract from text field
	
	getUrl.keyup(function() { //user types url in text field		
		
		//url to match in the text field
		var match_url = /\b(https?):\/\/([\-A-Z0-9.]+)(\/[\-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i;
		
		//returns true and continue if matched url is found in text field
		if (match_url.test(getUrl.val())) {
				$("#results").hide();
				$("#loading_indicator").show(); //show loading indicator image
				
				var extracted_url = getUrl.val().match(match_url)[0]; //extracted first url from text filed
				
				//ajax request to be sent to process.php
				$.post('process.php',{'url': extracted_url}, function(data){ 
					               		
					extracted_images = data.images;
					total_images = parseInt(data.images.length-1);
					img_arr_pos = total_images;
					
					if(total_images>0){
						inc_image = ' <textarea  method="POST" id="url_image" name="url_image" placeholder="Enter Your URL here" class="get_url_input" spellcheck="false" ><div class="extracted_thumb" id="extracted_thumb"><img src="'+data.images[img_arr_pos]+'" width="100%" height="250"></div></textarea><div class="extracted_thumb" id="extracted_thumb"><img src="'+data.images[img_arr_pos]+'" width="100%" height="250"></div>';
					}else{
						inc_image ='';
					}
					//content to be loaded in #results element
					var content = ' <textarea  method="POST" id="url_context" name="url_context" placeholder="Enter Your URL here" class="get_url_input" spellcheck="false" ><div style="float:left;" class="extracted_content"><h4><a href="'+extracted_url+'" target="_blank">'+data.title+'</a></h4><p>'+data.content+'</p></textarea><div class="extracted_url">'+ inc_image +'<div style="float:left;" class="extracted_content"><h4><a href="'+extracted_url+'" target="_blank">'+data.title+'</a></h4><p>'+data.content+'</p><div class="thumb_sel"><span class="prev_thumb" id="thumb_prev">&nbsp;</span><span class="next_thumb" id="thumb_next">&nbsp;</span> </div><span class="small_text" id="total_imgs">'+img_arr_pos+' of '+total_images+'</span><span class="small_text">&nbsp;&nbsp;Choose a Thumbnail</span></div></div>';
					
					//load results in the element
					$("#results").html(content); //append received data into the element
					$("#results").slideDown(); //show results with slide down effect
					$("#loading_indicator").hide(); //hide loading indicator image
                },'json');
		}
	});


	//user clicks previous thumbail
	$("body").on("click","#thumb_prev", function(e){		
		if(img_arr_pos>0) 
		{
			img_arr_pos--; //thmubnail array position decrement
			
			//replace with new thumbnail
			$("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="500" height="250">');
			
			//show thmubnail position
			$("#total_imgs").html((img_arr_pos) +' of '+ total_images);
		}
	});
	
	//user clicks next thumbail
	$("body").on("click","#thumb_next", function(e){		
		if(img_arr_pos<total_images)
		{
			img_arr_pos++; //thmubnail array position increment
			
			//replace with new thumbnail
			$("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="500" height="250">');
			
			//replace thmubnail position text
			$("#total_imgs").html((img_arr_pos) +' of '+ total_images);
		}
	});
});
</script>

I would like to have both into my form

Code: Select all

inc_image = <textarea  method="POST" id="url_image" 
var content = <textarea  method="POST" id="url_context"

& this is my form

Code: Select all

  <div class="container">
   <form method="POST" id="comment_form">
    <div class="form-group">
     Name: <input type="text" name="comment_name" id="comment_name" cols="10"  placeholder="Enter Name" value="<?php echo $user->filter->display_name; ?>"/ >
    
  <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />

It depends where you want to add the html content from javascript in the form, on the beginning, or at the end after other elements.
Se the: 2. Adding new HTML items directly to the target from the tutorial: coursesweb.net/jquery/add-remove-elements-content-jquery