I made a program that asks the user how many input bars he wants to display and then the user has to type in some values into the input bars and click verify but the issue i am having is that whenever i click on verify, nothing happens. I get the error:
Uncaught TypeError: Cannot read property 'value' of null
whenever i click on verify.
Here are my codes:
<html>
<head>
<script language="javascript">
var x = [];
var choose;
var i;
var xar=[];
choose=parseFloat(prompt("how many inputs u want to display"));
for(i=0;i<choose;i++)
x[i]=document.getElementById("cont"+i).style.visibility="visible";
function hola() {
for(i=0;i<choose;i++)
document.getElementById("cont"+i).style.visibility="visible";
}
function verify(){
for(i=0;i<choose;i++){
xar[i]=document.getElementById("userNumber"+i).value;
}
for(i=0;i<choose;i++)
if(xar[i]==i)
alert("good");
else
alert("wrong");
}
</script>
</head>
<body>
<input type="button" onclick="hola()" value="hidefield0" id="boton0">
<div id="cont0" style="visibility: hidden;">
<input type="text" id="userNumber" class="something">
</div>
<input type="button" onclick="hola()" value="hidefield2" id="boton1">
<div id="cont1" style="visibility: hidden;" class="something">
<input type="text" id="username2">
</div>
<input type="button" onclick="hola()" value="hidefield1" id="boton2">
<div id="cont2" style="visibility: hidden;" class="something">
<input type="text" id="username3">
</div>
<input type="button" onclick="hola()" value="hidefield3" id="boton3">
<div id="cont3" style="visibility: hidden;" class="something">
<input type="text" id="username4">
</div>
<input type="button" onclick="hola()" value="hidefield4" id="boton4">
<div id="cont4" style="visibility: hidden;" class="something">
<input type="text" id="username5">
</div>
<input type="button" onclick="hola()" value="hidefield5" id="boton5">
<div id="cont5" style="visibility: hidden;" class="something">
<input type="text" id="username6">
</div>
<input type="button" id="verifyBtn" value="verify" onclick="verify()">
</body>
<html>
The script is failing when it reaches this portion:
document.getElementById("userNumber"+i)
This indicates that there is no element called userNumber + i (i.e. "userNumber3") for you to then call the .value property of (Cannot read property 'value' of null) .
And that's because you have elements with ids of "username2, username3, username4, etc." and "userNumber", but not "userNumber" plus a number.
var x = [];
var choose;
var i;
var xar=[];
choose=parseFloat(prompt("how many inputs u want to display"));
for(i=0;i<choose;i++)
x[i]=document.getElementById("cont"+i).style.visibility="visible";
function hola() {
for(i=0;i<choose;i++)
document.getElementById("cont"+i).style.visibility="visible";
}
function verify(){
for(i=0;i<choose;i++){
xar[i]=document.getElementById("userNumber"+i).value;
}
for(i=0;i<choose;i++)
if(xar[i]==i)
alert("good");
else
alert("wrong");
}
<input type="button" onclick="hola()" value="hidefield0" id="boton0">
<div id="cont0" style="visibility: hidden;">
<input type="text" id="userNumber" class="something">
</div>
<input type="button" onclick="hola()" value="hidefield2" id="boton1">
<div id="cont1" style="visibility: hidden;" class="something">
<input type="text" id="userNumber2">
</div>
<input type="button" onclick="hola()" value="hidefield1" id="boton2">
<div id="cont2" style="visibility: hidden;" class="something">
<input type="text" id="userNumber3">
</div>
<input type="button" onclick="hola()" value="hidefield3" id="boton3">
<div id="cont3" style="visibility: hidden;" class="something">
<input type="text" id="userNumber4">
</div>
<input type="button" onclick="hola()" value="hidefield4" id="boton4">
<div id="cont4" style="visibility: hidden;" class="something">
<input type="text" id="userNumber5">
</div>
<input type="button" onclick="hola()" value="hidefield5" id="boton5">
<div id="cont5" style="visibility: hidden;" class="something">
<input type="text" id="userNumber6">
</div>
<input type="button" id="verifyBtn" value="verify" onclick="verify()">
Related
When the form is SUBMITted, the working DIV named "second" will disappear after 5 seconds and the DIV named "three" will appear.
In addition, these processes will be one time and will not repeat itself.
Can you help me?
<form name="kisi" method="post" action="gonder" id="kisi" autocomplete="off" onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-row">
<div id="timerDiv" class="has-timer" style="">
<span>Kalan Süre: </span> <span class="has-countdown__time" id="time"></span>
</div><br><br>
<input type="tel" class="f-input" name="kisilik" id="kisilik" pattern=".{0}|.{5,7}" autocomplete="off" maxlength="7" required oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" onfocus="this.select();">
</div>
<button style="background:#076B79; color:white" class="btn" type="submit">ONAYLA</button>
</form>
<div id="second" class="2" style="display:none">
<center><img class="smslogo" src="images/rolling.gif" /></center><br>
<center>
<p class="a">Lütfen Bekleyiniz. <br> Kisilik Doğrulaması Yapılıyor...</p>
</center><br><br>
</div>
<div id="three" class="3" style="display:none">
<center>
<p class="a">THREE TEST DIV</p>
</center><br><br>
</div>
<script>
$(document).ready(function() {
$('#sms').submit(function(){
setTimeout(function () {
$("#second").hide();
}, 3000);
setTimeout(function () {
$("#three").show();
}, 3000);
});
});
I have some categories:
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<a><?php echo $category[0]['generic_name'];?></a>
</div>
and I want on click to insert value of this <a> to this form
<form method="post" action="/search/index" class="input-group" style="width: 45%; margin-left: 646px">
<input type="text" name="search" id="search" class="form-control" minlength=3 placeholder="Generic" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
so that it dynamically starts search of results of this string. I can't send this value to url because it is not latin characters
html
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<p class="clickMe">click me: text to send after click</p>
</div>
<form method="post" class="input-group">
<input type="text" name="search" id="search" class="form-control" minlength=3
placeholder="Generic" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
And javascript in jquery
$('.clickMe').on('click', function(){
var value = $(this).text()
$('input#search').val(value)
})
https://jsfiddle.net/ora0j4uu/
.submit() if you want submit it as well https://www.w3schools.com/jsref/met_form_submit.asp
edit:
jquery for submit
$('.clickMe').on('click', function(){
var value = $(this).text()
console.log(value)
$('input').val(value)
$('.input-group').submit()
})
I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
Below is my html code for the form
<form id="taxi_distance_input" >
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
And in the bottom of the page I give the
<script src="/js/form_input_parameter.js"></script>
Inside the form_input_parameter.js i have written the script
$(document).ready(function(){
$('#myButton').click(function(){
var text = $("#usr").val();
alert(text+"success");
});
But it is not working .Any help is apprecited
You've forgotten the }); at the end of your JS code
The input tag should end with />
$(document).ready(function() {
$('#myButton').click(function() {
var text = $("#usr").val();
alert(text + " success");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr" />
<input type="button" class="btn btn-success" value="Submit" id="myButton" />
I have the following code, which shows and hides elements according to buttons being clicked:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
JQUERY:
$(".editButton").click(function () {
$(".renameButton,.cancelRenameButton").show();
$(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(".renameButton,.cancelRenameButton").hide();
$(".editButton").show();
});
The problem I'm getting is I can't get the buttons to work individually. I've tried using 'this' without success
You can simply use siblings (less function calls!) in combination with this to traverse the DOM and then just toggle them away (or keep hide and show if you prefer).
JSFiddle here
$(".editButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
$(".cancelRenameButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
Try something like this:
$(".editButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").show();
$(this).parents(".largeImage").find(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").hide();
$(this).parents(".largeImage").find(".editButton").show();
});
If I understood properly what u want to do. This can be a possible solution:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form1">
<input type="button" value="Click to Rename"/>
</div>
<div class="cancelRenameButton" name="form1">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form1">
<input type="submit" value="Rename"/>
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form2">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton" name="form2">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form2">
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
jQuery:
$(".editButton, .cancelRenameButton").click(function () {
Toggle($(this));
});
function Toggle(obj){
var name = obj.attr("name");
$(".renameButton[name="+name+"],.cancelRenameButton[name="+name+"]").toggle();
$(".editButton[name="+name+"]").toggle();
}
Check this link jsfiddle to see a how it works.
A better solution would be, I think, remove the divs and deal only with buttons.
Hope it useful!