undefined value from data attribute - javascript

i try to get the value from the data attribute and pass to the java script variable but it give the undefined value
$(document).on("click","#edit_cust",function(){
var customer_id=$(this).data("id");
var customer_name=$(this).data("name");
var customer_phone=$(this).data("phone");
var customer_addr=$(this).data("mail");
var customer_mail=$(this).data("phone");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='btn-group' role='group' >
<a id="edit_cust" data-target="#edit" data-toggle="modal"><button
type='button' class='btn btn-primary btn-sm' data-id="<?php echo
$customer["cus_id"]; ?>" data-name="<?php echo $customer["cus_name"]; ?>"
data-phone="<?php echo $customer["cus_phone"]; ?>" data-addr="<?php echo
$customer["cus_address"]; ?>" data-mail="<?php echo $customer["cus_mail"]; ?
>"><span class="fas fa-user-edit edit_data" aria-hidden='true'></span>
</button></a>
</div>

All those data attributes are present for the inner button so get the button within the clicked element.
$(document).on("click","#edit_cust",function(){
// cache buttton reference
var $btn = $('button', this);
// or $btn = $(this).find('button');
// get values from button
var customer_id = $(btn.data("id");
var customer_name = $btn.data("name");
var customer_phone = $btn.data("phone");
var customer_addr = $btn.data("mail");
var customer_mail = $btn.data("phone");
});

Related

onclick() function to fetch button value to text box working only one time

My onclick() function to fetch a button's value to a text box is working only one time. Here is a JQuery function to add the button's value to an input text box
$("button").click(function() {
var fired_button = $(this).val();
var word = document.getElementById("str").value + ' ' + fired_button;
document.getElementById("str").value = word;
});
HTML code
<button class="btn m-1 btn-secondary" id="sel0" value="<?php echo $row2['W1']; ?>"><?php echo
row2['W1']; ?> </button>
<button class="btn m-1 btn-secondary" id="sel1" value="<?php echo $row2['W2']; ?>"><?php echo
$row2['W2']; ?></button>
<button class="btn m-1 btn-secondary" id="sel2" value="<?php echo $row2['W3']; ?>"><?php echo
$row2['W3']; ?></button>
<button class="btn m-1 btn-secondary" id="sel3" value="<?php echo $row2['W4']; ?>"><?php echo
$row2['W4']; ?></button>
After clicking the start button it's working fine and displaying the values of the clicked button in the textbox
But after I fetch the next row in the query, the AJAX values are being changed and the onclick function is not working.
It's a quiz project. I want onclick to fetch the button value into the textbox, which is working right on the first call. But, after fetching the second row by clicking next button, then it's not working.
$(document).on("click", "button", function() {
var fired_button = $(this).val();
var word = document.getElementById("str").value + ' ' + fired_button;
document.getElementById("str").value = word;
});
/*
here we are using document as entity from which in the document if we click the button tag this function will be executed*/

calling controller and passing value through onlick listener

<?php
foreach($fetch_file as $row)
{
echo '<tr>';
echo '<td>' . base64_decode($row->file_perm_desc) . '</td>';
echo '<td style = "text-align:center;">' . date_format((date_create($row->date_entry)),"M d, Y") . '</td>';
echo '<td class = "text-center"><a class="btn btn-info" >
<input type = "hidden" name = "editid" class = "openid" value = ' . $row->file_perm_id . '>
<i class="glyphicon glyphicon-folder-open"></td>';
echo '<td class = "text-center"><a class="btn btn-warning" >
<input type = "hidden" name = "editid" class = "unpublishid" value = ' . $row->file_perm_id . '>
<i class="glyphicon glyphicon-comment"></td>';
echo '<td class = "text-center"><a class="btn btn-danger" >
<input type = "hidden" name = "editid" class = "deleteid" value = ' . $row->file_perm_id . '>
<i class="glyphicon glyphicon-trash"></td>';
echo '<td class = "text-center"><a class="btn btn-success" >
<input type = "hidden" name = "editid" class = "downloadid" value = ' . $row->file_perm_id . '>
<i class="glyphicon glyphicon-download"></td>';
echo '</tr>';
}
?>
$('.btn-info').click(function()
{
var id = $(this).find('.openid').val();
window.location.replace("<?php echo base_url();?>ClientCont/List_Files");
});
I have this onlick listener from the value above on the user click the button it should go to the controller but I dont know how can I call controller and pass the value from id. this is in codeigniter framework hope somebody can help thanks
Hope this will help you
The html code is wrong. Closing anchor tag ("</a>") is missing. Fix the html as below
'<td class = "text-center"><a class="btn btn-info" ><input type = "hidden" name = "editid" class = "openid" value = ' . $row->file_perm_id . '><i class="glyphicon glyphicon-folder-open">**</a>**</td>'
Try the below javascript code.
$('.btn-info').click(function() {
var id = $(this).find('input').val();
var url = "<?php echo base_url();>ClientCont/List_Files?id="+id;
window.location.replace(url);
});
Hope this will help you :
$('.btn-info').click(function() {
var id = $(this).find('.openid').val();
if (id)
{
window.location.href = "<?php echo base_url('ClientCont/List_Files/');?>" + id;
}
});
Your controller's List_Files method should be like this :
public function List_Files($id)
{
/*echo passed id from the js here like this */
echo $id;
}

JavaScript value passing

Using SQLite I can list the values in
<div class="text-middle">
<?php foreach($result as $row) ?>
<button class="button button1" id="myBtn" value="<?php echo $row['Id']; ?>" onclick="myFunction()"><?php echo $row['Id']; ?></button>
<?php } ?>
</div>
However when I click on the button it's showing the only the first value in popup alert.
function myFunction() {
var x = document.getElementById("myBtn").value;
alert(x);
}
How can I get the corresponding values in each button?
All of your buttons have the same id attribute. they must be unique within the page. To fix this you can remove the id attribute and pass the reference of the button to the function:
<div class="text-middle">
<?php foreach($result as $row) { ?>
<button class="button button1" value="<?php echo $row['Id']; ?>" onclick="myFunction(this)"><?php echo $row['Id']; ?></button>
<?php } ?>
</div>
function myFunction(el) {
var x = el.value;
console.log(x);
}
Better still would be to place the same class on all the buttons and use unobtrusive JS code to attach your event handler, like this:
<div class="text-middle">
<?php foreach($result as $row) { ?>
<button class="button" value="<?php echo $row['Id']; ?>"><?php echo $row['Id']; ?></button>
<?php } ?>
</div>
// native JS:
var buttons = document.getElementsByClassName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
var x = this.value;
console.log(x);
});
}
// jQuery:
$('.button').click(function() {
var x = this.value;
console.log(x);
});
Do not use the same id for more then one element: id="myBtn"
Change your function:
onclick="myFunction()"
to:
onclick="myFunction(this)"
And so:
function myFunction(element) {
var x = element.value;
alert(x);
}
You need to get the elements by their class, not by the id that they all share (which is a bad thing to do).
<script>
function myFunction() {
var x = document.getElementsByClassName("button1");
for (var i = 0; i < x.length; ++i) {
alert(x[i].value);
}
}
</script>

