Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing an input name to a function

    Apologies in advance for newbie question. New job as a webmaster is presenting some opportunities to learn Javascript and other web technologies.

    I am trying to fix up some problems with an HTML form that uses CGI and Javascript.

    For unavailable items, I want an alert to pop up when a user clicks on the item field.

    function notAvailable() {
    var product = document.forms[0].elements.name;
    alert("We regret that " + product + " is not currently available.");
    }

    and in the body of the form:

    <input TYPE="text" NAME="item-223|book|11.95|Rats, Bulls and Flying Machines ppr|15|24|1"
    SIZE="11" MAXLENGTH="13" VALUE="Not Available" onClick="notAvailable(this)">

    The page loads without an error but my alert says "We regret that [object] is not currently available."

    I want to make a generic function so I can call it anywhere it's needed on the form.

    Thank you in advance.

    If you have recommendations for books and web sources for Javascript in forms, I'd appreciate that, too. I have Danny Goodman's "Javascript Bible" but it seems to me that it's more a reference than a tutorial. Also, please recommend a different newsgroup if this one is unsuitable for a Javascript newbie!

    ---Opal

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    var product = document.forms[0].elements.name.value;

    You've got the [object], but you want the value that object holds.

    Hope that helps,
    Sadiq.

  • #3
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    You should use the parameter you pass to notAvailable().

    function notAvailable(obj) {
    alert("We regret that " + obj.name + " is not currently available.");
    }

    Edit:

    It seems that the name-attribute contains more than only the name of the item so perhaps you should extract just the name:

    function notAvailable(obj) {
    var item = obj.name.split("|");
    alert("We regret that " + item[3] + " is not currently available.");
    }
    Last edited by dumpfi; 06-30-2004 at 09:47 PM.

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nothing for nothing but are you really looking forward to continually updating the page and changing the values and add the function to an onclick event?

    Although this can and should be done serverside, below is a javascript example to include those items which are unavailable into an array and then automagically update those item values to indicate Not Available and add the onclick event alert which includes the item name......

    Code:
    <script type="text/javascript">
     <!--//
      function chkAvail(form){
       var notAvailable = new Array('item-223','item-225','item-227');
        for(var i=0; i<notAvailable.length; i++){ 
         var regEx = new RegExp(notAvailable[i],'i'); 
          for(var j=0; j<form.elements.length; j++){
           var element = form.elements[j]; 
            if(element.type.match(/text/i) && element.name.match(regEx)){
               element.style.textAlign = 'center';
               element.value = 'Not Available';
               element.onclick = function(){
               alert('We regret that '+this.name+' is not currently available');
               document.body.focus();
              }
            }
          }
        }
      }
     //-->
    </script>
    </head>
    
    <body onload="chkAvail(document.forms[0])">
    <form>
    <input type="Text" name="item-223|book|11.95|rats, bulls and flying machines ppr|15|24|1"
    size="11" maxlength="13" value=""><br>
    <input type="text" name="item-224|book|11.95|rats, bulls and flying machines ppr|15|24|1"
    size="11" maxlength="13" value=""><br>
    <input type="text" name="item-225|book|11.95|rats, bulls and flying machines ppr|15|24|1"
    size="11" maxlength="13" value=""><br>
    <input type="text" name="item-226|book|11.95|rats, bulls and flying machines ppr|15|24|1"
    size="11" maxlength="13" value=""><br>
    <input type="text" name="item-227|book|11.95|rats, bulls and flying machines ppr|15|24|1"
    size="11" maxlength="13" value=""><br>
    <input type="text" name="item-228|book|11.95|rats, bulls and flying machines ppr|15|24|1"
    size="11" maxlength="13" value=""><br>
    </form>
    .....Willy
    Last edited by Willy Duitt; 07-01-2004 at 07:35 AM.

  • #5
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you all so much for the responses!

    I'm trying them out and this is what I am finding.

    Quote Originally Posted by sad69
    var product = document.forms[0].elements.name.value;

    You've got the [object], but you want the value that object holds.
    This returns an alert that says "We regret that undefined is not currently available."

    The same return happens when I call the function with onClick ="notAvailable(name)" or "notAvailable(this.name)" or "notAvailable(this)".
    ===============================================

    Quote Originally Posted by dumpfi
    You should use the parameter you pass to notAvailable().

    function notAvailable(obj) {
    alert("We regret that " + obj.name + " is not currently available.");
    }
    This returns the same "undefined" alert under the same evocation of the function. I tried passing "notAvailable(obj.name)" and "notAvailable(obj)" and any time I use the term "obj" in the onClick I get error: "obj" is undefined.

    I'm still trying to understand =) and get this very simple element working before I tackle Willy Duitt's elegant solution.

    Thanks again for the guidance!!

    --Opaline

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    What dumpfi was suggesting did not include changing anything in your onclick event handler. Your script should look something like this:


    function notAvailable(obj) {
    alert("We regret that " + obj.name + " is not currently available.");
    }

    and the input in your form should remain:

    <input type="text" name="item-223|book|11.95|Rats, Bulls and Flying Machines ppr|15|24|1"
    size="11" maxlength="13" value="Not Available" onclick="notAvailable(this)">


    This method as dumpfi pointed out will in fact pass in a reference to the object that was clicked.

  • #7
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahah, thank you very much, that's working! I thought I tried every variant on the function call, but I must have missed the obvious.

    ---Opaline

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still think my approach which only requires editting one line which contains the array of items that are not available is preferable to editting the entire page and the numerous items seperately.

    Oh well.....

  • #9
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Willy Duitt
    I still think my approach which only requires editting one line which contains the array of items that are not available is preferable to editting the entire page and the numerous items seperately.

    Oh well.....
    It is. Right now there's only one item which is unavailable, and I'm still wrapping my head around Javascript.

    Now I'm trying to figure out how to automatically fill in some fields with data from other fields, if a certain radio button is checked. When "purchase order" is selected, right now there's a hard requirement to have all fields filled in to complete an order, and for a PO no credit card is required. Hmm, maybe I need to change some of the required fields to be conditional on credit card order instead of writing in values.

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    or...

    <script>
    <!--
    function notAvailable() {
    var product = document.forms[0].elements[0].name;
    alert("We regret that " + product + " is not currently available.");
    }
    //-->
    </script>

    <form>
    <input TYPE="text" NAME="item-223|book|11.95|Rats, Bulls and Flying Machines ppr|15|24|1"
    SIZE="11" MAXLENGTH="13" VALUE="Not Available" onClick="notAvailable()"></form>



    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "


  •  

    Posting Permissions

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