Results 1 to 10 of 10

Thread: [RESOLVED] [JS]Get value of textbox

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Resolved [RESOLVED] [JS]Get value of textbox

    I feel like I have a good grasp of HTML and CSS so I want to learn JavaScript now. Basically I'm trying to create something that will check if a word is a palindrome or not and this is the script that I'm using:
    javascript Code:
    1. function isPalindrome(word)
    2. {
    3.     var backwards = "";
    4.                
    5.     var i = word.length;
    6.     while(i--) {
    7.         backwards += word.charAt(i)
    8.     }
    9.                
    10.     if (word == backwards) {
    11.         alert(word + " is a palindrome.")
    12.     } else {
    13.         alert(word + " is NOT a palindrome.")
    14.     }
    15. }

    It works ok, I haven't figured out how to ignore casing yet but non the less it works when the casing is the same. The issue I'm having is that I want it to work when a use inputs some text in a textbox and clicks on a button. Currently this is what I have:
    Code:
    <label>Check For Palindrome</label>
    <input name='palindromText' type='text' />
    <input type='button' onclick='isPalindrome(document.getElementsByName('palindromText').value' value='Submit' />
    I'm thinking that my issue is with the onclick, but I'm not positive. Could somebody point out what I'm doing wrong?
    Last edited by dday9; Mar 11th, 2014 at 10:49 AM. Reason: Changed html tags to code tags. They look better.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [JS]Get value of textbox

    I was able to correct my problem. Turns out that getElementsByName returns an array of objects so I need to get the first object:
    Code:
    getElementsByName("palindromText")[0].value
    I was also able to fix my casing issue like this:
    javascript Code:
    1. // Declare a new function with a string parameter
    2. function isPalindrome(word, ignoreCasing)
    3. {
    4.     // Create a new instance of a blank string
    5.     var backwards = "";
    6.                
    7.     // Create a new instance of an integer and set it to our parameter's length
    8.     var i = word.length;
    9.                
    10.     // Loop while i > 0
    11.     while(i--) {
    12.            
    13.         // Add the letter we are on in the iteration to the backwards word
    14.         backwards += word.charAt(i)
    15.     }
    16.  
    17.     // Check if we are ignoring the casing or not
    18.     if (ignoreCasing) {
    19.                                
    20.         // If the word is the same as the backwards word then it's a palindrome
    21.         if (word.toUpperCase() == backwards.toUpperCase()) {
    22.             alert(word + " is a palindrome.")
    23.         // Otherwise it's not...
    24.         } else {
    25.             alert(word + " is NOT a palindrome.")
    26.         }
    27.     } else {
    28.         // If the word is the same as the backwards word then it's a palindrome
    29.         if (word == backwards) {
    30.             alert(word + " is a palindrome.")
    31.         // Otherwise it's not...
    32.         } else {
    33.             alert(word + " is NOT a palindrome.")
    34.         }
    35.     }
    36. }
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: [JS]Get value of textbox

    *edit* Appears I was sniped.

    A couple of issues.

    #1 If you want to learn JavaScript, I would recommend unobtrusive JavaScript, rather than how you're writing it. You can find some good tutorials on Google.
    #2 Your onclick event is encased in single quotes, but you're using single quotes for your function, so it is escaping it.
    #3 You don't have your close bracket for your isPalendrome function in your onclick.

    The line should read:

    Code:
      <input type='button' onclick="isPalindrome(document.getElementsByName('palindromText').value)" value='Submit' />
    Another issue is that you're using getElementsByName. Notice the plural. It returns an array. So you would need to reference the first index of the array (multiple elements can have the same name in HTML).

    Code:
      <input type='button' onclick="isPalindrome(document.getElementsByName('palindromText')[0].value)" value='Submit' />
    However, most people simple use getElementById instead, since IDs need to be unique per field.

    So if you added the ID to your textbox field like so:

    Code:
    <input name='palindromText' id='palindromeText' type='text' />
    You could then reference it as such:

    Code:
      <input type='button' onclick="isPalindrome(document.getElementById('palindromeText').value)" value='Submit' />
    And lastly, you can use .toLowerCase() to convert your text and compare.

  4. #4

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [RESOLVED] [JS]Get value of textbox

    I did take your advice in changing the Name to ID and using getElementById, but I'm having some issues changing my code to be unconstructive. What I've read up on it, this is what I've tried:

    html:
    Code:
    <label>Check For Palindrome</label>
    <input id='palindromeText' type='text' />
    <input id='palindromeBtn' type='button' value='Submit' />
    javascript:
    javascript Code:
    1. window.onload = function() {
    2.     document.GetElementById("palindromeBtn").onclick = isPalindrome(getElementById("palindromeText").value, false);
    3. }

    But that isn't working for me. I do have that JS line at the top of my script too.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: [RESOLVED] [JS]Get value of textbox

    Not sure if it was a typo, or a Fruedian slip, but it's unobtrusive, not unconstructive, haha.

    One thing you'll find about unobtrusive javascript, is that it isn't as easy to pass data when binding the function.

    Your code is close, but you would need to do something like this:

    Code:
    window.onload = function(){
    	  document.getElementById("clickme").onclick = isPalindrome;
    	}
    	
    	function isPalindrome()
    	{
    		var word = document.getElementById("palindromeText").value;
    		var backwards = "";
                    
    		var i = word.length;
    		while(i--) {
    			backwards += word.charAt(i)
    		}
                    
    		if (word == backwards) {
    			alert(word + " is a palindrome.")
    		} else {
    			alert(word + " is NOT a palindrome.")
    		}
    	}
    Assuming that your button has an id of "clickme".

    Note that I put the actual code to get the value from the textbox in the function itself.

    To get around that, you could have a click function for the button that gets the value, and then passes it to the isPalindrome function.

    Once you get a little better at JavaScript, I would also recommend getting into jQuery. JavaScript is really good to know, and jQuery is just a wrapper around it, but jQuery abstracts away a lot of the tougher stuff in JavaScript (like cross-browser compatibility).

    An example of getting the selected value of a radio button in JavaScript vs jQuery:

    JavaScript:
    Code:
    var radios = document.getElementsByName('fieldname');
    
    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            alert(radios[i].value);
        }
    }
    jQuery:

    Code:
    $('input[name="fieldname"]:checked').val();

  6. #6

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [RESOLVED] [JS]Get value of textbox

    Not sure if it was a typo, or a Fruedian slip, but it's unobtrusive, not unconstructive, haha.
    Lol, yeah I mistyped it and when I right clicked I just chose the first suggested word.

    Well I've tried taking your suggestion of creating a click event for my button and then calling the isPalindrome function with the appropriate parameters and it's still not working. By not working I mean nothing is happening whenever I click my button. Here is what I'm trying:
    javascript Code:
    1. // Setup handlers for the controls
    2. window.onload = function() {
    3.     document.GetElementById("palindromeBtn").onclick = palindromeBtn_Click;
    4. }
    5.  
    6.  
    7. // Setup a click event for the palindromeBtn
    8. function palindromeBtn_Click()
    9. {
    10.     //Check if the word in our textbox is a palindrome while the casing is sensative
    11.     isPalindrome(getElementById("palindromeText").value, false);
    12. }
    13.  
    14. // Declare a new function with a string parameter
    15. function isPalindrome(word, ignoreCasing)
    16. {
    17.     // Create a new instance of a blank string
    18.     var backwards = "";
    19.                
    20.     // Create a new instance of an integer and set it to our parameter's length
    21.     var i = word.length;
    22.                
    23.     // Loop while i > 0
    24.     while(i--) {
    25.                    
    26.         // Add the letter we are on in the iteration to the backwards word
    27.         backwards += word.charAt(i)
    28.     }
    29.  
    30.     // Check if we are ignoring the casing or not
    31.     if (ignoreCasing) {
    32.                                
    33.         // If the word is the same as the backwards word then it's a palindrome
    34.         if (word.toUpperCase() == backwards.toUpperCase()) {
    35.             alert(word + " is a palindrome.")
    36.  
    37.         // Otherwise it's not...
    38.         } else {
    39.             alert(word + " is NOT a palindrome.")
    40.         }
    41.     } else {
    42.         // If the word is the same as the backwards word then it's a palindrome
    43.         if (word == backwards) {
    44.             alert(word + " is a palindrome.")
    45.  
    46.         // Otherwise it's not...
    47.         } else {
    48.             alert(word + " is NOT a palindrome.")
    49.         }
    50.     }
    51. }
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  7. #7
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: [RESOLVED] [JS]Get value of textbox

    Can you post your HTML as well, please?

  8. #8

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [RESOLVED] [JS]Get value of textbox

    Sure:

    Code:
    <label>Check For Palindrome</label>
    <input id='palindromeText' type='text' />
    <input id='palindromeBtn' type='button' value='Submit' />
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  9. #9
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: [RESOLVED] [JS]Get value of textbox

    Don't know how I didn't see this before.

    Two things.

    #1

    Code:
    document.GetElementById("palindromeBtn").onclick = palindromeBtn_Click;
    Should be

    Code:
    document.getElementById("palindromeBtn").onclick = palindromeBtn_Click;
    JavaScript is case sensitive, and it is getElementById, not GetElementById.

    #2 In your palindromeBtn_Click function, you're just calling getElementById, not document.getElementById, so it thinks you're calling a custom function instead of one associated with the document object.

    I'm also not sure if you're commenting so much so you can see what you're doing, but a lot of your comments are just wasted space. You'll always know that

    Code:
    var backwards = "";
    Is setting the variable backwards = "". There is no point to the comment... I only bring that up because I just recently did a code review of someone who was doing the same thing. If you're just doing it to reiterate what you're doing, so you can remember better, then this is a moot point.
    Last edited by kfcSmitty; Mar 11th, 2014 at 01:36 PM.

  10. #10

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [RESOLVED] [JS]Get value of textbox

    Ah ok cool. Changing both of those gets it to work. Thank you so much for your patience.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width