Click here to Skip to main content
15,851,711 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
I need to convert this javaskript code to jquery, I would be very grateful for help:


JavaScript
let btn = document.getElementById("btnSend");
let form = document.getElementById("zeForm");
let input = document.getElementById("zeInput");
let msg = document.getElementById("msg");
let allowedValues = ["atown", "btown", "ctown"]; 

btn.onclick = function() {
  let allGood = false;
  
  allowedValues.forEach(function(elm) {
    if(elm === input.value) {
       allGood = true;
       return;
    }
  })

  if(allGood) {
    msg.innerHTML = "Success!!";
    msg.style.color = "green";
    
  } else {
      msg.innerHTML = "This value is not accepted";
      msg.style.color = "red";
  }
    msg.style.display = "inline";

}<


The html code for test:
HTML
<pre><form id="zeForm">
    <input id="zeInput" type="text" list="typ" name="name" placeholder="gtown" > 
        <datalist id="typ">
            <option value="atown">atown</option> 
            <option value="btown">btown</option> 
            <option value="ctown">ctown</option> 
        </datalist> 
    </input>
    <p id="msg"></p>
    <button id="btnSend" type="button">send</button>
  </form>


What I have tried:

I tried before but it never work correct, i wrote also some tutorials. Therefore about help i would very very grateful.
Posted
Updated 4-Jul-22 0:28am
v7
Comments
Nathan Minier 4-Jun-18 14:34pm    
jQuery is a JavaScript library...ergo no translation is required. It all takes place in a JS runtime.

As Nathan Minier said, JQuery is just a library written using javascript. So, the question is odd in a sense. But JQuery is also written heavily to replace many common functionality to write code in much simpler fashion. As well as JQuery offers functionality that deal with cross browser compatibility issues. I am not good at JQuery, but I will give you some basic idea based on your code.

JavaScript
#$("#uniq_id_of_element"); 
# example of writing html text in an element
$("#uniq_id_of_element").html("This text"); 

# example of writing value to an input object
$("#uniq_id_of_element").val("10")

# example of reading value to an input object
var x=$("#uniq_id_of_element").val();

# example of onclick even handling
$("#uniq_id_of_element").click(function(){ console.log("I am clicked! I am clicked!"); })

# example css
$("#uniq_id_of_element").css("border-left", "1px sold gold");


Suggestion:
You wrote a for loop to check if your input box have the value that is assigned in your array, which can be replaced by indexOf function[^]

JavaScript
if(allowedValues.indexOf($("#zeInput").val()) != -1) {
 $("#msg").html("Life is beautiful!");
}
 
Share this answer
 
Comments
Member 13858049 5-Jun-18 8:21am    
Thank you for your answer, however : I have now a try of the jquery code which is translated from JavaScript , by this translation of the code above, however it does not work with the example html (with the javaskript stuff it did work),it should color red or green the input if somebody enter a correct word from the datalist or not, Mabey somebody can help, I do not now what I do wrong:

let btn = $("#btnSend");
let form = $("#zeForm");
let input = $("#zeInput");
let msg = $("#msg");
let allowedValues = ["atown", "btown", "ctown"]; // same values as the options in your datalist


btn.on('click' , function() {
    let allGood = false;

    allowedValues.each(function(index, element) {
        if (element === input.value) {
            allGood = true;
            return;
        }
    })

    if (allGood) {
        msg.text("Success!!");
        msg.attr('style',"color:green");
        //form.submit();
    } else {
         msg.text("This value is not accepted";
         msg.attr('style',"color:red");
    }
   msg.attr('style',"display:inline");

});
Member 13858049 5-Jun-18 8:32am    
i did fore it an own question thread: https://www.codeproject.com/Questions/1247127/Jquery-code-does-not-work
Mohibur Rashid 5-Jun-18 16:39pm    
allGood scope is limited to fuction. And you are missing the point of execution sequence
Mohibur Rashid 5-Jun-18 19:58pm    
this part should be inside click function
if (allGood) {
        msg.text("Success!!");
        msg.attr('style',"color:green");
        //form.submit();
    } else {
         msg.text("This value is not accepted";
         msg.attr('style',"color:red");
    }
Quote:
How to convert this javascript code to jquery

As already said, jquery is written in javascript, it is only a set of facilities made to ease your life as programmer.
So you have to learn jquery and see which part will fit your need.
jQuery Tutorial[^]
 
Share this answer
 
$("form").submit(function(e){
e.preventDefault();
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();

$(".data-table tbody").append(""+name+""+email+"EditDelete");

$("input[name='name']").val('');
$("input[name='email']").val('');
});

$("body").on("click", ".btn-delete", function(){
$(this).parents("tr").remove();
});

$("body").on("click", ".btn-edit", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');

$(this).parents("tr").find("td:eq(0)").html('');
$(this).parents("tr").find("td:eq(1)").html('');

$(this).parents("tr").find("td:eq(2)").prepend("UpdateCancel")
$(this).hide();
});

$("body").on("click", ".btn-cancel", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');

$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);

$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-update").remove();
$(this).parents("tr").find(".btn-cancel").remove();
});

