javascript undefined input value despite of writing in it - javascript

I have a strange problem: I am getting a undefined alert window by running this code. I looked up all the entrys here but I couldn't find a solution.
I've checked, there is no identical id except this one
running the php file the result of var_dump($user_id) shows the right value
this is why I don't understand why the value in javascript is undefined all the time...
HTML:
<form action="?atn=surveyCode" method="post" class="form mg_top">
<label id="entersID" for="usersID">Enter your prolific ID:</label>
<input id="usersID" value="" type='text' class="form-control talign_center input" name="usersID">
<button id="survey" class="btn btn-primary form-control">Go to questions</button>
</form>
JavaScript: every alert is returning "undefined". I never get in the else part. This is really strange. I've many parts like this in my code and they are working perfectly.
$("#survey").click(function(e){
var prolific = $("usersID").val();
alert(prolific);
if(prolific==undefined){
alert(prolific);
$("#entersID").addClass("error-msg");
$("#entersID").parent().addClass("has-error");
e.preventDefault();
}
else{
alert(prolific);
window.open("http://www.w3schools.com");
}
});
PHP:
private function surveyCode(){
$userID = $_POST["usersID"];
var_dump($userID); //shows a value
}
Please help me, maybe this is a silly bug but I can't find it....

Change the line into
var prolific = $("#usersID").val();

You have to add the "#" sign before the id selector like below :
var prolific = $("#usersID").val();

Related

JavaScript function() is not a function

I have a strange error Or I'm being dumb and when I search for my error I don't get the answer I need.
I am trying to have some javascript run if a certain key "/" is pressed in a text box.
Here is the Code:
function ClockIn(){
var kb_press = event.keyCode;
if(kb_press == 47)
{
alert("you are clocking in");
if(document.ClockIn.status.value === "IN"){
alert("You Cant Clock in wile you are already Clocked in\n Please try again!")
document.ClockIn.tx_Barcode.value, document.ClockIn.status.value, document.ClockIn.name.value = "";
}
}
}
<form method="POST" name="ClockIn">
<lable>Type your BarCode <input type="text" name="tx_Barcode" id="tx_Barcode" class="tx_Barcode" onkeypress="ClockIn()" ></lable><br>
<lable>Is your Name? <input type="text" name="name"></lable><br>
<lable>You are currently Signed <input type="text" name="status"></lable><br>
</form>
My result is: ClockIn is not a function
The problem here is you've named your "ClockIn" form, so due to age-old quirks in how HTML interacts with JavaScript, the ClockIn form overwrites your global ClockIn function.
Maybe rename the form "ClockInForm"? Better yet, though, you might want to use document.getElementById("...") to refer to elements.

Nodejs + html evt.target value is undefined

Okay so here's my html code
document.getElementById('comment-form').addEventListener('submit', async (evt) => {
evt.preventDefault();
const userID = evt.target.userid.value;
const comment = evt.target.comment.value;
console.log(userID, comment);
if(!userID) return alert('Input User ID');
if(!comment) return alert('Input Comment');
})
<div>
<form id="comment-form">
<fieldset>
<legend>Comment</legend>
<div><input id="userid" type="text" placeholder="User ID"></div>
<div><input id="comment" type="text" placeholder="Comment"></div>
<button type="submit">Submit</button>
</fieldset>
</form>
</div>
and the console.log result is
undefined (Whatever comment I input)
And so my question is
why????? why I am getting comment's value while not getting userid's value? I thought for 2 hours still don't know why
If so, how can this not trigger my return alert? So for js undefined is not null? If so isn't that alert code don't work at all?
Here is what I've tried
Changing input id's value to something else.
Changing target to currentTarget
changing evt.target.userid to evt.target.getAttribute()
Edited - code snippet is added, and in the snippet it works. So it must be some kind of issue of callback or timing of js?? how can it be fixed??
It was timing issue at all. Use await.

php cannot get value from html

