standard input, select box and multiple select box can also get the desired value, it works.. but how can i get the value with jquery in this code snippet?
<script>
$(document).ready(function(){
jQuery('#checkboxesmarka').change(function(){
var id=jQuery('#checkboxesmarka').val();
alert(id);
});
});
</script>
<div id="checkboxesmarka">
<?php
while($markacek=$markasor->fetch(PDO::FETCH_ASSOC)) { ?>
<label for="<?php echo "marka".$markacek['marka_id'] ?>">
<input type="checkbox" id="<?php echo "marka".$markacek['marka_id'] ?>" name="marka_id[]" value="<?php echo $markacek['marka_id'] ?>" /><?php echo $markacek['marka_name'] ?> </label>
<? } ?>
</div>
$(function(){
$('#checkboxesmarka').click(function(){
var valSelected = [];
$(':checkbox:checked').each(function(i){
valSelected[i] = $(this).val();
});
console.log(valSelected);
});
});
In console all selected value
Related
view
<?php
for(condition)
{
?>
<input type="hidden" name="pid" value="<?php echo $data1->id; ?>">
</i>
<?php
}
?>
AJAX
<script type="text/javascript">
$ (document) .ready(function() {
$('[name="like"]') .click (function() {
var pid = $('[name="pid"]').val();
alert(pid);
});
});
</script>
Expected Result:-
If I click on like anchor tag it should show me different id for different posts and I don't want to reload my page.
Actual Result:-
It is showing me the first id when I click on different like tags of different posts.
I am new to AJAX.
Thanks in advance.
view
<?php
for($i=0;$i<count($data1);$i++)
{
?>
<input type="hidden" name="pid#<?=$i?>" value="<?php echo $data1->id; ?>">
</i>
<?php
}
?>
AJAX
<script type="text/javascript">
$ (document) .ready(function() {
$('[name="like"]') .click (function() {
$name = $(this).split("#");
var pid = $('pid'+$name[1]).val();
alert(pid);
});
});
</script>
you place the input and a inside the div and then get the a's sibling which is the input
<?php
for (condition) {
?>
<div>
//Your input and a tag here
</div>
<?php }
?>
<script>
$('[name="like"]').click(function () {
var input = $($(this).siblings("input")[0]); // get the input element
var value = input.val(); //value of the input
alert(value);
});
</script>
You are setting same name for all the input.
If you don't need input field as hidden then you can use attribute to set and get the value of your post.
<?php
for(condition)
{
?>
<input type="hidden" name="pid" value="<?php echo $data1->id; ?>">
</i>
<?php
}
?>
You can use class name to access the attribute of anchor tag.
<script type="text/javascript">
$(document).on('click', '.select_id', function(){
var pid = $(this).attr('data-pid');
alert(pid);
});
</script>
This is my view file code
<?php for($i=0; $i<4; $i++) { ?>
<div class="box22">
<div class="mcm">
<input type="text" placeholder="Myself" id="coworkers" name="coworkers[]" />
<span class="bar"></span>
</div>
<div class="select2">
<select id="category_<?php echo $i; ?>" name="category[]" class="chosen-select ref-sel1" multiple >
<?php
foreach($genre as $gen){
echo '<option value='.$gen->genre_id.'>'.$gen->genre_name.'</option>';
}
?>
</select>
</div>
</div>
<?php } ?>
my script : when i chose one or more from option, it does not comes into script. How to get multiple values under loop
$(document).ready(function()
{
$('form#shortfilm').submit(function(e)
{
e.preventDefault();
var form = $(this);
var foo = [];
$('#category :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
});
});
change text to val()
$('option:selected').each(function(i, selected){
foo.push($(selected).val());
});
or:
var foo = [];
$('.box22').each(function(x,v){
var temp =[]
$(v).find('option:selected').each(function(i, selected){
temp.push($(selected).val());
});
foo.push(temp)
});
see demo for the second option here
Please run this sample code. This may help you
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form id="shortfilm" name="data">
<?php $genre=array(1=>'AAAAAAAAAAAAAA',2=>'BBBBBBBBBBBBBBB',3=>'CCCCCCCCC',4=>'DDDDDDDDDDDDDD',5=>'EEEEEEEEEEEEEEE');
for($i=0; $i<4; $i++) { ?>
<div class="box22">
<div class="mcm">
<input type="text" placeholder="Myself" id="coworkers" name="coworkers<?php echo$i?>[]" />
<span class="bar"></span>
</div>
<div class="select2">
<select class="category" name="category<?php echo$i?>[]" class="chosen-select ref-sel1" multiple >
<?php
foreach($genre as $key => $gen){
echo '<option value='.$key.'>'.$gen.'</option>';
}
?>
</select>
</div>
</div>
<?php } ?>
<input type="submit" value="submit" />
</form>
<script>
$(document).ready(function()
{
$('form#shortfilm').submit(function(e)
{
e.preventDefault();
var form = $(this);
var foo = [];
$('.category :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
console.log(foo);
});
});
</script>
</body>
</html>
Using the .val() function on a multi-select list will return an array of the selected values:
var selectedValues = $('#category').val();
And in your html <select id="category" multiple="multiple">
Also put the values of the $gen->genre_id in a variable and so like this
foreach($genre as $gen){
$genId = $gen->genre_id;
$genName = $gen->genre_name;
echo '<option value='.$genId.'>'.$genName.'</option>';
}
Also <select id="category" in a forloop will have many select elements with the same id,change that to category[$i] or use class
My PHP code looks like this -
for ($i=0;$i<=10;$i++) {
?>
<div id="">
<input type="text" id="GetCommentText-<?php echo $i;?>"></input>
<input type="hidden" id="GetPostID-<?php echo $i;?>" value="<?php echo $i;?>">
<button type="button" id="SelectPostComment-<?php echo $i;?>" >Submit</Submit>
</div>
<?php
}
?>
<div id="ShowAjaxesult"></div>
I want to get the data of these <input> elements using jquery dynamic id selectors. My jQuery looks like -
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("[id^=SelectPostComment-]").click(function(){
var $td = $(this).closest('input').next();
var CommentText = $td.find("[id^=GetCommentText-]").val();
var PostID = $td.find("[id^=GetPostID-]").val();
$.ajax( {
type : 'GET',
url:'test1.php',
data : {CommentText: CommentText, PostID: PostID},
success:function(data) {
$('#ShowAjaxesult').html(data);
}
});
});
});
</script>
But I'm not getting value of ajax data CommentText and PostID in my test1.php file when i click <button>. Not sure what mistake I'm making. Please help.
try this:
for ($i=0;$i<=10;$i++) {
?>
<div id="">
<input type="text" id="GetCommentText-<?php echo $i;?>" />
<input type="hidden" id="GetPostID-<?php echo $i;?>" value="<?php echo $i;?>">
<button type="button" id="SelectPostComment-<?php echo $i;?>" >Submit</button>
</div>
<?php
}
?>
<div id="ShowAjaxesult"></div>
and js part:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('[id^="SelectPostComment-"]').click(function(){ // changed here
var $td = $(this).parent(); // changed here
var CommentText = $td.find('[id^="GetCommentText-"]:first').val(); // changed here
var PostID = $td.find('[id^="GetPostID-"]:first').val(); // changed here
$.ajax( {
type : 'GET',
url:'test1.php',
data : {CommentText: CommentText, PostID: PostID},
success:function(data) {
$('#ShowAjaxesult').html(data);
}
});
});
});
</script>
Or You could use more efficient way (no need to make garbages in DOM Tree):
<?php
for ($i=0;$i<=10;$i++) {
?>
<div data-postId="<?php echo $i; ?>">
<input type="text" name="commentText" value="" />
<button type="button" class="submit-comment">Submit</button>
</div>
<?php
}
?>
<div id="ShowAjaxesult"></div>
and js part:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.submit-comment').click(function(){
var $parent = $(this).parent();
var postId = $parent.data('postId');
var commentText = $parent.find('input[name="commentText"]:first').val();
$.ajax( {
type : 'GET',
url:'test1.php',
data : {CommentText: commentText, PostID: postId},
success:function(data) {
$('#ShowAjaxesult').html(data);
}
});
});
});
</script>
I’m using below a simple Jquery code to call a PHP page and get the button information back in a div:
<head>
<script>
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('myPHPfile.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
myPHPfile.php
<?php
if( $_REQUEST["selectedButtonValue"] )
{
$buttonPHP = $_REQUEST['selectedButtonValue'];
echo "Value button is ". $buttonPHP;
}
?>
How can I get the PHP information inside JavaScript, as follows:
alert(<?php echo('buttonPHP'); ?>);
Note: The following code shows the alert box message, but I can’t use it since I need the $buttonPHP value:
$("#myDiv").load('myPHPfile.php', {selectedButtonValue : buttonValue}, function(data){ alert(data); });
I’ve tried $_SESSION in myPHPfile.php, and also all jQuery AJAX functions: load(), get(), post() and the ajax() method, none of them is giving the PHP value inside JavaScript.
I looked all over but I couldn’t find an answer.
You would be better with an $.ajax request. Don't echo the 'Value of button is' part, just echo the actual value. For example:
$.ajax({
url: "myPHPfile.php",
context: document.body
}).done(function(data) {
var buttonValue = data;
// Whatever you want to do with the data goes here.
});
See the jQuery docs http://api.jquery.com/jQuery.ajax/
Alternatively, if you are generating the page with PHP, just echo the PHP variable into the JavaScript
<script>
...
var buttonValue = "<?php echo $buttonPHP; ?>";
...
</script>
Encode it in JSON instead of trying to echo the data :
<?php
if( $_GET["selectedButtonValue"] )
{
$buttonPHP = $_GET['selectedButtonValue'];
header('Content-Type: application/json');
echo json_encode($buttonPHP);
}
?>
Then use jquery get json to grab the data
$.get('myPHPfile.php?selectedButtonValue='+buttonvalue, function(data){
console.log(data);
});
Try:
alert('<?php echo $buttonPHP; ?>');
As a temporary solution, you could quickly merge both into a dirty code like this:
index.php:
<?php
$buttonPHP = "10"; //Set up your default button variable
if( $_REQUEST["selectedButtonValue"] == 10 )
{
echo "Selected button value: 10"; //You can also print $_REQUEST["selectedButtonValue"] here directly, but what's the point if you can select it from DOM through jQuery?
exit;
} else if ($_REQUEST["selectedButtonValue"] == 20) {
echo "Selected button value: 20";
exit;
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = <?php echo $buttonPHP ?>; //Duplicate default value from PHP to JS
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
</html>
index.php rendered in browser:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = 10; //Duplicate default value from PHP to JS
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
</html>
EDIT: Stored session
<?php
session_start();
if (isset($_REQUEST['selectedButtonValue'])) {
$_SESSION['selectedButtonValue'] = $_REQUEST['selectedButtonValue'];
echo $_REQUEST['selectedButtonValue'];
exit;
} else if (!isset($_SESSION['selectedButtonValue'])) {
$_SESSION['selectedButtonValue'] = 10;
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = <?php echo $_SESSION['selectedButtonValue']; //Get input value from session ?>;
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv"><?php echo $_SESSION['selectedButtonValue']; //Get input value from session ?></div>
</body>
</html>
Also make sure you filter the $_REQUEST variable, because as of now, it will print anything. See http://en.wikipedia.org/wiki/Cross-site_scripting for details.
I'm trying to compute a value from 2 given values quantity and price. I used the keyup event in jquery to compute the total from the current value of the qty and price.
How will I be able to reference the current textbox which initiates the keypress event. And put the corresponding total to the assigned box.
Do you know of any jquery plugins that will make it easier for me to achieve the result.
<script type="text/javascript">
$(function(){
$('input[name^=qty]').keyup(function(){
var curprice=$('input[name^=price]').val();
var curqty=$('input[name^=qty]').val();
var curtotal=curprice * curqty;
$('input[name^=comp]').val(curtotal);
});
});
</script>
</head>
<body>
<?php
for($a=0;$a<=5;$a++){
?>
Price:<input type="text" name="<?php echo 'price'.$a; ?>" value="<?php echo $a; ?>"/>
Quantity:<input type="text" name="<?php echo 'qty'.$a; ?>" value="<?php echo $a; ?>"/>
Computed:<input type="text" id="<?php echo 'a'.$a; ?>" name="<?php echo 'comp'.$a ?>" value="" />
<?php
echo "<br/>";
}
?>
</body>
</html>
Heres a screenshot.
If you need more details, feel free to ask, thanks.
<script type="text/javascript">
$(function(){
$('input[name^=qty]').keyup(function(){
var parentDiv = $(this).closest('div');
var curprice=parentDiv.find('input[name^=price]').val();
var curqty= this.value;
var curtotal=curprice * curqty;
parentDiv.find('input[name^=comp]').val(curtotal);
});
});
</script>
</head>
<body>
<?php
for($a=0;$a<=5;$a++){
?>
<div>
Price:<input type="text" name="<?php echo 'price'.$a; ?>" value="<?php echo $a; ?>"/>
Quantity:<input type="text" name="<?php echo 'qty'.$a; ?>" value="<?php echo $a; ?>"/>
Computed:<input type="text" id="<?php echo 'a'.$a; ?>" name="<?php echo 'comp'.$a ?>" value="" />
</div>
<?php
echo "<br/>";
}
?>
</body>
</html>
notice all the changes against your current code.
Here's something else. It uses regex to get the number part of the element's name, and assumes that something named priceX and compX are the related inputs.
$("input[name^=qty]").keyup(function() {
var i = /^qty(\d+)$/.exec($(this).attr('name'))[1],
price = parseFloat($("input[name=price" + i + "]").val()),
qty = parseInt($("input[name=qty" + i + "]").val(), 10);
$("input[name=comp" + i + "]").val(price * qty);
});
Example: http://jsfiddle.net/AHUHu/