Pass PHP var to js function

I would like to pass a var from PHP to Javascript. I did this but it does not work. Can someone help me? If you tell me where I'm wrong I learn.
<script>
var passo = <?php echo 'hello'; ?>;
</script>
<button type="button" onclick="funzionepassaggio(passo)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#ModalSubmit"><?php echo "empty"; ?></button>
<script>
function funzionepassaggio(pass) {
alert("hello" + pass);
}
</script>
The answer is hello undefined.
I have one other question! The variable that I have to pass is located within a loop, and of course he always passes the last value! How can I do so that has passed the value that the variable at that time? This is the code:
for ($a = 0; $a < 2; $a = $a + 1) {
?>
<td>
<script>
var passo = "<?php echo $rigauno->nome; ?>";
</script>
<button type="button" onclick="funzionepassaggio(passo)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#ModalSubmit"><?php echo "vuoto"; ?></button>
</td>
<?php } ?>
you need to incude the quotes, so it will be valid string:
<script>
var passo = "<?php echo 'hello'; ?>";
</script>
or better call json_encode that will convert whatever you pass as JSON:
<script>
var passo = <?php echo json_encode($data); ?>;
</script>
json_enocde variable which you want to pass
<script>
var passo = <?php echo json_encode('hello'); ?>;
</script>
$pass='your string or your value ';
<button type="button" onclick="funzionepassaggio('<?php echo $hello; ?>')" class="btn btn-info btn-lg" data-toggle="modal" data-target="#ModalSubmit"><?php echo "empty"; ?></button>
<script>
function funzionepassaggio(pass) {
alert("hello" + pass);
}
</script>

