SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Dhaka, Bangladesh
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How I display data in textbox from mysql database

    I have a database where have following 2 tables one name 'article'

    code article ld_price dc_price pr_price
    --------------------------------------------------
    001 Shirt 10 20 25
    002 Pant 15 25 35

    Another is name 'type'

    code type
    ----------------
    001 LD
    002 DC
    002 PR

    I have form where have following filed

    article
    type
    price

    I want that when I input in article textbox code 001 then onchange event textbox will get 'Shirt' if I input 002 then it will get 'Pant' from article table And when I input Type textbox code 001 then onchange event textbox will get 'LD' from type if I input 002 then onchange event textbox will get 'DC' from type and last when Price textbox onfocus then price will be show in text box by matching Artcle and table. EX. If Article is Shirt and type is LD then Price will be ld_price 10 and if it is Shirt and DC then price will be dc_price 20.

    please solve the problem I am very pleased if anybody solve this problem

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Code html4strict:
    <form id="articleTypePrice">
    	<p><label>Article: <input type="text" name="article"></label></p>	
    	<p><label>Type: <input type="text" name="type"></label></p>	
    	<p><label>price: <input type="text" name="price"></label></p>	
    </form>

    Let's place the data into an array to come up with a partial test solution.
    You should be able to use ajax to access the data remotely, which would be closer to a complete solution.

    Place this code at the bottom of the body. If you want it in the head instead you'll need to use some window.onload technique.

    Code javascript:
    var articles = [];
    articles['001'] = {'article': 'Shirt', 'ld': 10, 'dc': 20, 'pr': 25};
    articles['002'] = {'article': 'Pant', 'ld': 15, 'dc': 25, 'pr': 35};
    var types = [];
    types['001'] = {'type': 'ld'};
    types['002'] = {'type': 'dc'};
    types['003'] = {'type': 'pr'};
    function updateArticle() {
    	var article = articles[this.value];
    	if (article) {
    		this.code = this.value;
    		this.value = article.article;
    	}
    }
    function updateType() {
    	var type = types[this.value];
    	if (type) {
    		this.value = type.type;
    	}
    }
    function updatePrice() {
    	var code = this.form.elements.article.code;
    	var type = this.form.elements.type.value;
    	var price = 0;
    	if (code && type) {
    		this.value = articles[code][type];
    	}
    }
    var form = document.getElementById('articleTypePrice');
    form.elements.article.onchange = updateArticle;
    form.elements.type.onchange = updateType;
    form.elements.price.onfocus = updatePrice;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like this but I'm not sure where to look to clear up my confusion - used to this pointers from c++ but this this is working between html DOM and JS , so I'm a bit befuddled by how the this pointer is working starting with how it gets passed to an event handler like :

    form.elements.article.onchange = updateArticle;

    I take it the pointer to the element gets passed to the event handler rather than this representing a pointer to the function like this in a c++ class ? so that this.value is the content of the input element?

    .value is easy enough to understand, but what about

    if (article) {
    this.code = this.value;
    this.value = article.article;
    }

    .code ?
    article.article ?

    maybe if I understand the above I can figure out the rest or at least form a coherent question about it. Looks like nice, tight, efficient code - whatever the hell it does

    Thanks in Advance
    Mike

    Quote Originally Posted by pmw57 View Post
    Code html4strict:
    <form id="articleTypePrice">
    	<p><label>Article: <input type="text" name="article"></label></p>	
    	<p><label>Type: <input type="text" name="type"></label></p>	
    	<p><label>price: <input type="text" name="price"></label></p>	
    </form>

    Let's place the data into an array to come up with a partial test solution.
    You should be able to use ajax to access the data remotely, which would be closer to a complete solution.

    Place this code at the bottom of the body. If you want it in the head instead you'll need to use some window.onload technique.

    Code javascript:
    var articles = [];
    articles['001'] = {'article': 'Shirt', 'ld': 10, 'dc': 20, 'pr': 25};
    articles['002'] = {'article': 'Pant', 'ld': 15, 'dc': 25, 'pr': 35};
    var types = [];
    types['001'] = {'type': 'ld'};
    types['002'] = {'type': 'dc'};
    types['003'] = {'type': 'pr'};
    function updateArticle() {
    	var article = articles[this.value];
    	if (article) {
    		this.code = this.value;
    		this.value = article.article;
    	}
    }
    function updateType() {
    	var type = types[this.value];
    	if (type) {
    		this.value = type.type;
    	}
    }
    function updatePrice() {
    	var code = this.form.elements.article.code;
    	var type = this.form.elements.type.value;
    	var price = 0;
    	if (code && type) {
    		this.value = articles[code][type];
    	}
    }
    var form = document.getElementById('articleTypePrice');
    form.elements.article.onchange = updateArticle;
    form.elements.type.onchange = updateType;
    form.elements.price.onfocus = updatePrice;

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Thanks.

    The .code and .article ones are custom variables that are added to the element object, so that we can obtain them at some later stage.

    Javascript is loosly-typed, so that objects can freely be modified and added to where necessary. Storing the information in the object itself it a preferred technique as opposed to using global variables.
    Last edited by paul_wilkins; Sep 20, 2008 at 00:09.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •