Is there a script that I can get somewhere that changes data based on form input?

Discussion in 'JavaScript' started by Rockstr27, Mar 13, 2010.

0
  1. #1
    I am looking for a template script to use that will display data based on form inputs - an example of this is on iPage.com who the total at the bottom of the order form changes as you check or uncheck services to add to an order - any thoughts where I can find something like this?

    Thanks!
     
    Rockstr27, Mar 13, 2010 IP
  2. weathor

    weathor Peon

    Messages:
    148
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think echo; with php is what you need ...?
     
    weathor, Mar 13, 2010 IP
  3. Rockstr27

    Rockstr27 Well-Known Member

    Messages:
    1,052
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    115
    #3
    ... but that does not update in real time - or at least I think it needs some kind of javascript to go with it - like for example, if I have a form input box, and I type hello world in that box, without hitting submit, I was wanting an area of the site where hello world appears as I am typing it in the input box ... ?
     
    Rockstr27, Mar 14, 2010 IP
  4. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #4 
    
<script type="text/javascript">
window.onload = function() {
	var txt = document.getElementById("myTxt");
	txt.onkeyup = function() {
		document.getElementById("result").innerHTML = txt.value;
	}
}
</script>
<input type="text" id="myTxt" />
<div id="result"></div>
    Code (markup):
    That is a general example but if you need something more specific I am happy to help out.
     
    camjohnson95, Mar 14, 2010 IP
  5. inegoita

    inegoita Member

    Messages:
    54
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #5
    Hi

    don't know how good you are with JavaScript, but you could also try using jQuery (just google jQuery) which facilitates attaching events to multiple controls at once(input controls) and also makes it easier to handle dyamic HTML. If this is an option for you let me know and I can help you with an example.

    John
     
    inegoita, Mar 14, 2010 IP
  6. Rockstr27

    Rockstr27 Well-Known Member

    Messages:
    1,052
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    115
    #6
    @camjohnson95 - thanks! I will try this - sounds and looks like what I was needing ...

    @inegoita - yes, jquery is definitely possible - any examples would be great - thanks!
     
    Rockstr27, Mar 15, 2010 IP
  7. inegoita

    inegoita Member

    Messages:
    54
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #7
    Hi Rockstr27

    here's an jQuery example for catching events in various form controls. You can also attach other types of actions to the events like AJAX posting for doing server side processing.

    Hope it helps you,
    John

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
    html,body{margin:0px;padding:0px;height:95%;font-size:12px;}
    label{position:absolute}
    input,select{margin-left:100px}
    </style>
    <script type="text/javascript">
    $(
    function(){
    $(":text","#theForm").keydown(//for text fields
    function(){
    $("#status").text( $(this).attr("id") + " value is " + $(this).val() );
    }
    );

    $("select","#theForm").change(//for select fields
    function(){
    $("#status").text( $(this).attr("id") + " value is " + $(this).val() );
    }
    );

    $(":radio","#theForm").change(//for radio fields
    function(){
    $("#status").text( $(this).attr("name") + " value is " + $(this).val() );
    }
    );

    $(":checkbox","#theForm").change(//for checkboxes fields
    function(){
    $("#status").text( $(this).attr("id") + " is " + $(this).attr("checked") );
    }
    );


    }
    );


    </script>
    </head>
    <body>
    <form id='theForm'>
    <label for='field1'>Text box</label><input id='field1' type='text'/><br/>
    <label for='field2'>Select box</label><select id='field2'><option val='1'>sel1</option><option val='2'>sel2</option><option val='3'>sel3</option></select><br/>
    <label for='field3'>Radio</label>
    <input type='radio' value='val1' name='radiogroup'/>
    <input type='radio' value='val2' name='radiogroup'/>
    <input type='radio' value='val3' name='radiogroup'/>
    <br/>
    <label for='field4'>Check box</label><input id='field4' type='checkbox'/><br/>


    <div id='status'></div>
    </form>
    </body>
    </html>
     
    inegoita, Mar 16, 2010 IP