Add href value while typing

Hi everyone!

I need help in adding a value in “href” while I am typing my desired text. Thanks in advance!

What code do you currently have in regard to this issue, and can we get a few more details on the relationship between your typed text and href?

Hi there,

here’s a fiddle of my question: [https://jsfiddle.net/yxtw8r9p/][1]

With my example. I’d like to put a value inside the href=“” tag. Whatever I want to type in the text field will also the anchor tag value. Hope this example will help. :blush:
[1]: https://jsfiddle.net/yxtw8r9p/

The following seems to achieve what you’re asking, but I’m not sure if it’s what you’re wanting.

<a id="target-email" href="" itemprop="email"></a>
$('#target-email').prop('href', this.value).html(this.value);
1 Like

Excellent! you’re so great. It work the way I wanted to be. :blush:

Is there a limitation to this code? What I mean is I am also trying to apply the same method with this element:

<section class="businessHours" itemprop="openingHours" datetime=""></section>

and my script is:

$('.businessHours').prop('datetime', this.value).html(this.value);

Anything I did wrong?

Thanks!

There’s no limitation there and it should work as you intend, but it’s breaking my brain as to why you might want the user entry to affect things in this way.

Oops. sorry about that. Technically I am creating a schema generator thing. It’s my project. So what I am doing is there is a contact field wherein every time I put a value in the text field it will automatically shows the output in the text area. After filling up all the fields there will be a download button that will copy all the schema code. That’s it. Hope you were able to get what I am doing with this. :smiley:

I still have some errors in my development and trying to solve it all.

Thanks

Ahh okay - if it helps there is a contentEditable HTML attribute that lets you edit the contents of the page. Click on text to change what it says, that sort of thing.

Hi there!

good day. can you help me solve my problem. In this fiddle I created https://jsfiddle.net/yxtw8r9p/ I have a text field where every time I type any characters. It will automatically show the output on the screen. How can I achieve this in a textarea element? So I want my output appearing in the textarea field every time I type a word? Thanks. :blush:

You can use the same html() method to update a textarea field.

Hi there, Thanks for the tip. Now my output is showing in the textarea field. Next is I have a code to download the content the textarea, But the problem is when I download the content it is not getting exactly what is written in the textarea field. Here’s the download code:

$(document).ready(function () {

              //Get a reference to the link on the page
              // with an id of "exportxt"
              var a = document.getElementById("exportxt");

              //Set code to run when the link is clicked
              // by assigning a function to "onclick"
              a.onclick = function() {

                // Your code here...
    function downloadInnerHtml(filename, elId, mimeType) {
        var elHtml = document.getElementById(elId).innerHTML;
        var link = document.createElement('a');
        mimeType = mimeType || 'text/plain';
        link.setAttribute('download', filename);
        link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
        link.click(); 
    }
    var fileName =  'schema.txt'; // You can use the .txt extension if you want
    downloadInnerHtml(fileName, 'codeoutput','text/plain');
                //If you don't want the link to actually 
                // redirect the browser to another page, then
                // return false at the end of this block.
                // Note that this also prevents event bubbling,
                // which is probably what we want here, but won't 
                // always be the case.
				window.location.reload(true); 
                return false;
				
				
              }});

Here’s the code to output my text in the textarea field:

function updateOutput()
    		{
				var type = 'Person';
    			var name = $('#name').val();
    			var telephone = $('#telephone').val();
    			var email = $('#email').val();
	   			var address = $('#address').val();
	    		var city = $('#city').val();
	    		var state = $('#state').val();
	    		var zip = $('#zip').val();
				var officeHours = $('#officehours').val();
				
   				var html = '<section itemscope itemtype="http://schema.org/'+type+'">\n';
    			if (name) html = html + '<span itemprop="name">'+name+'</span>\n';
   				if (address || city || state || zip )
				{
					html = html + '<section itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">\n';
					if (address) html = html + '<span itemprop="streetAddress">'+address+'</span>\n';
						if (city || state) {
						html = html + "<section>";
						if (city) html = html + '<span itemprop="addressLocality">'+city+'</span>';
						if (city && state) html = html + ", ";
						if (state) html = html + '<span itemprop="addressRegion">'+state+'</span>';
						html = html + "</section>";
					}
					if (zip) html = html + '<span itemprop="postalCode">'+zip+'</span>\n';
	    			html = html + '</section>\n';
				}
    			if (email) html = html + '<a href="'+email+'"itemprop="email">'+email+'</a>\n';
    			if (telephone) html = html + '<span itemprop="telephone">'+telephone+'</span>\n';
				if (officeHours) html = html + '<section itemprop="openingHours" datetime="'+officeHours+'">'+officeHours+'</section>\n';
    			html = html + '</section>\n';
			
    			$('#codeoutput').html(html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"));
				$('#codeoutput').change();
    			$('#htmloutput').html(html);
    		}
			
    	   function initpage() {
	          	$('#codeoutput').autogrow();
				$('#codeoutput').click(function() {
				  $('#codeoutput').select();
				});
				$('input').keyup(window.updateOutput);
    			$('input').click(window.updateOutput);
    			$('select').change(window.updateOutput);
    			$('input.datetimepicker').datetimepicker({ onClose: updateOutput, stepMinute: 10, hour: 12, dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm' });
    			$('input.datepicker').datepicker({ onClose: updateOutput, dateFormat: 'yy-mm-dd'});

    	      	updateOutput();
    	    }

    		$(window.initpage);

Apologies. I can’t make it work in fiddle. :smile:

A quick follow up. Here’s a sample screenshot:

When I donwload the content. This is what it looks like:

What could be wrong with my code?

Hi there. I was able to get the right code. So what I did is:

I change this code:

 var elHtml = document.getElementById(elId).innerHTML;

To this:

var elHtml = $('#codeoutput').val();

Thank you so much for your time helping me. :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.