Skip to content

How to warn user if the users type anything different from the assigned value or text

I want to alert or warn user if he types anything else then ongoing or completed on this text box

`<input id="status" placeholder="Status(ongoing/completed)" type="text" tabindex="4" required>`

I tried throwing the value from the option list to firebase but getting error like

at rs (https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:136584)
    at https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:137324
    at Fe (https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:22965)
    at rs (https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:136991)
    at ns (https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:136487)
    at ua (https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:157436)
    at Su.set (https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:180849)
    at https://mangasuggestions.000webhostapp.com/js/submit.js:37:49
    at o (https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:176025)
    at i (https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js:1:160643) 
  

Here the option and input list.

<input  id="statu" type="text" list="status"  placeholder="Status(ongoing/completed)" name="mystatus" required>
<datalist id="status">
  <option value="Ongoing">
  <option value="Completed">
</datalist>

Any help would be appreciated thank you!

Answer

This is not an answer, but it is too long for a comment.

From the error you shared, it appears the form data is uploaded to Firebase using script submit.js And this script serializes the form fields. And one of those fields is called “status”, which matches the markup that you shared. However, if you look at the code below, status does not use the value property like all the others. So I’m guessing the script needs to be modified to match your form, i.e., var status=document.getElementById("status").value;

And yet this is a completely different problem from the one asked in the question. As others have suggested, use a SELECT control to limit user choice. Name it “status” and it should work with your upload script.

As I said, this is not an answer, but it is enough to point you in the right direction.

var imgname=document.getElementById("img").value;
var mn=document.getElementById("mn").value;
var mg=document.getElementById("mg").value;
var chap=document.getElementById("chap").value;
var status=document.getElementById("status");    // <--- Possible Problem Here

var des=document.getElementById("des").value;
      firebase.database().ref ("Manga/" +count).set({
      manga:mn, 
      genre :mg, 
      chapters:chap,
      status:status, 
      description:des, 
      count:count
     });