update HTML property from HTML select object

Question

is there an easy way to update an html property from an HTML select object ? in the example below I would like to update name with the value from the select object when the user chooses an option.

EDIT: user can add more search criteria like below; I have a function to add similar code like below to the search form.

<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
<select>
    <?php
        foreach ($fields as $key => $value) {
            if ($key=="select") {
                echo "<option selected value='".$key."'>".$value."</option>";
            } else {
                echo "<option value='".$key."'>".$value."</option>";
            }
        }
    ?>
</select>

Ajax with jquery is an option to make a call to a php page with option — L. Ros., Jan 11 '18 at 17:21
Assuming from your tags you're happy with a jQuery solution, you can hook to the [`change`](http://api.jquery.com/change) event of your `select`, then get it's [`val()`](http://api.jquery.com/val) and set that as the value of the `input`. — Rory McCrossan, Jan 11 '18 at 17:23
@RoryMcCrossan that could be a solution but in my case it would require setting change events ahead. sorry I did not precise but user would be able to add more search criterias so if there is a dynamic solution ? — jotyhista, Jan 11 '18 at 17:30
Yes, use event delegation: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Rory McCrossan, Jan 11 '18 at 17:32

Peshmerge · Answer 1 · 2018-01-11T17:40:34.260

You don't need php for it. You can do it using javascript (Jquery). Here's an example:

$(document).ready(function() {

    $("#select_name option").filter(function() {
        return $(this).val() == $("#animal_name").val();
    }).attr('selected', true);
    $("#select_name").on("change", function() {     
  $("#animal_name").attr("name",$(this).find("option:selected").attr("value"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_name" name="select_name"> 
<option value="">Please select an animal</option> 
<option value="Cat">Cat</option> 
<option value="Dog">Dog</option> 
<option value="Cow">Cow</option> 
</select>

<input type="text" id="animal_name" name="animal_name" value="" readonly="readonly">

the question asks to update the attribute `name` in the input field, not the value. [I think] — NappingRabbit, Jan 11 '18 at 17:36

score 0 · Accepted Answer · answered Jan 11 '18 at 17:34

0

This does what you ask, although it is not impressive to look at in the snippet, however, inspecting the input field after change shows that the name attribute has been populated.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
  <select onChange="doThing(this)">
    <option value="KeyOne">ValOne</option>
    <option value="Key2">Val2</option>
    <option value="Key3">Val3</option>
    <option value="Key4">Val4</option>
    <option value="Key5">Val5</option>
  </select>
  
  
  <script type="text/javascript">
    function doThing(f){
      $("#AS1").attr("name",$(f).val());
    }
  </script>

answered Jan 11 '18 at 17:34

NappingRabbit

1,888
1
13
18

1

that looks perfect ! Thanks I'll try now – jotyhista Jan 11 '18 at 17:38
works great for the first one and it answers the question but Im trying to adapt your answer to the dynamically added ones without any luck so far; `this` is not found. I tried replacing with `e.target` and a dynamically generated `id` for the `select` object but `doThing` is not updating `name`. any idea ? – jotyhista Jan 11 '18 at 19:02
@jotyhista I would maybe have to see it. the `this` of course refers to the `select` element. you can give it an id and then change the function. the option values being generated dynamically should not change anything as they are rendered prior to the javascript running. – NappingRabbit Jan 11 '18 at 19:11
1

I posted a new question here in case you have time to spare: https://stackoverflow.com/questions/48214933/update-html-attribute-from-appended-html-element – jotyhista Jan 11 '18 at 20:01

score 0 · Answer 3 · answered Jan 11 '18 at 17:35

You can use jquery. Bind the on change event for select and set select value to required place. for your example

<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
  <select class="sel">
      <?php
        foreach ($fields as $key => $value) {
          if($key=="select"){
            echo "<option selected value='".$key."'>".$value."</option>";
          }else{
            echo "<option value='".$key."'>".$value."</option>";
          }
        };
      ?>
  </select>
$(document).ready(function(){
$('.sel').change(function(){
var value = $(this).val();
$('#AS1').val(value);
});
})

Don't forget to add jquery library

update HTML property from HTML select object

3 Answers3