Click here to Skip to main content
15,039,359 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Here I have used jQuery. This code gives me output but I want output in a different way.

When I enter 5 digits in the input field, it gives me "one" in the select tag and "one, two, and four" in the p tag as my output.

Can I get like this if I click on "two" in the p tag, the value in the select tag should change into two? Can someone help me out?

What I have tried:

JavaScript
jQuery(document).keyup(function(){ 
        jQuery("#txtFirstNo").on("input", function() {
            jQuery("#selResult").val("");
               var arr = [];
            
            if ( jQuery(this).val().match(/^(\d{5})$/, '') ) {
                jQuery("#selResult").val("one");
            }
            else if ( jQuery(this).val().match(/^(\d{5})$/, '') ) {
                jQuery("#selResult").val("two");
            }
            else if ( jQuery(this).val().match(/^(\d{5})$/, '') ) {
                jQuery("#selResult").val("four");
            }
            else if ( jQuery(this).val().match(/^(\d{7})$/, '') ) {
                jQuery("#selResult").val("three");
            }
            
// for p tag
        
    if (jQuery("#txtFirstNo").val().match(/^\d{5}$/, '') )  {
            arr.push("one") ;
        }
    if ( jQuery("#txtFirstNo").val().match(/^\d{5}$/, ''))
        {
            arr.push("two");
        }
    if ( jQuery("#txtFirstNo").val().match(/^\d{5}$/, ''))
        {
            arr.push("four");
        }
    if ( jQuery("#txtFirstNo").val().match(/^\d{7}$/, ''))
        {
            arr.push("three");
        }
    
    jQuery("#txtPrint").html(arr.join("<br/>"));
    arr=[];
            
        });
});
HTML
<br> Tracking Number :

<br>
 Shipping Carriers :
      

  Select Carriers
  one
  two
  three
  four
  


<p id="txtPrint"></p>
Posted
Updated 9-Nov-20 1:54am
v2

1 solution

Not every HTML element can "validly" hold a value attribute in the normal sense. <input> and <select>, for examples, are made for it and are given value attributes by design.

Other elements are not made to hold a value. For elements like <p> or <div>, they're really used as containers to old things.

You have two options.
1 - If you want the content of the container you can get the innerHTML or innerText values. These contain the content within the element (text, HTML, CSS, etc.).
2 - I don't use jQuery - just straight javascript and the DOM. I can pretty much give any attribute to any HTML element - and I have used this ability to create custom attributes to store information (such as a many-to-many parent-child relationship with <select> elements). You could put a value= attribute in your element and retrieve it via: document.getElementById().getAttribute('value');

Now how and what jQuery allows you to do in this respect is up to you to discover. Recall, however, that javaScript still works on your page and you can use it!
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900