0

I'm trying to concat city, state and zip input fields that are automatically populated when the user makes a selection from a customer dropdown list and causes the address line to also change (auto populate).

I have tried all of the suggestions made in the following posts, but none of them worked as none of them have an 'accepted' answer:

Concatenate multiple HTML text inputs with stored variable, Concatenate two text fields in html, and How to concat strings from inputs with javascript?

This is my current code that displays the input box, but none of the values are showing up in it. When I get this working, I intend to 'hide' the city, state, zip inputs, so that only the concatenated input line appears on the page.

echo '<input style="float:left; margin-left:182px; margin-top:-6px; border:0px; background:none; box-shadow:none;" type="text" id="city" name="city" readonly="readonly" value="">';
            echo '<input style="float:left; border:0px; margin-top:-6px; background:none; box-shadow:none;" type="text" id="state" name="state" readonly="readonly" value="">';
            echo '<input style="float:left; border:0px; margin-top:-6px; background:none; box-shadow:none;" type="text" id="zip" name="zip" readonly="readonly" value="">';
            echo '<input type="text" id="custAdd" name="custAdd">';


<script>
   $("custAdd").change(function(){
    document.getElementById('custAdd').value = 
    document.getElementById('city').value + ', ' + 
    document.getElementById('state').value + ' ' + 
    document.getElementById('zip').value;
 };
</script>

Thanks in advance for your time and any advice you can provide.

Improve this question
6
  • 1
    When you use jQuery to access a DOM element, you need to give it a valid selector. To select by ID, that's a # followed by the ID in question. So, to access the custAdd input, you need to use $("#custAdd"), not $("custAdd"). Commented May 12, 2018 at 3:24
  • Secondly, by calling the change function on an input, you are indicating that you want the provided handler (your internal function) to be called whenever that input is changed. So, what you've said here is that when the custAdd input is changed (by the user typing in it, for example), the value should be changed to the values of the city, state and zip. That's surely not what you intend. Commented May 12, 2018 at 3:24
  • It's not quite clear from your description, but it seems you want to have a single visible input where someone can type an address with commas in it, and set the (eventually hidden) city, state and zip inputs from that? If so, it's not concatenation you're looking for. Commented May 12, 2018 at 3:25
  • @Greg Schmidt Thank you pointing out the missing # in my ID in the jQuery. I apologize for not being more clear about my intentions. Right now when a selection in made in the customer dropdown list, the address, city, state and zip input fields auto-populate. What I need to have happen now is when that address input senses that the auto-populated text changed it, I want the other 3 input fields (city, state, zip that have also been auto-populated by the dropdown) to concat. It doesn't matter to me if this is in a separate input field or if they can concat as they are, whichever method works. Commented May 12, 2018 at 14:36
  • Will those three fields only ever change as a group, i.e. if one changes you know that the other two are also changing? Commented May 12, 2018 at 20:02

3 Answers 3

Reset to default
0

You are also missing a closing parentheses ) at the end of the change function

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for this. Unfortunately, it is still not showing anything.
0

Based on the discussion in the comments, it seems that what you want to do is update the combined field when one of the others changes, it doesn't matter which one. So:

$("#city").change(function(){

Or #state or #zip, it shouldn't matter.

Improve this answer

5 Comments

Yes, that is what I thought, too. The address is updated along with those other three that is why I put the onchange function at the end of it, but for some reason the concat doesn't seem to be working when the address changes. In fact none of the text (city, state or zip) appears in that custAdd input box. Do you know what would cause this? I updated the code to reflect the changes you and Dustin Hammack suggested. Maybe the program isn't recognizing when the address changes, thus causing the onchange to not be activated?
This is the updated code (sorry I don't know how to format it better in a comment): <script> $("#custAdd").change(function(){ document.getElementById('custAdd').value = document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zip').value; }); </script>
You're still showing #custAdd as the target of the change call here. Should be #city, per my answer.
It's also possible that whatever is filling in those fields isn't triggering the onchange event.
That is exactly what it was, @Greg Schmidt. The onchange event wasn't being triggered. Thanks so much for sticking with me and trying to help with this issue. I really appreciated your persistence.
0

After help from @Greg Schmidt and hours of testing different scenarios, I was able to concatenate the city, state and zip input fields. The issue was that since the address input field was also being auto-populated, it wouldn't trigger the onchange event. What finally worked was adding the concat code to an onchange code for a select field. Here is the working code:

PHP:

$ddlquery2 = "SELECT * FROM everyone WHERE rolename='Customer' ORDER BY first_name ASC";
        $ddlresult2 = mysqli_query($dbc, $ddlquery2) or die("Bad SQL: $ddlquery2");
        echo 'Customer (select one): <select type="text" class="dropdown" name="custid" id="customerID" size="1" onchange="popaddress()">';
        echo '<option value=""></option>';
        while($ddlrow2=mysqli_fetch_array($ddlresult2, MYSQLI_ASSOC)){
        echo "<option value='".$ddlrow2['id']."'  data-address='".$ddlrow2['address']."' data-city='".$ddlrow2['city']."' data-state='".$ddlrow2['state']."'  data-zip='".$ddlrow2['zip']."'>" . $ddlrow2['first_name'] .' ' .$ddlrow2['last_name']. "</option>";
        } //End while statement
        echo "</select>";
        echo '<br>';
        echo '<input style="float:left; margin-left:185px; margin-top:3px; border:0px; background:none; box-shadow:none;" type="text" id="custaddress" name="address" readonly="readonly" value="" onchange="concatloc()">';
        echo "<br >";

        echo '<input style="float:left; margin-left:185px; margin-top:-7px; border:0px; background:none; box-shadow:none;" type="text" id="custAdd" readonly="readonly" value="">';
        echo '<input type="hidden" id="custcity" name="city" value="">';
        echo '<input type="hidden" id="custstate" name="state" value="">';
        echo '<input type="hidden" id="custzip" name="zip" value="">';

JQUERY:

<script>
$('#customerID').change(function() {
    selectedOption = $('option:selected', this);
    $('input[id=custaddress]').val( selectedOption.data('address') );
    $('input[id=custcity]').val( selectedOption.data('city') );
    $('input[id=custstate]').val( selectedOption.data('state') );
    $('input[id=custzip]').val( selectedOption.data('zip') );

    document.getElementById('custAdd').value = 
    document.getElementById('custcity').value + ', ' + 
    document.getElementById('custstate').value + ' ' + 
    document.getElementById('custzip').value;
 });
</script>

I hope this helps someone else that is trying to concatenate input fields. One additional piece of advice...be careful about copying and pasting code even within the same file. When I initially set the original city, state, and zip inputs to type="hidden" they still appeared on the page. I had to manually type those lines over in order for the 'hidden' command to work.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.