How to convert this javascript code to jquery

Question

1.00/5 (3 votes)

See more:

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 4-Jun-18 5:40am

Member 13858049

Updated 3-Jul-22 23:28pm

Patrice T

v7

Add a Solution

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.

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Mohibur Rashid · Answer 1 · 2018-06-04T14:15:00

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!");
}

Patrice T · Answer 2 · 2018-06-05T09:12:00

Solution 3

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[^]

Posted 5-Jun-18 9:12am

Patrice T

Member 15695858 · Answer 3 · 2022-07-03T22:21:00

$("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();
});

Member 15695858 · Answer 4 · 2022-07-03T23:28:00

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

How to convert this javascript code to jquery

4 solutions

Solution 1

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0