CODEWITHSUNDEEP
javascripthtml
Eliana Hebrew
Eliana Hebrew

Reputation: 5

Need help converting jQuery function to JavaScript?

I am updating a product, I am able to have the product info prefill the update form and update the product info using jQuery but I want to use JavaScript. How do I convert this jQuery code to JavaScript?

I am following a tutorial online and the person is using jQuery which is cool but I want to see how to do the same method using Javascript.

Javascript Code: 

$(document).on('pagebeforeshow', '#updatedialog', function() {
  $('#newName').val(currentProduct.name);
  $('#newQuantity').val(currentProduct.quantity);
});

function updateProduct() {
  var newName = $('#newName').val();
  var newQuantity = $('#newQuantity').val();
  productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

HTML update form 

<form>
  <div class="ui-field-contain">
    <label for="newName"
           class="ui-hidden- accessible">Name</label>
    <input type="text"
           id="newName"
           data-clear-btn="true"
           placeholder="New Name"/>
    <br/>

    <label for="newQuantity"
           class="ui-hidden-accessible">Quantity</label>
    <input type="number" 
           name="number" 
           pattern="[0-9}"
           id="newQuantity" 
           value="" 
           data-clear-btn="true" 
           placeholder="New Quantity"/>
    <br/>
    <button class="ui-btn ui-icon-plus ui-btn-icon-left"
            id="btnupdate"
            onclick="updateProduct()">
      Update
    </button>
  </div>
</form>

The update form should populate with the information from the product that was already entered and then it should update the changes made to the fields and save it as a new object. I can do it in jQuery but I want help with doing it in Javascript.

Upvotes: 0

Views: 79

Answers (2)

Usama Kiyani
Usama Kiyani

Reputation: 178

you can get values of of the element by id using document try the following

function updateProduct(){
var newName=document.getElementById("newName").value; 
var newQuantity=document.getElementById("newQuantity ").value; 
productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

Upvotes: 2

Okoro Efe Christopher
Okoro Efe Christopher

Reputation: 52

Seems all you're currently doing with jquery is getting the value of input elements by their ID. You can do this with javascript by selecting the form element by ID and getting the value property.

val value = document.getElementById("elemID").value;

Your code should look like this

 function updateProduct(){
 var newName= document.getElementById("newName").value;
 var newQuantity = document.getElementById("newQuantity").value;
 productHandler.updateProduct(currentProduct.id, newName, newQuantity);
  }

Upvotes: 2

Related Questions