This gives me back the original value of the input not the edited one.
<input type='text' value='test'>
this.parentNode.getElementsByTagName('input')[0].value
The js event in on onchage
I have it like this right now and I am not getting the input of it...
var inputs=document.getElementById('wrap').getElementsByTagName('input');
for (var i = inputs.length - 1; i >= 0; i--) {
inputs[i].onchange=function(){
var x=this.parentNode.appendChild(document.createElement("a"));
x.innerHTML="upravit";
x.onclick=function(){
var hr = new XMLHttpRequest();
console.log(this.parentNode.getElementsByTagName('input')[0].value);
Even the console.log itself gives me back the default value instead of the new one...
var vars = "menu=1&name=";
hr.open("POST", "Ajax/UpdateCategory.php", true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function(){
if(hr.readyState==4&&hr.status==200){
var return_data = hr.responseText;
if(return_data!="ok"){
alert(return_data);
}
}
}
hr.send(vars);
}
}
};
Please try this demo to learn onchange handler: http://www.w3school.com.cn/tiy/t.asp?f=hdom_onchange
and compare with this demo: http://www.w3school.com.cn/tiy/t.asp?f=hdom_onkeyup
Then you will know that, just use onkeyup() instead will work.
=== edited content ===
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
window.onload = function () {
var inputs=document.getElementById('wrap').getElementsByTagName('input');
var x=document.createElement("a");
var data;
x.innerHTML="upravit";
x.onclick=function(){
alert(data);
}
for (var i = inputs.length - 1; i >= 0; i--) {
inputs[i].onchange=function(){
this.parentNode.appendChild(x);
data = this.value;
}
}
};
</script>
</head>
<body>
<div id="wrap">
<input type='text'>
<input type='text'>
<input type='text'>
</div>
</body>
</html>
Please run this html in your local environment, I think this meet your needs.
you can do like this
html
<input type='text' value='test' onchange="dostuff(this)" />
js
function dostuff(s) {
alert(s.value);
}
here is a fiddle
If this doesn't suit your case, please tell us how you are binding the js code in your question with the input in the html code.
<input type='text' value='test' onchange="dostuff(this.value)" />
function dostuff(value) {
alert(value);
}
Related
Below is my Html Doc and the JQuery does not do anything when the range input changes, any assistance is much appreciated as I am extremely new to web design. Even the alert doesn't work at the top so I am unsure as to what my problem is. My belief is somehow the script is never being called or it's a problem with it being an html doc but either way thank you.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var num=0;
var numOptions = new Array(100);
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
$(document).ready(function(){
$("#numQuestions").on('input',function(){
var numbQuestions = $("#numQuestions".text());
if(num>numbQuestions){
for(i=numbQuestions;i<=num;i++){
try{
$("#qRowNum'+i).remove();
}catch(err){
}
}
}else{
for ( i=num; i < numbQuestions; i++)
{
var row = '<div id="qRowNum'+ i '">
#the below function is not implemented in this version
<input type="text" placeholder="Question '+i'"> <input type="range" name="numOptions'+i'" min="0" max="5" placeholder="Number Of Options" onchange="CreateOptions(this);" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();> </div>';
$("#questionRows").append(row);
//New script test
}
}
num = numbQuestions;
});
});
<div id="questionRows">
</div>
<input type="submit" value="Start">
</form>
</body>
</html>
This is your problem:
var numbQuestions = $("#numQuestions".text());
Firstly I think you mean this:
var numbQuestions = $("#numQuestions").text();
But that is also not true because an input field has not text property. They have value So do this:
var numbQuestions = $("#numQuestions").val();
And this is another problem: $("#qRowNum'+i) When you start selector by double quotation, you need to end this also by double quotation. But it still is not a true jquery selector.
I think you need to more studies about jquery.
I am practicing the basics of AJAX.
When I click Submit nothing happens.
Here’s my code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FIRST AJAX!</title>
<script>
function alertMe(){
var field1 = document.getElementById("Field1").value;
var parser = "parse.php";
var values = "name="+filed1;
var xml = new XMLHttpRequest();
xml.open("POST", parser, true);
xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xml.onreadystatechange = function(){
if(xml.readyState == 4 && xml.status == 200){
document.getElementById('output').innerHTML = xml.responseText;
}
}
xml.send(values);
document.getElementById('output').innerHTML = " Loading ... ";
}
</script>
</head>
<body>
<input type="text" name="Field1" id="Field1"/>
<input type="submit" name="Fsend" onClick="alertMe();"/>
<p id="output"></p>
</body>
</html>
Thank you.
The problem is you are declaring a variable called field1, and then calling it as fiLEd1.
Try checking the console for errors, it's always useful
var values = "name="+filed1;
has a typo, should be...
var values = "name="+field1;
Also, input elements should be within a form and you probably want to use type="button" since you are not submitting the form. Finally, all standard attributes should be in lowercase, should be onclick, not onClick.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>FIRST AJAX!</title> <script>
function alertMe(){
var field1 = document.getElementById("Field1").value;
var parser = "parse.php";
var values = "name="+field1;
var xml = new XMLHttpRequest();
xml.open("POST", parser, true);
xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xml.onreadystatechange = function(){
if ( xml.readyState == 4 && xml.status == 200){
document.getElementById('output').innerHTML = xml.responseText;
}
}
xml.send(values);
document.getElementById('output').innerHTML = " Loading ... ";
}
</script>
</head>
<body><form>
<input type="text" name="Field1" id="Field1"/>
<input type="button" value="Submit" name="Fsend" onclick="alertMe();"/>
</form> <p id="output"></p>
</body> </html>
I am working on javascript.
Consider two textboxes tb1 and tb2 respectively
The value present in tb1 should be copied in tb2 based on a condition. If the condition is true nothing needs to be copied. If the condition is false the value in tb1 should also be initialised to tb2. Is it possible..
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<span>tb1:</span>
<input id="tb1" type="text" value="TextBox Value 1"/>
</div>
<div>
<span>tb2:</span>
<input id="tb2" type="text" value="TextBox Value 2"/>
</div>
<input type="button" onclick="exchange()" value="Exchange">
<script type="text/javascript">
function exchange(){
var tb1 = document.getElementById('tb1');
var tb2 = document.getElementById('tb2');
var condition = function(){
return true;
};
if(condition()){
var buf = tb1.value;
tb1.value = tb2.value;
tb2.value = buf;
}
}
</script>
</body>
</html>
Here's a function that can do what you need:
function compareAndCopy() {
var tb1 = document.getElementById("tb1");
var tb2 = document.getElementById("tb2");
if (tb1.value == "hey") {
tb2.value = tb1.value;
} else {
alert("No match");
}
}
//Add a handler
document.getElementById("tb1").onblur = compareAndCopy;
It is currently checking if tb1 equals hey on blur.
Working demo: http://jsfiddle.net/4L5pE/
yes, this is possible. You need to define when you want it to happen. onkeypress, or onblur of first text box you can call a function that validates your condition and then copies the values.
tb1.onblur(function(){ if(condition) tb2.value = tb1.value }
the code above will not work, its just a pseudo.
Can anyone please tell me how I can use the replace method to replace a character if it occures in more than one textbox without having to write separate function for each textbox.
The code below is the basic way to use the replace method but it only allows for one textbox.
I'm sure I need a loop in there but I'm not sure how to use that without affecting the replace method.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function stringReplace(form) {
var replaceStr = form.textfield1.value
var pattern = /\'/g;
form.textfield1.value = replaceStr.replace(pattern, "''");
}
</script>
</head>
<body>
<form name="form1" method="post" action="JStest_redirect.asp">
<p>fname:
<input type="text" name="textfield1" size="20">
</p>
<p>lname:
<input type="text" name="textfield2" size="20">
</p>
<p>
<input onclick="return stringReplace(form)" type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>
You can do this:
function stringReplace(form) {
var $inputs = $(form).find('input:text');
var pattern = /\'/g;
$inputs.each(function () {
this.value = this.value.replace(pattern, "''");
});
return false; // Prevent the form from being submitted
}
This would find all the input type text within the form and replace their values.
If you wish to do it without jquery, you can use the getElementsByTagName() method.
function stringReplace(form) {
var pattern = /\'/g;
var inputs = form.getElementsByTagName("input");
var input;
for (var i = 0; i < inputs.length; i++) {
input = inputs[i];
if (input.type = 'text') {
var replaceStr = input.value;
input.value = replaceStr.replace(pattern, "''");
}
}
return false;
}
You seem to want
function stringReplace(form) {
$('input[type=text]').val(function(_, v) {
return v.replace(/\'/g, "''");
});
return false;
}
I added a return false at the end to prevent the form to be submitted on click. You probably want to have a separate button in your case.
I believe that fisrt you have to take all the values
function GetValue(){
var Contain = "";
$("#form1 :text").each(function(){
//add replace code here
});
}
You can add onchange function to all of you text input
function stringReplace(textField) {
var replaceStr = this.value
var pattern = /\'/g;
this.value = replaceStr.replace(pattern, "''");
}
and than you add
<input type="text" name="textfield1" size="20" onchange="stringReplace(this);">
I have the following code:
<script type="text/javascript">
for(var i=1; i<=3; i++) {
document.getElementById("items_"+i).checked=true;
}
</script>
With the following HTML
<input type="checkbox" id="items_1" name="myitems" value="1" />
<input type="checkbox" id="items_2" name="myitems" value="2" />
<input type="checkbox" id="items_3" name="myitems" value="3" />
I get an error saying:
document.getElementById("items_" + i) is null.
How do I fix this?
The first index in your for loop will be zero.
Do you have an element with the id items_0 ?
That's likely what's causing your problem. Set the initial value of i to 1
Secondly, you want to make sure that your Javascript code executes after the DOM has loaded.
I recomend you look into using jQuery as this makes it so much simpler to do these kinds of things.
Well your code looks like it's first iteration is pointed to i = 0 so it's trying to find an input tag with the id of 'items_0'.
Here is a JSBin that shows the code working correctly:
http://jsbin.com/amonel/edit
var VanillaRunOnDomReady = function() {
// code to execute after DOM has loaded
for (var i = 1; i <= 3; i++) {
document.getElementById("items_" + i).checked = true;
}
}
var alreadyrunflag = 0;
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
}
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag = document.getElementById("contentloadtag");
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
I ended up using:
$('#items_'+i).attr("checked", true);