vendredi 12 avril 2019

How to synchronize two textboxes in a javascript code?

I am trying to update two textboxes on my code, textbox1 used for information of a 'student' class property (age), textbox2 used for update the student age. After I synchronize, I need to update the class.

The output process is demonstrated here, in this image:

two muppets

// var currentStudent="", oldStudent = "";
//var studentList = [new Student("David", "Berman", 18, true, "showChange1"), new Student("Anna", "Smith", 27, true, "showChange2"), new Student("Peter", "Jones", 23, true, "showChange3")];
var n = -1;
var txtbox;
var example1 = '{ "students" : [' +
  '{ "First Name":"David" , "Last Name":"Berman", "Age":18 },' +
  '{ "First Name":"Anna" , "Last Name":"Smith", "Age":27 },' +
  '{ "First Name":"Peter" , "Last Name":"Jones", "Age":23 } ]}';
var obj = JSON.parse(example1); // backup

// alternative
var example2 = {
  "students": [{
      "First Name": "David",
      "Last Name": "Berman",
      "Age": 18
    },
    {
      "First Name": "Anna",
      "Last Name": "Smith",
      "Age": 27
    },
    {
      "First Name": "Peter",
      "Last Name": "Jones",
      "Age": 23
    }
  ]
}


$(document).ready(function() {

  console.log(obj);
  $.each(obj["students"], function(i, o) {
    var opt = $("<option/>");
    $(opt).val(i);
    $(opt).text(o["First Name"] + " " + o["Last Name"]);
    $("#selStudents").append(opt);



  })

  $("#selStudents").change(function() {
    n = parseInt($(this).find("option:selected").val());
    var student = obj["students"][n];
    var s = "";
    for (var propertyName in student) {

      s += "<div><label>" + propertyName + ":" + "</label><input value='" + student[propertyName] + "'/></div>";


    }

    $("#selctedData").html(s);
    $("#inpAge").val(student.Age);
    $("#monitor").html(student.ToHTMLString());

  })


})


function GetNewAge() {
  var newAge = $("#inpAge").val();

  if (n != -1) {
    //var student = obj["students"][n];
    var student = example2;
    for (var propertyName in student) {}

    student["Age"] = newAge;
    //document.write(student["Age"]);
  } else {
    document.write("Age not exist!");

  }

}

function Reset() {

}
label {
  display: inline-block;
  width: 100px;
}

#selctedData span {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="" style="width:400px;margin:30px auto">
  <div style="float:left">
    <select id="selStudents" multiple></select>
  </div>
  <div style="float:left;margin-left:20px; position:absolute;  top:30px; left: 500px; " id="selctedData">
    select student ..
  </div>

  <div style="width:400px;margin:30px auto; position:absolute; top:100px;">
    <input type="number" min="1" max="100" id="inpAge" />
    <button onclick="GetNewAge()">Update</button>
    <button onclick="Reset()">Reset</button>
    <div id="monitor"></div>
  </div>

  <div style="clear:both"></div>
</div>

The problematic lines in code:

for (var propertyName in student)
            {

                 s += "<div><label>" + propertyName + ":" + "</label><input value='" + student[propertyName] + "'/></div>";


            }

I create the textbox1 in this line:

<input value='" + student[propertyName] + "'/></div>";

and I have no idea how to connect it to textbox1 which created here:

<input type="number" min="1" max="100" id="inpAge" />

So when I press on the update button, the program will take the value from textbox2 and paste it on textbox1. In addition, it will be required to save this info into 'example2' which defined here:

 var example2 = {
        "students": [
            { "First Name": "David", "Last Name": "Berman", "Age": 18 },
            { "First Name": "Anna", "Last Name": "Smith", "Age": 27 },
            { "First Name": "Peter", "Last Name": "Jones", "Age": 23 }
        ]
    }

('example1' will be used for reset button).

My code is using this file - 'student.js' :

var Student = Class({
initialize: function (fname, lname, age, isFromKarmiel, callback) {
    this.FirstName = fname;    
    this.LastName = lname;  
    this.Age = age;      
    this.IsFromKarmiel = isFromKarmiel;
    this.Bac = {
        FirstName: fname,
        LastName: lname,
        Age: age,
        IsFromKarmiel: isFromKarmiel
    }
    this.Callback = callback;
},
GetValue: function (prop) {
    return this[prop];
},
SetValue: function (prop,val) { 
    this[prop] = val;
    eval(this.Callback + "('" + prop + "'," + val + ")");
},
// reset from bac
Reset: function () {
    this.FirstName = this.Bac.FirstName;
    this.LastName = this.Bac.LastName;
    this.Age = this.Bac.Age;
    this.IsFromKarmiel = this.Bac.IsFromKarmiel;
},
ToHTMLString: function(){
    var s = "";
    var ar = ["FirstName","LastName","Age","IsFromKarmiel"];
    for (var i=0;i<ar.length;i++) {
        s += "<div><label>" + ar[i] + "</label><span>" + student[ar[i]] + "</span></div>";
    }
    return s;
}
});




Aucun commentaire:

Enregistrer un commentaire