I want to make increase/decrease button work when I click the button. I put the section in JavaScript(using as part of a function to insert into HTML file), but it doesn't work. The code in JavaScript is as below:
string ="<img class='minubtn' src='images/delete.png' onclick='javascript:
document.getElementById('countNo1').value--;' />"+
"<input type='text' id='countNo1' class='txtCount' value='0' placeholder='0'/>"+
"<img class='addbtn' src='images/add.png' onclick='javascript:
document.getElementById('countNo1').value++;'/>"
I find the reason why it's not working. In nested string, I need to use \' \' instead of '' to quote the id. So the code should like this:
string ="<img class='minubtn' src='images/delete.png' onclick='javascript:
document.getElementById(\'countNo1\').value--;' />"+
"<input type='text' id='countNo1' class='txtCount' value='0' placeholder='0'/>"+
"<img class='addbtn' src='images/add.png' onclick='javascript:
document.getElementById(\'countNo1\').value++;'/>"
Here:
This might help you
HTML:
<input type="text" name="count" value="0" id="count">
<input type="button" value="+1" onclick="operate('add')">
<input type="button" value="-1" onclick="operate('dec')">
Script:
<script>
function operate(val){
if(val == "add"){
var val = document.getElementById('count').value;
val++;
document.getElementById('count').value = val;
} else{
var val = document.getElementById('count').value;
val--;
document.getElementById('count').value = val;
}
}
</script>
Related
I have a button that calls a script method named add_Fields(). I used .innerHTML to add fields in a form.
The problem is when i put the attribute action with a value of {{route('stock.store')}} the whole script code doesn't work.
Can anybody help me with this?
var i = 0;
var d = document.getElementById("content");
d.innerHTML += "<div class='form-group row'>"+
"<span class='col-md-2'>UNIT:<input form='form"+i+"' id='unit' type='text' name='unit' class='form-control' required></span>"+
"<span class='col-md-2'>QTY:<input form='form"+i+"' id='quantity' type='number' name='quantity' class='form-control' required></span>"+
"<span class='col-md-4'>UNIT COST:<input form='form"+i+"' id='unit_cost' type='number' name='unit_cost' class='form-control' required></span>"+
"<span class='col-md-4'>AMOUNT:<input form='form"+i+"' id='unit_cost' type='number' name='unit_cost' class='form-control' required></span>"+
"</div>"+
"<form id='form"+i+"' action='\"{{route('stock.store')}}\"' method='post'>#csrf</form>"+
"";
replace below code for form tag and make sure the route is defined in routes\web.php file
"<form id='form"+i+"' action='{{route('stock.store')}}' method='post'>#csrf</form>"+
I'm trying to make it so that when I hover on an image, to have the title appear with slow fade in when I mouseenter the image. So far the title appears when I mouseenter but it appears instantly without any fade in. The fadeIn() method in my code does not appear to do anything. Am I making a mistake here?
HTML
echo "<div class='imageContainer'>"
.'<div class="stickyImageContainer"><h1 class="imageTitle">'.$row["name"].'</h1><img class="uploadedImg" src="/uploads/'.$row["path"] .'" alt="Random image" /> ';
if (isset($_SESSION['id'])) {
if ($hasVoted < 1) {
echo "<div class='upvoteDownvoteRatingContainer'>
<form class='upvoteImage' method='POST' action=''>
<input type='hidden' name='action' value='upvote'>
<input type='hidden' name='id' value='".$row['id']."'>
<input type='hidden' name='userId' value='".$currentUser."'>
<input type='hidden' name='voteType' value='voteImage'>
<button class='upvoteImageButton' type='submit' name='upvoteImage'><img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'></button>
</form>";
echo "<div class='ratingNumber'>";
if ($row['upvotes'] - $row['downvotes'] <= 0) {
echo "<p>0</p>";
} else {
echo $row['upvotes'] - $row['downvotes'];
}
echo "</div>";
echo "<form class='downvoteImage' method='POST' action=''>
<input type='hidden' name='action' value='downvote'>
<input type='hidden' name='id' value='".$row['id']."'>
<input type='hidden' name='userId' value='".$currentUser."'>
<input type='hidden' name='voteType' value='voteImage'>
<button class='downvoteImageButton' type='submit' name='downvoteImage'><img class='arrowDown' src='../images/Social Media/arrowDown.png' alt='submit'></button>
</form></div>";
JavaScript
$('.imageContainer').on('mouseenter', '.uploadedImg', function(){
var image = $(this);
var imageParent = image.closest('.stickyImageContainer');
imageParent.append('<div class="blackDiv"></div>');
imageParent.find('.imageTitle').css('visibility', 'visible').fadeIn();
}).on('mouseleave', '.blackDiv', function() {
$(this).remove();
$('.imageTitle').css('visibility', 'hidden');
});
One mistake is pretty obvious that you have tried to use default behavior of the fadeIn() function.
You cant try parameters to slow it down. e.g.:
fadeIn(2000,"swing");
OR
fadeIn("slow","swing");
could be options which can help you. The modified lines in your code will be:
imageParent.find('.imageTitle').fadeIn("slow","swing"); //this to show it
and
$('.imageTitle').fadeOut("slow"); //This will be used to hide
I'm currently setting up a page with PHP which has three numeric input fields on it. It looks as follows:
echo "Adult Tickets: <input type=\"number\" name=\"adulttickets[]\" value='0' id='adult' min='0' max='10'><br />";
echo "Child Tickets: <input type=\"number\" name=\"childtickets[]\" value='0' id='child' min='0' max='10'><br />";
echo "Student Tickets: <input type=\"number\" name=\"studenttickets[]\" id='student' value='0' min='0' max='10'><br />";
echo <<<_END
<input type="submit" onsubmit = 'return validate()' value="Submit booking details">
I want to use javascript to ensure that the form cannot be submitted if none of the three input types have been altered from their default value of zero. In reflection of this I set up the following JS script:
<script>
function validate(){
var adult = document.getElementById('adult').value;
var child = document.getElementById('child').value;
var student = document.getElementById('student').value;
if(adult==0 && child ==0 && student==0){
alert("yes.");
return false;
}
return true;
}
</script>
Nothing happens when I run this however. Am I going about this the right way? Is there some better way to achieve the outcome I just described?
I suppose you have this code below, just change onsubmit to onclick
<?php
echo "Adult Tickets: <input type=\"number\" name=\"adulttickets[]\" value='0' id='adult' min='0' max='10'><br />";
echo "Child Tickets: <input type=\"number\" name=\"childtickets[]\" value='0' id='child' min='0' max='10'><br />";
echo "Student Tickets: <input type=\"number\" name=\"studenttickets[]\" id='student' value='0' min='0' max='10'><br />";
?>
<input type="submit" onclick = 'return validate()' value="Submit booking details">
<script>
function validate(){
var adult = document.getElementById('adult').value;
var child = document.getElementById('child').value;
var student = document.getElementById('student').value;
if(adult==0 && child ==0 && student==0){
alert("yes.");
return false;
}
return true;
}
</script>
you need parse the input values into numbers (currently they are strings even though the input type is number - the value will be a string) before comparing them;
var adult = parseInt(document.getElementById('adult').value);
var child = parseInt(document.getElementById('child').value);
var student = parseInt(document.getElementById('student').value);
Today I need help about How can I do a loop with html code and put the (i) value on the input name:
<label>
<input type='radio' class='parts' value='5' /> 5
</label>
<script>
$(function(){
jQuery('.parts').on('click', function(){
var html = '';
for(i=1; i <= $(this).val(); i++ ){
html += "<input type='text' name='cars[i]' /> car number i";
}
$('#result').html(html);
});
});
</script>
<div id='result'></div>
If you dont undertand pls ask.
You can use string concatenation:
html += "<input type='text' name='cars[" + i + "]' /> car number " + i;
$(function(){
jQuery('.parts').on('click', function(){
var html = '';
for(i=1; i <= $(this).val(); i++ ){
html += "<input type='text' name='cars[" + i + "]' /> car number " + i + "<br>";
}
$('#result').html(html);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type='radio' class='parts' value='5' /> 5
</label>
<div id='result'></div>
I'm having trouble getting my javascript to add a variable to getElementById. What I'm doing is allowing the users to have 10 authors per post. The script shows the authors already entered in the system and now I'm trying to allow them to add more input fields only to the point that 10 fields show up. Here is the code I have so far:
$y=1;
//GET EXISTING AUTHORS FOR POST
while ($getauthorsrow=$getauthorssql->fetch()) {
$showauthor = $getauthorsrow['author'];
$authorid = $getauthorsrow['ID'];
echo "<input type='text' value='$showauthor' name='authorname[]'>
<input type='hidden' value='$authorid' name='authorid[]'><br><br>";
$y++;
}
$newy=$y-1;
?>
//SCRIPT TO ADD NEW FIELD ONLY TO THE POINT OF 10
<script language="javascript">
fields = <?php echo $newy; ?>;
function addInput<?php echo $i; ?>() {
if (fields != 10) {
//HERE I'M TELLING IT TO GET text + $i (which is post number) + fields variable
//So if it's the first post and the new field divs start a 5
//Then it should getElementByid('text05') and continue on.
document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}
}
</script>
//HERE I'M ADDING THE NEW DIVS FOR TEXT FIELDS AND STARTING
//THEM AT WHATEVER NUMBER POST $i IT IS AND WHATEVER THE $w is.
//SO IN THE EXAMPLE IN THE JAVASCRIPT IT'D SAY id='text05'
//THIS WORKS JUST FINE
<?php
$w=$newy;
while ($w<=10) {
echo "<div id='text".$i.$w."'></div>";
$w++;;
}
//ECHO THE ADD AUTHOR BUTTON
echo "
<input type='button' onclick='addInput$i()' name='add$i' value='Add Author'><br>
<input type='hidden' name='count' value='$newy'>
<input type='hidden' name='id' value='$fileid'>
<input type='submit'>
</form>
";
?>
$i is the post number starting from 0. The php to make the divs works fine. I'm just getting null for the getElementById in the javascript. What am I getting wrong here?
HTML Output Example:
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
<input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
<input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
<input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
<input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
<input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
function addInput0() {
if (fields != 10) {
var currentText = 'text0' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform0.add0.disabled=true;
}
}
</script>
<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">
</form>
Try assigning that concatenated string to a JS variable first, then calling the function:
if (fields != 10) {
var currentText = 'text<?php echo $i; ?>' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}
I need to add the $i to the fields variable in the javascript. With multiple files it was doing multiples of the same variable...i works.
Hi I have modified your code for html and JavaScript.
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
<input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
<input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
<input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
<input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
<input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
function addInput0() {
if (fields != 10) {
var currentText = 'text0' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
var myout = "Only 10 authors allowed.";
document.getElementById("stat").innerHTML = myout;
}
}
</script>
<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div><div id="stat"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">
Check it and let me know, if it is solved.