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.
– L. Ros., Commented Jan 11, 2018 at 17:21
Assuming from your tags you're happy with a jQuery solution, you can hook to the change event of your select, then get it's val() and set that as the value of the input. — Rory McCrossan
– Rory McCrossan, Commented Jan 11, 2018 at 17:23

NappingRabbit · Accepted Answer · 2018-01-11 17:34:53Z

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, 2018 at 17:34

NappingRabbit

1,9191 gold badge13 silver badges18 bronze badges

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

4 Comments

jotyhista Over a year ago

that looks perfect ! Thanks I'll try now

jotyhista Over a year ago

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 ?

NappingRabbit Over a year ago

@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.

jotyhista Over a year ago

I posted a new question here in case you have time to spare: stackoverflow.com/questions/48214933/…

prasanna puttaswamy · Accepted Answer · 2018-01-11 17:35:30Z

0

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

answered Jan 11, 2018 at 17:35

prasanna puttaswamy

9872 gold badges8 silver badges9 bronze badges

Comments

Peshmerge · Accepted Answer · 2018-01-11 17:40:34Z

0

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">

edited Jan 11, 2018 at 17:40

answered Jan 11, 2018 at 17:34

Peshmerge

1,0801 gold badge17 silver badges29 bronze badges

1 Comment

NappingRabbit Over a year ago

the question asks to update the attribute name in the input field, not the value. [I think]

Collectives™ on Stack Overflow

update HTML property from HTML select object

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related