SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text box instead of select box

    Hello i am not good with java script, i am trying to build-up shopping cart.
    here with this code i am able to add/update quantity with select box. now client want to replace select box with text box. i was trying. but no luck.
    I think i need to do small change with my UpdateQty function.
    here is my code
    PHP Code:
    <select name="<?php echo $row["itemId"]; ?>" onChange="UpdateQty(this)">
    <?php
    for($i 1$i <= 20$i++)
    {
    echo 
    "<option ";
    if(
    $row["qty"] == $i)
    {
    echo 
    " SELECTED ";
    }
    echo 
    ">" $i "</option>";
    }
    ?>
    </select>
    java function
    <script language="JavaScript">

    function UpdateQty(item)
    {
    itemId = item.name;
    newQty = item.options[item.selectedIndex].text;

    document.location.href = 'cart.php?action=update_item&id='+itemId+'&qty='+newQty;
    }

    </script>
    with this code i am able to get values through select. but i want user manually enter his/her quantity, because i can not restrict the quantity,

    so i want to use somthing like this:
    <input type="text" name="<?php echo $row["itemId"]; ?>" onChange="UpdateQty(this)" />
    but it shows empty text box. what can do where text area will work instead of
    select box.

    thanks in advance

  2. #2
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rewriting your JavaScript code as this should do the Job:
    Code JavaScript:
    function UpdateQty(item)
    {
    itemId = item.name;
    newQty = item.value
     
    document.location.href = 'cart.php?action=update_item&id='+itemId+'&qty='+newQty;
    }

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The big problem here is that you will probably annoy users by having the location changed as they are typing. This also presents another problem: how do you know when the user has finished typing?

    The best thing would be to have a button next to your text box that says "update cart". You don't need javascript for this.

    Also, please note that in future you should use window.location, not document.location.

    HTML Code:
    <form action="cart.php?action=update_item" method="post">
      <fieldset>
        <legend>Update quantity</legend>
        <input type="text" name="qty">
        <input type="submit" value="Update Cart">
      </fieldset>
    </form>
    Now, your cart.php script can handle the incoming post data:
    PHP Code:
    $updated_qty $_POST['qty']; 
    You must obviously sanitise this information and make sure it's a number (perhaps use is_numeric) and that it's an acceptable number for your application.

  4. #4
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your quick reply,
    but its not holding back the value.

    example:
    If i select P20 23 and than i go back and add new product let say
    p24 30

    it should give me result like this:

    P20 24
    P24 30

    with this code getting empty text boxes.
    what can i do?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You could do all of this with a simple form structure.

    Code html4strict:
    <form method="get" action="test.html">
        <p>Please enter the quantity you desire:</p>
        <label for="item1">P20 23</label>
        <input type="text" id="item1" name="P20 23"><br>
        <label for="item2">P20 24</label>
        <input type="text" id="item2" name="P20 24"><br>
        <label for="item3">P24 30</label>
        <input type="text" id="item3" name="p24 30"><br>
        <input type="submit">
    </form>

    With what your client wants, what is the step by step process that is desired?

    1. Show dropdown list of items
    2. When item is selected, show input box asking for quantity of that item
    3. Reload the page with the chosen products shown, and be able to select more items


    Should javascript not be available, the above code works perfectly.
    When there is javascript we can add on the extra desired functionality. That in this case is:

    1. A select element that lists the available products, which can be built from the input elements
    2. Hiding the products that don't have a quantity, only showing it if it's chosen from the dropdown list
    3. Using the querystring to populate the product quantities when the page loads


    Getting the correct information from the querystring can be tricky, so there is a nice querystring parser at http://adamv.com/dev/javascript/querystring that does the job for you.

    Here is the HTML that lets us do everything that is wanted to be done. You will want the php code to produce the below HTML code.

    Code html4strict:
    <form id="products" method="get" action="test.html">
        <p id="quantityMessage">Please enter the quantity you desire:</p>
        <div>
            <label for="item1">P20 23</label>
            <input type="text" id="item1" name="P20 23"><br>
        </div>
        <div>
            <label for="item2">P20 24</label>
            <input type="text" id="item2" name="P20 24"><br>
        </div>
        <div>
            <label for="item3">P24 30</label>
            <input type="text" id="item3" name="p24 30"><br>
        </div>
        <p>
            <input type="submit" id="submit" name="submit" value="Update Cart">
        </p>
    </form>
    <script src="querystring.js"></script>
    <script src="cart.js"></script>

    querystring.js is from http://adamv.com/dev/javascript/querystring

    Here is the cart.js that I've quickly run up.

    Code javascript:
    var products = document.getElementById('products'),
        message = document.getElementById('quantityMessage'),
        submit = products.elements['submit'],
        select = document.createElement('select');
     
    // If no items are selected, no message or submit should be shown
    message.style.display = 'none';
    submit.style.display = 'none';
     
    // create select element
    select.name = 'productList';
    select.onchange = updateItems;
     
    addOption('Please choose', select);
     
    var els = products.getElementsByTagName('input'),
        elsLen = els.length,
        el,
        i,
        qs = new Querystring();
    products.inputs = [];
    for (i = 0; i < elsLen; i += 1) {
        el = els[i];
        if (el.id.match(/^item*/)) {
            addOption(el.name, select);
            el.value = qs.get(el.name) || '';
            products.inputs.push(el);
        }
    }
     
    // add select element above first input field.
    products.insertBefore(select, products.firstChild);
    // update input fields on page load
    select.onchange();
     
    function addOption(value, el) {
        var option = document.createElement('option');
        var text = document.createTextNode(value);
        option.appendChild(text);
        option.value = value;
        el.appendChild(option);
    }
     
     
    function updateItems() {
        var products = document.getElementById('products'),
            selectedValue = this.options[this.selectedIndex].value,
            message = document.getElementById('quantityMessage'),
            submit = document.getElementById('submit'),
            elsLen = products.inputs.length,
            el,
            count = 0;
        for (i = 0; i < elsLen; i += 1) {
            el = products.inputs[i];
            if (el.value el.name === selectedValue) {
                count += 1;
                el.parentNode.style.display = '';
            } else {
                el.parentNode.style.display = 'none';
            }
        }
        message.style.display = count ? '' : 'none';
        submit.style.display = count ? '' : 'none';
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello pmw57,

    thanks for your new suggestion.
    I will try your code, and will let you know what will happened.
    actually i just copied your code and tried but it was not working i have to look properly and because on the update, i want to change my database value also.

    i will try and will let you know.


Bookmarks

Posting Permissions

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