$("body").on("click", ".btn-update", function(){
var name = $(this).parents("tr").find("input[name='edit_name']").val();
var email = $(this).parents("tr").find("input[name='edit_email']").val();

$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);

$(this).parents("tr").attr('data-name', name);
$(this).parents("tr").attr('data-email', email);

$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-cancel").remove();
$(this).parents("tr").find(".btn-update").remove();
});
 
Share this answer
 
Comments
CHill60 4-Jul-22 5:44am    
Nothing to do with the original question and stop posting multiple solutions
<!DOCTYPE html>  
<html>  
<head>  
  <title> Use of JQuery to Add Edit Delete Table Row </title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  
</head>  
<body>  
      
<div class="container">  
  <h1> Use of JQuery to Add Edit Delete Table Row </h1>  
      
  <form>  
          
    <div class="form-group">  
      <label>Name:</label>  
      <input type="text" name="name" class="form-control" value="Smith" required="">  
    </div>  
      
    <div class="form-group">  
      <label>Email:</label>  
      <input type="text" name="email" class="form-control" value="smith@abc.com" required="">  
    </div>  
     
    <button type="submit" class="btn btn-success save-btn">Save</button>  
      
  </form>  
  <br/>  
  <table class="table table-bordered data-table">  
    <thead>  
      <th>Name</th>  
      <th>Email</th>  
      <th width="200px">Action</th>  
    </thead>  
    <tbody>  
      
    </tbody>  
  </table>  
     
</div>  
     
<script type="text/javascript">  
     
    $("form").submit(function(e){  
        e.preventDefault();  
        var name = $("input[name='name']").val();  
        var email = $("input[name='email']").val();  
       
        $(".data-table tbody").append("<tr data-name='"+name+"' data-email='"+email+"'><td>"+name+"</td><td>"+email+"</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");  
      
        $("input[name='name']").val('');  
        $("input[name='email']").val('');  
    });  
     
    $("body").on("click", ".btn-delete", function(){  
        $(this).parents("tr").remove();  
    });  
      
    $("body").on("click", ".btn-edit", function(){  
        var name = $(this).parents("tr").attr('data-name');  
        var email = $(this).parents("tr").attr('data-email');  
      
        $(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'">');  
        $(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'">');  
      
        $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")  
        $(this).hide();  
    });  
     
    $("body").on("click", ".btn-cancel", function(){  
        var name = $(this).parents("tr").attr('data-name');  
        var email = $(this).parents("tr").attr('data-email');  
      
        $(this).parents("tr").find("td:eq(0)").text(name);  
        $(this).parents("tr").find("td:eq(1)").text(email);  
     
        $(this).parents("tr").find(".btn-edit").show();  
        $(this).parents("tr").find(".btn-update").remove();  
        $(this).parents("tr").find(".btn-cancel").remove();  
    });  
     
    $("body").on("click", ".btn-update", function(){  
        var name = $(this).parents("tr").find("input[name='edit_name']").val();  
        var email = $(this).parents("tr").find("input[name='edit_email']").val();  
      
        $(this).parents("tr").find("td:eq(0)").text(name);  
        $(this).parents("tr").find("td:eq(1)").text(email);  
       
        $(this).parents("tr").attr('data-name', name);  
        $(this).parents("tr").attr('data-email', email);  
      
        $(this).parents("tr").find(".btn-edit").show();  
        $(this).parents("tr").find(".btn-cancel").remove();  
        $(this).parents("tr").find(".btn-update").remove();  
    });  
      
</script>  
       
</body>  
</html>  
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900