I have questions that why my html file cannot connect with php file.
But I am sure that after I click the submit button, value of <input type="hidden" id="t1_response" name="t1_response" value=""> can be given.
However, url doesn't change to php form(like tocsv.php?t1_response=...).
And php gives me an notice :
Notice: Undefined index: t1_response in C:\xampp\htdocs\colors\tocsv.php on line 2
How can I fix it?
<script>
...
function pressSubmit() {
$('#startTrial').hide();
for (var i = 1; i <=3; i++) {
rt = rt + parseFloat(document.getElementById("t"+i+"_rt").value);
};
if (document.getElementById("t1_response").value === "diff") {acc=acc+1};
if (document.getElementById("t2_response").value === "diff") {acc=acc+1};
if (document.getElementById("t3_response").value === "same") {acc=acc+1};
document.write("<div>The average react time: " + rt/3 +" ms</div>");
document.write("<div>Acc Rate:" + acc/3*100+"%</div>");
}
</script>
<style>
...
</style>
<!DOCTYPE html>
<html>
<body>
<h3>Remember the colors</h3>
Press 's' if the two displays are the same. Press 'd' if a color changed (different).<br>
<form action="tocsv.php" method="get">
<input type="hidden" id="t1_response" name="t1_response" value="">
<input type="hidden" id="t1_rt" name="t1_rt" value="">
<input type="submit" id="submitButton" name="submitButton" onclick="javascript:pressSubmit()">
</form>
</body>
</html>
pressSubmit() contains calculating average number and document.write() to display the value to user.
tocsv.php
<?php
echo $_GET["t1_response"];
?>
Error code is clear: you have to define the var t1_response in your php file.
I bet you write:
t1_response = $_POST['t1_response ']
but you need:
$t1_response = $_POST['t1_response ']
The html file you post here is ok.
I have solved the problems.
Thanks everyone's help.
Here, in pressSubmit(), I wrote doucument.write(...), which make the page to be overwritten. Thus, it came out to be unable to get the value and I have no idea why so.
Thus, I use alert to avoid to overwrite the page. And everything works.
Thanks everyone's help again!
.

object HTMLInputElement error while entering a integer value to label in javascript

script code
intext = document.getElementById("intext");
totalin = document.getElementById("totalin");
function myFunction()
{
var x = document.getElementById("totalin");
x.innerHTML = intext.toString();
}
in the above code am getting object HTMLInputElement in the label with "totalin" id and textbox of number type with id = intext
i am new to javascript and i saw many other answers on similar problems but either cudn't understand the answers or they didn't worked .
thanks in advance for help.
part of Html code is as follows if required
<label for="text">input the income in numericals</label>
<input type="number" name="text" id="intext">
Submit
<label id="totalin" for="totalin">Label:</label>
i would really appreciate any help i am really in need of solution.
You need to get the value from the element:
x.innerHTML = intext.value;
You're also missing a quote close:
<input type="number" name="text id="intext">
^ RIGHT THERE

jQuery - How to write text values to a hidden field for later use?

I am using the latest and greatest jQuery.
I have a form with three text fields and three hidden fields. When you type in a text field, the value will be passed into the respective hidden field, which will later be accessed by other means.
FirstName value should be passed to FirstNameTemp
LastName value should be passed to LastNameTemp
Pseudonym value should be passed to PseudonymTemp
The following code is not working for me, though I swear it was working yesterday. I am using FireFox and Firebug. I can watch the value of FirstNameTemp change, which seems to work fine in the code, but nothing else works property.
Is there anything wrong with this? Am I missing something obvious?
<input type='hidden' value="" id="FirstNameTemp">
<input type='hidden' value="" id="LastNameTemp">
<input type='hidden' value="" id="PseudonymTemp">
<input type='text' value="" class="Search" id="FirstName"><br>
<input type='text' value="" class="Search" id="LastName"><br>
<input type='text' value="" class="Search" id="Pseudonym"><br>
<script type="text/javascript">
$(document).ready(function() {
$(".Search").keyup(function() {
var FirstName = $("#FirstName").val();
var LastName = $("#LastName").val();
var Pseudonym = $("#Pseudonym").val();
// COPY ENTITIES TO TEMP ENTITIES
$("#FirstNameTemp").val(FirstName);
$("#LastNameTemp").val(LastName);
$("#PseudonymTemp").val(Pseudonym);
});
});
EDIT
I opened and closed my browser and rebooted my machine. Nothing worked. So, I downloaded Firefox and FireBug and reinstalled. It worked just fine.
Thanks to all of you for the help and good ideas. You guys ROCK!!!
Why not do it like this:
$(".Search").keyup(function() {
$('#'+this.id+'Temp').val($(this).val());
});
Fiddle: http://jsfiddle.net/each/mtFt6/
try this..
$(document).ready(function() {
$(".Search").keyup(function() {
var targetId = "#" + $(this).attr("id") + "Temp";
$(targetId).val($(this).val());
});
});

Categories

Resources