I am working in wordpress and I have created a custom plugin.In which I have get multiple data from the database and my code is like this.
<?php
foreach($result as $res)
{
?>
<input type="hidden" class="status" value="<?php echo $res->review_status; ?>" />
<button class="aprove" value="<?php echo $res->review_id; ?>">Aprove</button>
<?php
}
?>
Now, I want to get hidden field value in jQuery. My jQuery code is like this:
jQuery(".aprove").click(function(){
var status = jQuery('.status').val();
alert(status);
});
When I click on button then it shows only first value of hidden field. For instance, the fist hidden value is 1 and second value is 0 then it display only fist value 1 for both button. So what shold I have to do to get different hidden value?
Try :
jQuery(".aprove").click(function(){
jQuery('.status').each(function(){
var status = jQuery(this).val();
alert(status);
});
});
.each will loop through all the classes and it will give alert every value of it.
JS Fiddel Demo
Updated
Updated Demo
Here is your answer. for each button the value taken would be from the input element before the button element
jQuery(".aprove").click(function(){
var status = jQuery(this).prev('.status').val();
alert(status);
});
var status = jQuery('.status').val();
alert(status);
this will get the value of element first found on page and will return the result,
if you want all the input values use
jquery each() - https://api.jquery.com/jquery.each/
jQuery('.status').each(function(){
alert($(this).val());
});
// this will give you all the values you want, one by one
you can use .map like this to get what you want:
$(document).ready(function(){
var status=[]
jQuery(".aprove").click(function(){
status = $(".status").map(function() {
return $(this).val();
}).get();
alert(status);//array of values
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" class="status" value="0" />
<input type="hidden" class="status" value="1" />
<button class="aprove" value="">Aprove</button>
Related
How can I get the value of the first input field from a list?
<button id="hello">get data</button><br><br>
<table> <td><label for="voucher_<?php echo $counter; ?>">D/N Number <?php echo $counter; ?></label><br>
<input type="text" name="voucher_<?php echo $counter; ?>" class="input-field exsmall-input" value="<?php echo $voucher; ?>" placeholder="D/N Number" id="voucher_<?php echo $counter; ?>" required>
</td></table>
When I run the above code the number of rows varies depending on the counter.If I want to get the value of the first DN number ,what shall I do ?
$(document).ready(function(){
$('#hello').click(function(){
var name = $("#voucher").val();
alert(name);
});
});
When I run this javascript I get undefined vales.
The reason you are getting the error is because you have used wrong selector to target input element. input element do not have id voucher. You need to put the ID to make existing code work.
Or, You can use attribute starts with selector here from current HTML:
$('#hello').click(function(){
var name = $("input[name^='voucher_']").val();
alert(name);
});
You can do it like below:-
$(document).ready(function(){
$('#hello').click(function(){
var name = $("div[id^='voucher']:visible:first").val();
alert(name);
});
});
Or:-
$(document).ready(function(){
$('#hello').click(function(){
var name = $("input[type=text]:visible:first").val();
alert(name);
});
});
Try this:-
$(document).ready(function() {
$('#hello').click(function() {
var name = $('table').find('input[type=text]').filter(':visible:first')
.val();
});
});
<html>
<?php for($i=1;$i<5;$i++){?>
<input type="text" value="<?php echo $i; ?>" id="val".$i>
<?php } ?>
</html>
<script src="../jquery-3.1.1.js"></script>
<script>
$("input").keyup(function()
{
alert($("#val").val());
});
</script>
NOTE I will try to get text-box value when key-up event fire but always first text box value display how i will get text-box value
which key-up event fire
Use this
$("input").keyup(function()
{
alert($(this).val());
})
By the way, the id attribute must be unique within the HTML document, see http://www.w3schools.com/tags/att_global_id.asp
use alert($(this).val()); instead of alert($("#val").val());
I have this script thats send a post via jquery.form addon:
$(document).ready(function() {
$('#submit_btn').on('click', function(e) {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview',
success: afterSuccess //call function after
});
});
});
function afterSuccess()
{
$('#imageform').resetForm();
$('.ImgStatus').appendTo('.img');
}
and gets a html respond.
<div id="<?php echo $RandNumber; ?>" class="ImgStatus">
<input id="<?php echo $RandNumber; ?>" type="checkbox" name="<?php echo $RandNumber; ?>" />
<img src='upload/<?php echo $actual_image_name; ?>' class='preview'>
</div>
And what I'm trying to do is to remove the div that corresponds to the checkbox ID, when the delete button is clicked. And also to send a $_POST to a php page with the checked divs. Until now I have something like this but When I press the button its not removing the element...
$("#clickme").click(function(e){
var selected = $(".img input:checked").map(function(i,el){return el.name;}).get();
$(selected).remove();
});
jsfiddle.net/aHr6v/3
You can simply select the parent of the selected input field (the div), and remove it like this:
$("#clickme").click(function(e){
var selected = $(".img input:checked").parent();
$(selected).remove();
});
Here's a working example: http://jsfiddle.net/aHr6v/5/
check this: http://jsfiddle.net/aHr6v/6/
Based on what you said in your comment, I added the following line which search the div by its id and remove it
$("div#"+selected).remove();
I'd suggest:
$("#clickme").click(function (e) {
$('div.img input:checked').closest('div').remove();
});
JS Fiddle demo.
This looks at all inputs that are checked, finds the closest parent ancestor that's a div and then removes that/those elements from the DOM.
References:
closest().
remove().
selected is an array. What you want to do is pass one or more elements of that array as a selector:
$.each(selector, function(){
$('#' + this).remove();
})
Just change
$(selected).remove();
To
$('#'+selected).remove();
Edit: Or To (to remove all selected divs)
$.each(selected, function(){
$('#' + this).remove();
});
I'm trying to display multiple checkboxes and then submit the selected checkboxes as HTTP GET (i.e. as parameters in URL string) to the same script:
Here is my simplified test code - test.php:
<html>
<head>
<style type="text/css" title="currentStyle">
#import "http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#name').dialog({ autoOpen: false, modal: true });
});
</script>
</head>
<body>
<form>
<p><input type="button" value="Select name"
onclick="$('#name').dialog('open');"></p>
<div id="name" title="name">
<?php
$NAMES = array(
'project one',
'project two',
'project three',
);
foreach ($NAMES as $name) {
printf('<p><label><input type="checkbox" name="name" value="%s">%s</label></p>',
urlencode($name),
htmlspecialchars(substr($name, 0, 120))
);
}
?>
</div>
<input type="submit">
</form>
</body>
</html>
But for some reason, when I select the first 2 checkboxes click the "Submit" button (sorry for the non-English name in the screenshot), then the script http://myserver/test.php? is being submitted and not http://myserver/test.php?name=project+one&name=project+two as I would expect.
If I get rid of all JQuery UI stuff, then it works.
What am I doing wrong? (besides using name="name" which is because that's a database table column name and doesn't seem to be the reason for this problem anyway)
UPDATE:
In my real program (not the above test case) I actually have several such dialogs and would like to set some settings in each dialog and only after that that click a Submit button. So the Submit button must be outside the dialog(s).
Thank you!
Assuming all the form inputs are checkboxes you can use the following to compile and submit the details as a GET.
using your original code add the following function
function compileInputs(){
var string = '';
var inputs = new Array();
//loop through all checkboxes
$(':checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
string = "?"+inputs.join("&");
window.location.replace(string);
}
you will need to change the names of the inputs from name='name' to name='name[]'
then change the submit to a button as follows:
<input type="button" onClick='compileInputs()' value='submit'>
you will no longer need the <form> tags
for a more selective approach:
//get all checkboxes from div#name
$('div#name :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
//get all checkboxes from div#appsversion
$('div#appsversion :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
//get all checkboxes from div#osversion
$('div#osversion :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
You may need to wrap the whole form in a div and then dialog the new div in the dialog rather than just the div #name
Try this:
$("#submitButton").click(function(){
$("#formId").submit();
});
Should you not do name="name[]" . Then on the form submit (however you submit it (AJAX or non AJAX), you can get the "name" array as your post variable and handle it as you may wish. Correct me if I am wrong
Assuming the dialog is actually the problem, you may have to have your dialogs populate some hidden fields on the page to actually submit.
Here is a very simple sample to get you started.
http://jsfiddle.net/jUH9g/
When you click ok in the dialog it populates the 'names' textbox inside the form that actually gets submitted. In your real code you would change input type="textbox" to input type="hidden"
$("#dlg").dialog({autoOpen: false,
buttons: {
"OK": function () {
var names = "";
$("input:checkbox").each(function () {
if (this.checked) {
names += $(this).val() + ",";
}
});
$("#names").val(names);
}
}
});
I have several forms on one page, they're all the same, but have different hidden values:
<?php foreach ($results as $result): ?>
<form method="POST" action="edit.php">
<input type="hidden" name="id" value="<?php echo $result['id']; ?>">
<input type="submit" name="action" value="Edit">
</form>
<?php endforeach; ?>
I want id to be submitted using $.post when this is clicked to edit.php, however if I use $("#id").val() (I'm trying to post the hidden input which is named id), it only selects the first id value in the page, and not the one that was clicked by the submit button.
$.post("edit.php", { id: $("#id").val(), action: "Edit" },
function(data){
alert("Data Loaded: " + data); //im using fancybox here to display an inline frame
});
How can I submit the id of the current form clicked?
I assume you're binding to the submit event on the forms. Use serialize instead of querying for values:
$('form').submit(function(){
$.post('edit.php', $(this).serialize(), function(data) {
alert("Data Loaded: " + data);
});
return false;
});
Since you still need to include the submit's name/value pair, find the name="id" input within the <form> you're on, like this:
$.post("edit.php", { id: $(this).find("input[name=id]").val(), action: "Edit" },
function(data){
alert("Data Loaded: " + data);
});
id attributes should be unique in the document, since your markup in the question doesn't have an ID it looks like you fixed that issue. This finds the name="id" <input> in the <form> you're in the submit handler of.
Do you have multiple page elements with the same ID? Using $("#id").val() I believe would only retrieve the first value of an element with that ID. Having more than one would result in an array of elements. To find a specific element that is duplicated you would have to put it into context like:
$("#myform").find("#id").val()
Use the form element that is submitted as a context in your selector:
$('form').live('submit', function(e) {
var form = $(this);
var id = $('#id', form).val();
//... do your post here
});
NOTE: I used .live() to bind to the submit event in case you're adding forms dynamically.