I need some help about this code
I have some code in blade view
#foreach($cart as $ct)
<button type="button" id="edit{{$ct->id}}" class="btn-btn-delete">
<i class="mr-1 fas fa-edit"></i>Edit
</button>
//when I {{$ct->id}} at this point, it return id of current product
<div class="form-popup" id="myForm{{$ct->id}}">
//however, when I {{$ct->id}} at this point, it return id of the last product
<form action="{{route('cart.update',$ct->id)}}" class="form-container" method="post">
#csrf
#method('patch')
<h1>Edit information</h1>
<input type="text" name="name" value="{{$ct->name}}">
<button type="submit" class="btn">change</button>
<button type="button" class="btn cancel" id="close{{$ct->id}}">Close</button>
</form>
</div>
<script>
var ID = {{$ct->id}};
var code = 'edit'+ID;
var end = 'close'+ID;
var form = 'myForm'+ID;
document.getElementById(code).addEventListener("click",function(){
document.getElementById(form).style.display = "block";
});
document.getElementById(end).addEventListener("click",function(){
document.getElementById(form).style.display = "none";
});
</script>
#endforeach
when I run my code and click on Edit button the expected value in input field of each row must be different. However, it all gets the value of the last column in the database.
How I can fix it?
Following is approach using addEventListener() and classes to target elements as well as data attributes (like data-target="myForm1") for element specific data to use inside an event handler.
It is currently working for the "Edit" and "Cancel" buttons which have the same class popup-toggle along with their other existing classes.
You can use this approach as a template for your other elements/actions
// in DOMContentLoaded event handler or after elements exist
const popToggleButtons = document.querySelectorAll('.popup-toggle');
[].slice.call(popToggleButtons).forEach(function(btn) {
btn.addEventListener('click', handleToggleBtnClick)
});
function handleToggleBtnClick(event) {
const btnData = this.dataset,
popup = document.getElementById(btnData.target),
classMethod = btnData.action === 'show' ? 'add' : 'remove';
// add or remove active class depending on which button was clicked
popup.classList[classMethod]('active');
}
.form-popup {
display: none
}
.form-popup.active {
display: block
}
<div>
<button type="button" data-target="myForm1" data-action="show" class="popup-toggle btn-btn-delete">
<i class="mr-1 fas fa-edit"></i>Edit #1
</button>
<div class="form-popup" id="myForm1">
<form action="..." class="form-container" method="post">
<h1>Edit information #1</h1>
<input type="text" name="name" value="name 1">
<button type="submit" class="btn">change</button>
<button type="button" class="btn cancel popup-toggle" data-target="myForm1" data-action="hide">Close</button>
</form>
</div>
</div>
<div>
<button type="button" data-target="myForm2" data-action="show" class="popup-toggle">
<i class="mr-1 fas fa-edit"></i>Edit #2
</button>
<div class="form-popup" id="myForm2">
<form action="..." class="form-container" method="post">
<h1>Edit information #2</h1>
<input type="text" name="name" value="name 2">
<button type="submit" class="btn">change</button>
<button type="button" class="btn cancel popup-toggle" data-target="myForm2" data-action="hide">Close</button>
</form>
</div>
</div>
Related
I want to display the search in the site header in the tpl file
<div class="search-widget" >
<form method="get" action="art/search">
<input type="text" id="artnum" value="" maxlength="40" placeholder="" >
<button type="submit" onclick="TDMArtSearch()">
<i class="material-icons search"></i>
<span class="hidden-xl-down"></span>
</button>
</form>
<div class="tclear"></div>
<script type="text/javascript">
function TDMArtSearch(){
var art = $('#artnum').val();
if(art!=''){
art = art.replace(/[^a-zA-Z0-9.-]+/g, '');
location = '/art/search/'+art+'/';
}
}
$('#artnum').keypress(function (e){
if(e.which == 13){ TDMArtSearch(); return false;}
});
</script
></button>
</form>
</div>
Search does not work. If I delete form method="get" action="art/search". Then search works. Only works if you click on the search button. How to apply the form method to start searching with the enter key
Just make the form executes the javascript function on submit:
<div class="search-widget" >
<form method="get" action="art/search" onsubmit="TDMArtSearch(); return false;">
<input type="text" id="artnum" value="" maxlength="40" placeholder="" >
<button type="submit" onclick="TDMArtSearch()">
<i class="material-icons search"></i>
<span class="hidden-xl-down"></span>
</button>
</form>
<div class="tclear"></div>
<script type="text/javascript">
function TDMArtSearch(){
var art = $('#artnum').val();
if(art!=''){
art = art.replace(/[^a-zA-Z0-9.-]+/g, '');
location = '/art/search/'+art+'/';
}
}
</script
></button>
</form>
</div>
onsubmit attribute is to execute javascript when form is submited and return false is to stop "normal" submission. There are better ways to do this by adding listeners and having cleaner HTML code, but you can look for that once you know how this works.
<form role="form" method="post" action="tes.php">
<button type="button" id="setValueButton">xSmall</button>
<input data-max="5000" name="name[1]" type="text">
<button type="button" id="setValueButton">xSmall</button>
<input data-max="4000" name="name[2]" type="text">
<button type="button" id="setValueButton">xSmall</button>
<input data-max="1000" name="name[3]" type="text">
</form>
How to automatically input a value into the input if I click the button xSmall
If the user inputs a value greater than the data-max have the value set to data-max.
First, each element has to have a unique ID:
<form role="form" method="post" action="tes.php">
<button type="button" id="setValueButton1">xSmall</button>
<input data-max="5000" name="name[1]" type="text">
<button type="button" id="setValueButton2">xSmall</button>
<input data-max="4000" name="name[2]" type="text">
<button type="button" id="setValueButton3">xSmall</button>
<input data-max="1000" name="name[3]" type="text">
</form>
Then you need to use javascript (example in jQuery)
$('#setValueButton1').on('click', function () {
$('input[name="name[1]"]').val('text string');
});
This example will enter a text string into the first box when you click the first button.
to detect a change to the input, use something like this:
$('#setValueButton1').on('change', function () {
if ('#setValueButton1').val() > '5000' {
// set it as above
}
}
https://jsfiddle.net/hmhf9mxf/
I want show alertbox on click button but more of button the some ID attr and work click on first button but not working click on second button.
Jquery;
jQuery("#submit").click(function(e){
alert("message");
});
HTML; (Repeat html per message)
<div class="reply">
<form id="vivam" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="submit" class="btn btn-primary">Reply</button>
</p>
</form>
</div>
jsfiddle Link
What is the solution to this problem? Thank you in advance for answers.
Approach 1: IDs should be unique, use class instead of id.
HTML:
<div class="reply">
<form id="vivam" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
JS:
jQuery(".submit").click(function(e){
alert("message");
});
Working Demo Approach 1
Approach 2: You can also use attribute value selector to target element with same id. However this breaks the rule ids should be unique.and i do not recommend you using this:
jQuery("[id=submit]").on('click',function(e){
e.preventDefault();
alert("test");
});
Working Demo Approach 2
ID Must be unique .
Handler get attached to the first element with the id only.
Use class instead of id .
Fiddle Demo
Change HTML
<button class="btn btn-primary submit">Reply</button>
// ^ add class submit and remove id submit
Make it
jQuery(".submitbuttons").click(function(e){
and then
<button id="submit" class="btn btn-primary submitbuttons">Reply</button>
and please give unique ids and I recommend to set the button-type attribute (button or submit)
You can use the on listener in JQuery. That way you listen on an class, and then do something with the id...
Here's an JSFiddle of the working code...
The HTML ( note that i've changed the ID's because ID's need to be unique, and add the class to the buttons ):
<div class="reply">
<form id="vivam_1" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="button_1" class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
<div class="reply">
<form id="vivam_2" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="button_2" class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
And the JQuery part:
$('body').on('click', '.submit', function () {
e.preventDefault();
alert("Clicked on button " + $(this).attr('id'));
});
I have a Javascript code that should update a form input value, but it does not work.
Here is the code:
<script>
function up2(mul)
{
var passcode = parseInt(document.getElementById("passcode").value);
var nou = mul;
var resultat = passcode+nou;
document.login.passcode.value = resultat;
}
function formSubmit()
{
document.getElementById("login").submit();
}
</script>
And the html:
<body OnLoad="document.login.passcode.focus();">
<h1>FORM</h1>
<hr>
<form name="login" method="post" action="login.php">
<input type="number" name="passcode">
<input type="submit" value="Entra">
</form>
<center>
<button onclick="up2('1')">1</button>
<button onclick="up2('2')">2</button>
<button onclick="up2('3')">3</button><br>
<button onclick="up2('4')">4</button>
<button onclick="up2('5')">5</button>
<button onclick="up2('6')">6</button><br>
<button onclick="up2('7')">7</button>
<button onclick="up2('8')">8</button>
<button onclick="up2('9')">9</button><br>
<button onclick="up2('0')">0</button>
<br><br>
<button onclick="formSubmit()">ENTRA</button>
</center>
</body>
When the Javascript was only document.login.passcode.value = mul; it changed the input value with the number pressed (it didn't add the new number to the one that's in the field). Now I want to make a passcode login, and it should add the number pressed to the field.
If there's a way to do it with jQuery it would be ok.
You are using getElementById() but haven't ID attributes on your HTML elements
<input type="number" name="passcode">
should be
<input type="number" id="passcode" name="passcode">
FYI, you have the same error on your <form> tag.
For div.spot1 and div.spot2 I want the same behaviors - hide delete button when image input is empty, show delete btn when image is uploaded, change image src when image is uploaded, click delete btn to send ajax request to server etc. Of course I can copy/paste js code of spot1 to spot2, only changing the class from first to second. But say I have 4 spots like this, then I will have four almost identical code in my js file. I fear that's not the best practice. What should I do?
HTML:
<form class='upload' action="" method="POST" enctype="multipart/form-data">
<div class="spot1">
<span class='filename first'>FILE 1</span>
<button type='button' class='delete first'>❌</button>
<input type="file" name="image" class="input first" accept="image/*">
<input type="button" value="+" class="browse first"/>
<img class="tn first" src="{{turl}}">
<span class="status first"></span>
</div>
<div class="spot2">
<span class='filename second'>FILE 1</span>
<button type='button' class='delete second'>❌</button>
<input type="file" name="image" class="input second" accept="image/*">
<input class="browse second" type="button" value="+"/>
<img class="tn second" src="{{turl}}">
<span class="status second"></span>
</div>
</form>
Part of the JS (just for making an example):
if ( $('.tn.first').attr('src') == "") {
...
}
$('.browse.first').on("click", function () {
$('.input.first').click();
});
$('.input.first').on('change', function () {
...
};
That is indeed not best practice.
If you know what kind of structure you will have (exactly), you can do something like this:
var FileModule = function(elem) {
// Throw your events here
}
Instantiating it is as simple as passing your elements in it. If you are using jQuery, you can do this exactly using the $.fn.extend() function, as follows:
$.fn.FileModule = function() {
return this.each(function() {
// `this` is your element
$(this).find(".input.first").on("change", function() { ... });
});
};
From there, you can initialize your module (that is what it is) by calling FileModule on a jQuery selector that contains your spots.
If you want even more dynamic, consider binding custom events on it in order to allow external portions of your code to interact with it. This is beyond the scope of your question, hozever.
If you have multiple elements of the same type, that represent the same type of data and/or functionality, they should have the same class name. You can add additional attributes to your elements that tell you which one of that class it is, like this:
<div class="spot" index="1">
<span class='filename'>FILE 1</span>
<button type='button' class='delete'>❌</button>
<input type="file" name="image" class="input" accept="image/*">
<input type="button" value="+" class="browse"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
This lets you now write:
$('.browse').on("click", function () {
$(this).find('.input').click();
});
How about change markup following way
<form class='upload' action="" method="POST" enctype="multipart/form-data">
<div class="spot" id="spot1">
<span class='filename'>FILE 1</span>
<button type='button' class='delete'>❌</button>
<input type="file" name="image" class="input" accept="image/*">
<input type="button" value="+" class="browse"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
<div class="spot" id="spot2">
<span class='filename'>FILE 2</span>
<button type='button' class='delete'>❌</button>
<input type="file" name="image" class="input" accept="image/*">
<input class="browse" type="button" value="+"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
</form>
And JS
$('.spot .browse').on('click', function () {
$(this).parent().find('.input').click();
});
$('.spot .input').on('change', function () {
alert('I\'m input of type file of ' + $(this).parent().prop('id') + ' and I\'m changed');
});
Here is jsFiddle demo
Since you're already using jquery there is a selector which selects based on a substring within in an attribute (attribute contains).
$('div[class*="spot"]').doSomething();