update a json field when another field is changed in html javascript?-CodePudding

Let's say I have form like this.


<html>
  <body>
    <form>
      <div>
        <input id="brand" name="brand" type="text" value="toyota">
      </div>
      <div>
        <input id="color" name="color" type="text" value="blue">
      </div>
      <div>
        <input id="json_field" name="json_field" type="text" value='{"brand": "toyota", "color": "blue"}' size= 50 readonly>
      </div>
    </form>
  </body>
</html>

What I want is:

when I change 'brand' field to 'nisan', the json_field auto change

{"brand": "nisan", "color": "blue"}

when I change 'color' field to 'red', the json_field auto change

{"brand": "nisan", "color": "red"}

Kindly please tell me how to do it.

CodePudding user response：

If you use jQuery, a Framework for JavaScript, it can be a bit easier to make the jump from Python.

Consider the following example.

$(function() {
  // Define an Object use by other functions
  var myJson = {
    brand: "",
    color: ""
  };

  // Define a Function to update the Object and output it to a Text Field
  function updateJson(key, value) {
    myJson[key] = value;
    $("#json_field").val(JSON.stringify(myJson));
  }

  // Bind the "change" event to an HTML Element and perform a specific anonymous function
  $("input").change(function() {
    updateJson($(this).attr("id"), $(this).val());
    // this is reference to the element that is the subject of the event
    // $(this) is a jQuery Object of the Element
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <input id="brand" name="brand" type="text" value="toyota">
  </div>
  <div>
    <input id="color" name="color" type="text" value="blue">
  </div>
  <div>
    <input id="json_field" name="json_field" type="text" value='{"brand": "toyota", "color": "blue"}' size=5 0 readonly>
  </div>
</form>

CodePudding user response：

Add onchange="updateJsonField()" in input tag then add function updateJsonField() in script tag of html file or js file, json_field auto change when change brand or color

<html>
  <body>
    <form>
      <div>
        <input id="brand" name="brand" type="text" value="toyota" onchange="updateJsonField()" />
      </div>
      <div>
        <input id="color" name="color" type="text" value="blue" onchange="updateJsonField()" />
      </div>
      <div>
        <input id="json_field" name="json_field" type="text" value='{"brand": "toyota", "color": "blue"}' size="50" readonly />
      </div>
    </form>
  </body>
  <script>
    function updateJsonField() {
      var brand = document.getElementById("brand").value;
      var color = document.getElementById("color").value;
      document.getElementById("json_field").value = JSON.stringify({ brand: brand, color: color });
    }
  </script>
</html>

CodePudding user response：

Good question - updating a field based on the value from another field is a super common use case and there are six quintillion ways to do it. So here's one way.

First, set up an event listener on your brand field (you'll do the same for your color field, too). Notice the onChange property - this will call the function onBrandFieldChange any time the user updates the value in the brand field.

<input id="brand" name="brand" type="text" value="toyota" onChange="onBrandFieldChange">

Then, create the event listener that updates the JSON field value.

// First, store a reference to the JSON field so you can manipulate its value
const jsonField = document.querySelector("#json_field");

function onBrandFieldChange(event) {
    // newBrand will be "nissan" or "toyota" or something else
    const newBrand = event.target.value;

    // Read the jsonField value (which comes in as a string)
    // Parse it into an actual JavaScript object
    const jsonFieldValue = JSON.parse(jsonField.value);

    // Update the "brand" property in your jsonField
    jsonFieldValue["brand"] = newBrand;

    // Reset the field value (converting it back to a string)
    jsonField.value = JSON.stringify(jsonFieldValue);
}