hidden input value from php foreach loop not properly passing to JQuery

HTML + PHP :
<?php foreach ($resultpics as $row1){ ?>
<div class="col-md-2">
<a href="#" class="thumbnail" data-popup-open="popup-1"<!-onclick="showImg(<?php //echo $row1['img_id']; ?>-->)">
<input type="hidden" name="imgid" value="<?php echo $row1['img_id']; ?>" id="imgid">
<img id="popimg" src="<?php echo $row1['img_path'];?>/<?php echo $row1['img_id']; ?>.jpg" alt="Pulpit Rock" style="width:200px;height:150px;">
</a>
</div>
<?php } ?>
JQuery:
$('[data-popup-open]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
var imgid = $('input[name=imgid]').val();
alert(imgid);
$('img#viewimg').attr('src','images/'+imgid+'.jpg');
e.preventDefault();
});
The problem is the value of var imgid is always same(on every different it gives the imgid of first image only). Note that there is no problem in php foreach loop, it fetch's correctly. Thanks
Better approach: Since you're iterating over $resultpics to build HTML, then you need to use classes rather than ids, since duplicate IDs will be inconsistent HTML. Also, since you are using data attributes like data-popup-open make use of jQuery's .data() method, Do it this way:
<?php foreach ($resultpics as $row1) { ?>
<div class="col-md-2">
<a href="#" class="thumbnail" data-popup-open="popup-1">
<input type="hidden" value="<?php echo $row1['img_id']; ?>" class="imgid">
<img class="popimg" src="<?php echo $row1['img_path']; ?>/<?php echo $row1['img_id']; ?>.jpg">
</a>
</div>
<?php } ?>
<script>
$(".thumbnail").click(function(e){
e.preventDefault();
var class_name = $(this).data('popup-open');
$('[data-popup="' + class_name + '"]').fadeIn(350);
var imgid = $(this).find('.imgid').val();
$('img#viewimg').attr('src', 'images/' + imgid + '.jpg');
});
</script>
the problem is you have multiple input elements having name="imgid". So when you query $('input[name=imgid]') jquery parses all of the DOM and creates an object having 0 to 'n' input tags (n being the number of elements matching your query). If you use val() on this object it will always return the value of 0'th element in the object.
Solution:
change this
var imgid = $('input[name=imgid]').val();
to this
var imgid = $(this).next().val();
Try changing this line in your jquery:
var imgid = $('input[name=imgid]').val(); // wrong
to:
var imgid = $(this+' :input').val();
i'd also remove/change the id and name attribute values - as they should be unique
var imgid = $('input[name=imgid]'); returns all the inputs but when you call the val() function it only returns the value of the first item in the array which is always the same in this case.
You should either use a for-loop or add an index to your current foreach loop:
<?php
$index = 0;
foreach ($resultpics as $row1) {
?>
<div class="col-md-2">
<a href="#" class="thumbnail" data-popup-open="popup-<?php echo $index; ?>" data-index="<?php echo $index; ?>">
<input type="hidden" name="imgid_<?php echo $index; ?>" value="<?php echo $row1['img_id']; ?>">
<img id="popimg" src="<?php echo $row1['img_path'];?>/<?php echo $row1['img_id']; ?>.jpg"
alt="Pulpit Rock" style="width:200px;height:150px;">
</a>
</div>
<?php
$index++;
}
?>
Then use the index in the data to retrieve the input field:
$('[data-popup-open]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
var index = jQuery(this).attr('data-index');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
var imgid = $('input[name=imgid_' + index +']').val();
alert(imgid);
$('img#viewimg').attr('src','images/'+imgid+'.jpg');
e.preventDefault();
});

Categories