IvanConway

Thank you, that was my line of thinking as well. However I thought I may have missed a solution in my research.  Looks like a re-desiign coming up.

I have designed a form using Dreamweaver CS3.  The form was designed using tables.  I am having an issue with a section of the form that contains 4 columns.  Column 1 is used as the description or label for the input field in column 2.  The same applies for column 3 & 4.  I am trying to design a media query that will make the form more responsive on smaller mobile devices and tablets.

I have attached a section of my form containing the 4 columns and included the media query I am currently using.  The overall design has been working successfully for over two years apart from the responsiveness issue on smaller mobile devices and tablets.

Apart from a total re-design of the entire layout, is it possible to make the 4 column table more responsive using the table method I have attached.

table.html

My sincerest Thank You for your advice and assistance with this project.  I understand why you are quoted as a Guru.  I also realize that I have a long way to go with javascript.

Download and check out the html5blank theme. Gives you all of the necessary blank pages to build a site.

I have tried unsuccessfully to apply your suggested code to my attached js file.  To be honest, I don't have enough understanding as yet  to know how to apply it. I understand the identifier concept and thought I had it covered in my js file by identifying the stateArrays and the Element Id's.  The file is working and unfortunately at this stage of my learning, I am unsure of how to improve it.

autofill.js

I wish I had started 20 years ago. 

Thanks, I'll give it a go.

Thanks to your help and advice, the attached tester .html works how I want.  However, have I gone overboard with the JS code?  Am I able to tidy it up a bit.

Tester.html

My thanks to dsonesuk, with his help I have achieved my goal with the following:

<script>
           var stateArray = [[0, 'Qld'], [0, 'NSW'], [0, 'Vic'], [0, 'Tas'], [0, 'ACT'], [0, 'SA'], [0, 'WA'], [0, 'NT'], [0, 'Queensland'], [0, 'New South Wales'], [0, 'Victoria'], [0, 'Tasmania'], [0, 'Australian Capital Territory'], [0, 'South Australia'], [0, 'Western AUstralia'], [0, 'Northern Territory']];

            var countryArray = ['Australia']; 
             function autoFill(elem) {
                var countryIndex = "";
                for (i = 0; i < stateArray.length; i++) {
                    if (elem.value === stateArray[1]) {

                       countryIndex = stateArray[0];
                        document.getElementById('country').value = countryArray[countryIndex]; 
                         break; 
                    }

                }
            }
        </script>

<form>
            <p><label>State of Birth: </label>
                    <input type="text" id="state" name="state" onkeyup="autoFill(this)">
                    
            <p>
                <label>Country of Birth: </label>
                <input type="text" id="country" name="country">
            </p>
        </form>

My thanks to you dsonesuk for your advice and help.  My reason for not following your instructions in your post was due mainly to my limited understanding of exactly how to do itcorrectly to achieve the result that I wanted.  I apologise to you for my age and lack of understanding.  Ivan

Thank you for your help.  However I have achieved exactly what I want to do with the attached html file.

Button Copy.html

I tried editing the if statement in line 2 - if(f.copy.onClick == true){ without success. Could you please give me an example I could experiment with.

I am trying to copy form inputs from 3 address fields to corresponding duplicate fields in another section of my form. If I use the following script and html the process works perfectly.

<input type="checkbox" id="copy" value=""  name="copy" onclick="CopyAddress(this.form)">

 <script>

function CopyAddress(f) {
  if(f.copy.checked == true) {
    f.bstr.value = f.gstr.value;
    f.bsubcit.value = f.gsubcit.value;
    f.bstate.value = f.gstate.value;
    f.bpcode.value = f.gpcode.value;
}
else {
    f.bstr.value = "";
    f.bsubcit.value = "";
    f.bstate.value = "";
    f.bpcode.value = "";}
}

<script>

I would like to change the checkbox to a button like so:

<input type="button" id="copy" value="Copy" name="copy" onclick="CopyAddress(this.form)">

However once I change to a button, the script will not run and I can't work out why.  My limited understanding tells me the fault lies in line 2 of the JS,  if(f.copy.checked == true).

Can anyone tell me where I am going wrong please.

On 3/20/2018 at 6:58 PM, dsonesuk said:

Unless you are going to use the value of state from dropdown somewhere else, you can simply change the value from dropdown to the actual country that the text state of options is showing. You then wouldn't require any arrays just the retrieved value from selected state.

Thank you for your help, I am learning a lot.  Is it possible however to avoid using the drop down options by just having the user input their State in the State field and the Country field auto fills with Australia. I have attached my html tester file of what I have done so far. 

I have inserted all of the states in the state array to which I will have to also add the short forms as well: ie, QLD for Queensland and NSW for New South Wales etc in the event that the clients inserts the short form of the state.

Tester.html

Being reasonably new at generating javascript, I am trying to create a form where the client enters the State of Birth (Queensland, Victoria, Tasmania etc) and by using javascript the Country of Birth is auto filled with "Australia".
I have got to a stage where I can auto fill the Country field with a small js script with either onClick or mouseOver however I am at a loss with the code to be able to fill the Country field by entering the state name in the State field.  At 75 I'm running out of brains and would appreciate a little help please.

Autofill.html