#1
  1. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,111
    Rep Power
    487

    Unable to query form elements


    Good evening everyone.
    I hope that someone can please help me with a problem I have.
    My script is written in PHP mainly and it talks to a MariaDB 5.5 database.

    The concept behind the script is the user can manage a table of price overrides.

    When they visit the management page, there are three sections:

    Top - A div which initially contains a list of any/all existing overrides.
    Middle - A simple HTML form which calls some ajax which refreshes the data displayed in the bottom section.
    Bottom - An initially empty DIV but when the user starts typing in the middle form, the results of the Ajax are displayed in here.

    When a user performs a search, the searcher builds a simple HTML form around the results to allow the user to modify data contained in input boxes and then click an "add" button to then throw the values of these input boxes via Ajax, which adds the record to the 'overrides' table and then makes the "top" section refresh, showing the new addition.

    An example of the auto-generated form is here:-
    PHP Code:
    <form name="destinations">
    <
    table width="100%">
        <
    tbody>
            <
    tr>
                <
    td><strong>Destination</strong></td>
                <
    td><strong>Peak GBP Per Min</strong></td>
                <
    td><strong>Offpeak GBP Per Min</strong></td>
                <
    td><strong>Connection GBP</strong></td>
                <
    td><strong>&nbsp;</strong></td>
            </
    tr>
            <
    tr>
                <
    td>UK Vodafone Mobile</td>
                <
    td> <input id="1_cust_peakpm" name="1_cust_peakpm" value="0.0225" type="text"></td>
                <
    td> <input id="1_cust_offpeakpm" name="1_cust_offpeakpm" value="0.0225" type="text"></td>
                <
    td> <input id="1_connection" name="1_connection" value="0.75" type="text"></td>
                <
    td><input name="1_add_button" value="Add" onclick="addme(&quot;destination&quot;, this.form);" type="button"></td>
            </
    tr>
            <
    tr>
                <
    td>UK Orange Mobile</td>
                <
    td> <input id="2_cust_peakpm" name="2_cust_peakpm" value="0.0225" type="text"></td>
                <
    td> <input id="2_cust_offpeakpm" name="2_cust_offpeakpm" value="0.0225" type="text"></td>
                <
    td> <input id="2_connection" name="2_connection" value="0.23" type="text"></td>
                <
    td><input name="2_add_button" value="Add" onclick="addme(&quot;destination&quot;, this.form);" type="button"></td>
            </
    tr>
        </
    tbody>
    </
    table>
    </
    form
    Please note that at the moment, the "addme" function just displays the values passed to it with an Alert().

    When the either of the "add_button" buttons is clicked using the code above, I see "object HTMLFormElement" in the alert but if I change it to this:

    this.form.1_connection.value

    nothing happens, I would expect it to alert "0.75" which is the value held in that element.

    Here is the full page code so you can see the form above in context.

    Code:
    <h1>Call rate override manager</h1>
    <div id='existing_overrides'>
    	<h3>Existing overrides</h3>
    	<div id='information'>
    		<img src='/iconpack/information.png' align='absmiddle' border=0 alt='There are no existing overrides' title='There are no existing overrides'>
    		 There are no existing overrides
    	</div>
    	<br />
    </div>
    <hr>
    <h3>Search call rates to add a new override</h3>
    <form name="search_form">
    	Find call rates where <input type="radio" name="search_type" id="prefix" checked onclick="findit(document.search_form.search_entry.value);"> <label for="prefix">PREFIX starts with</label> - OR -  <input type="radio" name="search_type" id="destination" onclick="findit(document.search_form.search_entry.value);"> <label for="destination">DESTINATION contains</label> : <input type="text" name="search_entry"> <img src="/iconpack/magnifier.png" onclick="findit(document.search_form.search_entry.value);" align="absmiddle">
    </form>
    <div id="search_results">
    <form name="destinations">
    <table width="100%">
    	<tbody>
    		<tr>
    			<td><strong>Destination</strong></td>
    			<td><strong>Peak GBP Per Min</strong></td>
    			<td><strong>Offpeak GBP Per Min</strong></td>
    			<td><strong>Connection GBP</strong></td>
    			<td><strong>&nbsp;</strong></td>
    		</tr>
    		<tr>
    			<td>UK Vodafone Mobile</td>
    			<td> <input id="1_cust_peakpm" name="1_cust_peakpm" value="0.0225" type="text"></td>
    			<td> <input id="1_cust_offpeakpm" name="1_cust_offpeakpm" value="0.0225" type="text"></td>
    			<td> <input id="1_connection" name="1_connection" value="0" type="text"></td>
    			<td><input name="1_add_button" value="Add" onclick="addme(&quot;destination&quot;, this.form);" type="button"></td>
    		</tr>
    		<tr>
    			<td>UK Orange Mobile</td>
    			<td> <input id="2_cust_peakpm" name="2_cust_peakpm" value="0.0225" type="text"></td>
    			<td> <input id="2_cust_offpeakpm" name="2_cust_offpeakpm" value="0.0225" type="text"></td>
    			<td> <input id="2_connection" name="2_connection" value="0" type="text"></td>
    			<td><input name="2_add_button" value="Add" onclick="addme(&quot;destination&quot;, this.form);" type="button"></td>
    		</tr>
    	</tbody>
    </table>
    </form>
    </div>
    I've kinda hit a brick wall with this part and wonder if someone has a little bit of time to make any suggestions?
    I'm afraid I can't provide any links to see this actually running as it's an internal application but I think that I have given all the information you will need - of course, I am happy to answer any questions that you may have regarding this.

    I really appreciate you guys reading this and am looking forward to any help anyone can offer!
    Cheers!
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  2. #2
  3. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,111
    Rep Power
    487
    Okay, I think I have sussed it ... by changing the element names from (example)

    1_connection

    to

    connection_1

    that seems to work, I'm not the best JS programmer lol so please forgive my noob mistake - hopefully someone will see this thread and avoid naming their variables with a number at the start!

    #doh

    Comments on this post

    • Kravvitz agrees
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Congratulations on finding the solution yourself and thanks for posting it.

    As you found out, IDs may not start with a number.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo