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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Joining input data into one field

    Hi,

    I'm new to the forums here and could really use some javascript help. I'm trying to create a way to collect a lot of different information from the user, and then format it and compile it into a single text string. For example: name, date, time, place, etc. The composite text string will then be passed through to shopping cart software. I figure the best way to do this is javascript. I have a programming background (from a long time ago) but have never worked with js directly.

    I am working with a test script that (supposedly) takes user input and then displays it on the screen. I've initialized the 3 fields I'm using so I can see what it's doing (or not). So far it will display the initial values concatenated together (sort of; the page seems to go into an endless loop after displaying the output). But I can't seem to get new values into the variables via text input. I've read through at least a couple of dozen websites and tutorials trying to figure it out but haven't had a whole lot of luck.

    Here's the script I've got so far. I'm sure it's a dog's breakfast. I'd really appreciate it if someone could help me figure out how to do this.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var firstname = "firstnull"
    var lastname = "lastnull"
    var wholestring = "initialvalue"
    </script>
    </head>
    
    <body>
    <form name="myform">
    <input name="firstname" type="text" />
    <input name="lastname" type="text" />
    
    <script type="text/javascript">
    var wholestring = wholestring +" "+ firstname +" "+ lastname;
    </script>
    
    <input type="button" value="Click Here" onclick="document.write(wholestring)" />
    
    </form>
    </body>
    </html>
    Thanks for any help!

    Starhugger

  • #2
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    var wholestring = wholestring +" "+ firstname +" "+ lastname

    I don't think you need some of this^
    try.... wait?

    git rid of the vars

    var message=firstname.value+lastname.value
    onclick="document.write(message)"

    wait do you need toString() function

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 248 Times in 245 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function combineStrings(frm){
      var wholeString = frm.firstname.value + frm.lastname.value;
      alert(wholeString);
    }
    </script>
    </head>
    
    <body>
    <form name="myform">
    <input name="firstname" type="text" />
    <input name="lastname" type="text" />
    
    <input type="button" value="Click Here" onclick="combineStrings(this.form);" />
    
    </form>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Glenn and Riptide!

    Glenn, your function works. Thanks!

    RT, yes I do want the spaces between the input bits of data. That's why I'm doing this - so I can format the bits of data and then pass it along to my shopping cart. The cart software I'm using will concatenate the bits but puts commas between them, which makes it very hard to read when it comes to me. Just so I know what other options are available, where can I find this toString() function?

    Thanks.

    SH

  • #5
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    it's a method. it could change the values to a string. I don't really have the time to talk right now. ask glenngv how to add it to your code.

  • #6
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thx Riptide.

    What I want to do with this ultimately is be able to mirror the wholeString data in a read-only textarea field, and then assign the wholeString data to another variable "product" that will be passed along. But I want the user to be able to see the whole thing formatted each time they enter a piece of data. Some of the data will be entered in text fields and some from dropdown menus.

    I've seen the mirroring done in another script I have, but I'm not sure how to adapt it to this. The code used there is:

    <input type="text" name="total" size="15" readonly onFocus="this.blur();" />

    Thanks!

    SH

  • #7
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    try
    <head>
    function change(){
    var message=firstname.value+lastname.value
    var red=getElementById("intext")
    red.value=message.toString()
    }
    </head>
    <body>
    <form name="myform">
    <input name="firstname" type="text" />
    <input name="lastname" type="text" />
    <input type="button" value="Click Here" onclick="change() " />
    <input type="text" name="total" id="intext" size="15" readonly="readonly"/>
    </body>
    Last edited by riptide; 05-19-2007 at 04:14 PM.

  • #8
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Riptide,

    Thanks very much for hanging in there with me!

    I tried your code but the display box remains blank. I can't tell if it's the function that's not working properly or if the instruction to show the results isn't working. I'm not familiar with what you've done, so I don't know how to access the function results in another way to see if it's working.

    SH

  • #9
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <script type="text/javascript">
    function change(){
    var first= document.getElementById("fone")
    var last= document.getElementById("lone")
    var message=first.value+last.value
    var red=document.getElementById("intext")
    red.value=message.toString()
    }
    </script>
    </head>
    <body>
    <form name="myform">
    <input  id="fone"name="firstname" type="text" />
    <input id="lone"name="lastname" type="text" />
    <input type="button" value="Click Here" onclick="change() " />
    <input type="text" name="total" id="intext" size="15" readonly="readonly"/>
    </body>
    
    
    </body>
    </html>
    you have to use an id in anything you want to send to a javascript function.

    use document.getElementById() to get the name of an id. use "" around the name like you see it did. hold the ids in vars then use the .value to get the values of the inputs. It will hold what was typed in.

    Then find the id of the text input. To add a value to it use the values of the vars holding the first and last names. Do not use "" on anything that is part of the javascript. They are only used for things coming from the HTML.
    first.value+last.value not "first.value"+"last.value"
    Last edited by riptide; 05-19-2007 at 07:13 PM.

  • #10
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you RT! That works. And thank you very much for the explanation too. I'm finding javascript a lot more complicated than I had thought it would be, even though I have a programming background (from a long time ago).

    If I can ask you (or anyone else) for a bit more help please...? Two questions:

    (1) How can I get it to display the readonly text without having to click a button? In other words, as the user types in the data, it will automatically reflect what they type.

    (2) I'm still working on the concatenating function that Glenn helped me with. It works, but what I want to do with the results is to pass them to a particular variable name that will be used by a shopping cart. (I'm using Mal's, if anyone's familiar with it.) The variable name will be product1[]. I've tried simply using that as a variable name in the function, but it doesn't seem to pass the text through to the cart.

    P

  • #11
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    1 : try <body oncload="change() >


    as for 2 I really don't know what you mean py passing it to product1[].
    are you saying you want what's in the text in put's value to be put in a var to be used by something else later. If that is what you want. Everytime the user retypes something else the var will hold some other vaule and the old one will be deleted.
    but you could use an array to hold all the values.

  • #12
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by riptide View Post
    1 : try <body oncload="change() >
    What's oncload? I've never seen that before and don't really see it in an online search.

    as for 2 I really don't know what you mean py passing it to product1[].
    are you saying you want what's in the text in put's value to be put in a var to be used by something else later. If that is what you want. Everytime the user retypes something else the var will hold some other vaule and the old one will be deleted.
    but you could use an array to hold all the values.
    Sorry, I guess it's a bit cryptic if you're not familiar with Mal's shopping cart routines. The cart is set up so that you can append pieces of data into a product description, which is called product1[].

    The reason why I want to append it all myself and THEN assign it to product1[] is because I want to be able to control the formatting more than the product1[] routine will let me. I also want to be able to weed out unused input fields. That way, the resulting description that is passed to the cart will be easier for the user to understand.

    And yes, if the user changes their mind and goes back and changes an entry, I want the product1[] and readonly field to reflect that. But I think you meant that each keystroke would cancel out previous ones, which is definitely not what I want.

    My plan is to have a text box passively displaying (readonly) the data that the user enters, all concatenated and formatted, and then they'll see the same thing in the product description part of the cart checkout page. Since they're entering a lot of pieces of information, I think this will make it a lot easier for them to make sure the information is correct before they hit the "Pay Me Now" button.

    Does that make a bit more sense?

    P

  • #13
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    <body onload="change()"

    or you could try
    <input type="button" value="Click Here" onmousemove="change() " />

    and the whole delete things from the array is kinda well I'm having the same problem.I can't do it
    how about using an array but use a submit button so the user can change things before it gets added to the array. And tell them if they wan't to change anything after they push submit they have to start over.

  • #14
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by riptide View Post
    <body onload="change()"
    Oh okay, I see what you meant. But the problem is that when the page loads, the user hasn't input any data yet. Unless they hit refresh, but that starts to get just as awkward and cumbersome as what I already have.

    or you could try
    <input type="button" value="Click Here" onmousemove="change() " />
    I could try it, but it means if the user is using Tab to jump from field to field, it won't get relayed to the function.

    and the whole delete things from the array is kinda well I'm having the same problem.I can't do it
    how about using an array but use a submit button so the user can change things before it gets added to the array. And tell them if they wan't to change anything after they push submit they have to start over.
    Yes, that's a possibility. It puts an extra step in the order process, which is not my first choice, but it might be an option to consider.

    It still leaves me with the problem of how to get the composite data into the product1[] variable. I tried using an Input statement in a few different ways, but it didn't work. Maybe you can see how to make it work:

    <input type="hidden" name="product1[]" value="wholeString" />
    <input type="hidden" name="product1[]" value="wholeString.value" />
    <input type="hidden" name="product1[]" value="functionName(first,second)" />

    It just takes the "value" as a literal string. Is there a way I can call the function from a "hidden" input statement? What kind of event would that be? I'm not sure I can trap an event, unless I hardcode the "value" contents. But I'm just a newbie to this and maybe you can think of something.

    Thanks so much for your help, RT!

    SH

  • #15
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    var product1[]=message
    or something like that. I get back to this.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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