Click here to Skip to main content
14,177,166 members
Rate this:
 
Please Sign up or sign in to vote.
I need to convert this javaskript code to jquery, I would be very grateful for help:


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:
<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 5-Jun-18 9:10am
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.
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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.

#$("#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[^]

if(allowedValues.indexOf($("#zeInput").val()) != -1) {
 $("#msg").html("Life is beautiful!");
}
   
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");
    }
Rate this: bad
 
good
Please Sign up or sign in to vote.

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

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web03 | 2.8.190526.1 | Last Updated 5 Jun 2018
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100