JQUERY
When I clicked the both 2 buttons it only returns the value 1
$(document).ready(function() {
var getvalue = $(".view_btn").val();
$(".view_btn").click(function() {
alert(getvalue);
});
});
PHP
<?php foreach ($studentRankingViewGET as $studentRankingViewSHOW) {?>
<input type="button" value="<?php echo $studentRankingViewSHOW['id'];?>" class="view_btn">
<?php } ?>
This returned 2 values .i.e. 1 AND 2
$('.view_btn').click(function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" value="123" class="view_btn"/>
<input type="button" value="456" class="view_btn"/>
you should use $(this) as referring object.
Since you have two buttons with same class. You can get the clicked element with this.
$(".view_btn").click(function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="view_btn" value="Button 1">Button 1<button>
<button class="view_btn" value="Button 2">Button 2<button>
This will support for dynamic content also
$(".view_btn").on("click", function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="view_btn" value="Button 1">Button 1<button>
<button class="view_btn" value="Button 2">Button 2<button>
Related
Sorry, I must be missing something really basic. I want to clear the results DIV after a search. I can either do it with a button, or, even better, when the input field is cleared. Currently if I use this reset button the input field is reset but the results DIV remains on the screen..
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var term = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(term.length){
$.get("incl_php/backend-search.php", {query: term}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
$("#reset").on("click", function() {
$(".result").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search..." />
<input id="btn" type="button" value="Calculate" name="btn"/>
<input id="reset" type="reset" name="reset" value="Reset"/>
<div class="result">Test</div>
</div>
</form>
When I query the database for results
Or
But when I click reset
The search box is reset but the search results remain
Thanks.
Check this example (check and adjust rest of your code accordingly):-
$('.search-box input[type="text"]').on("keyup input", function(){
var term = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(term.length){
resultDropdown.html(term);
} else{
resultDropdown.html('');
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").html('');
});
$("#reset").on("click", function() {
$(".result").html('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search..." />
<input id="btn" type="button" value="Calculate" name="btn"/>
<input id="reset" type="reset" name="reset" value="Reset"/>
<div class="result"></div>
</div>
</form>
Try this code once:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search..." />
<input id="btn" type="button" value="Calculate" name="btn"/>
<input id="reset" type="reset" name="reset" value="Reset"/>
<div class="result">Test</div>
</div>
</form>
<script type = "text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var term = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(term.length){
$.get("incl_php/backend-search.php", {query: term}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.html('');
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").html('');
});
});
$("#reset").on("click", function() {
$(".result").html('');
});
</script>
how to change PHP include ("link.html") by click buttons.
<?php include('link1.html')?>
BUTTON 1 change <?php include('link1.html')?> to <?php include('link2.html')?>
BUTTON 2 change <?php include('link1.html')?> to <?php include('link3.html')?>
BUTTON 3 change <?php include('link1.html')?> to <?php include('link4.html')?>
how to do this without refreshing page. using ajax?
Wrap include('link1.html'); with a DIV with unique ID. And on click on button call a ajax and replace the DIV content.
Please try with below code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DIVID">
<?php
include('link1.html');
?>
</div>
<button onclick="btnclick('link2.html')">Button 1</button>
<button onclick="btnclick('link3.html')">Button 2</button>
<button onclick="btnclick('link3.html')">Button 3</button>
<script type="text/javascript">
function btnclick(_url){
$.ajax({
url : _url,
type : 'post',
success: function(data) {
$('#DIVID').html(data);
},
error: function() {
$('#DIVID').text('An error occurred');
}
});
}
</script>
You can do that with jquery, example:
PHP Code:
<div id="mainDiv"><?php include('link1.html')?></div>
<button onclick="change2()">Button 1</button><br />
<button onclick="change3()">Button 2</button><br />
<button onclick="change4()">Button 3</button><br />
JQuery code
function change2() {
$('#mainDiv').load('link2.html');
}
function change3() {
$('#mainDiv').load('link3.html');
}
function change4() {
$('#mainDiv').load('link4.html');
}
Don't forget to include de JQuery
<script src="jquery/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="include( $( this ) )" value="2">Button 1</button>
<button onclick="include( $( this ) )" value="3">Button 2</button>
<button onclick="include( $( this ) )" value="4">Button 3</button>
<div id="included_page"><?php include('link1.html')?></div>
function include(elem)
{
var page = elem.val();
$.ajax({
url: "link" + page + ".html",
type: "GET"
}).done(function(msg) {
$('#included_page').html(msg);
})
})
}
I am not great at ajax but something along these lines may work, if you get any problems let us know.
I have this line of code
<html>
<head></head>
<body>
<script>
$(document).ready(function(){
$("#update").click(function(){
$("#id2").css("display","hidden");
var r = $("#id2").val()+1;
$("#id2").val(r);
});
});
</script>
<title>CV Education Form</title>
.
.
.
.
</fieldset>
<input type="text" name="id" id="id2" value="<?php echo ($id == 0 ? 1 : $id );?>"/>
<input type="submit" value="Update" name="submit"/>
</form>
</body>
</html>
and I want to change it to hidden so it is invisble but also when i click on a button update (which I have it) then it increments the value ($id) ... More simple i want something like that id+1.
Do you know how can I do that?
When I click on update button i want the 1 which is the $id to become $id+1 but I dont want to add myself I want to do it automatically when i click the update button and also hide the textfield
Just specify the update button id and id of the inputs. Use the code below
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#update").click(function(){
$("#id2").css("display","none");
var r = parseInt($("#id2").val(),10)+1;
$("#id2").val(r);
});
});
</script>
<title>CV Education Form</title>
.
.
.
.
</fieldset>
<input type="text" name="id" id="id2" value="<?php echo ($id == 0 ? 1 : $id );?>"/>
<input type="submit" value="Update" id="update" name="submit"/>
</form>
</body>
</html>
Check it here
http://jsfiddle.net/53cov3uq/3/
Hope this helps you
you can do it very simply using either Jquery or JavaScript .find the code below
function update()
{
var count=parseInt($('#counter').val());
$('#counter').val(count+1);
alert($('#counter').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" id="counter" name="id" value="0"/>
<button onclick="update()">update</button>
i just kept alert at the end that will popup the current value of the id.
try this,
<script type="text/javascript">
function increment_val(){
var id_val = parseInt(document.getElementById('id').value);
id_val++;
document.getElementById('id').value=id_val;
}
</script>
and in button html call js function,
<input type="button" value="update" id="btn_id" onclick="increment_val();"/>
For that use javascript. Php is server-side script.
<script type="text/javascript">
function increment()
{
var elem = document.getElementById("hiddenElement");
elem.value = 1 + parseInt(elem.value);
}
</script>
<input type="hidden" id="hiddenElement" name="id" value="0" />
<button onclick="increment()">Click me</button>
You can use below code which increments the value on click of a button.
<button onclick="document.getElementById('id').value = document.getElementById('id').value + 1;">Update</button>
HTML
<input type="text" name="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />
To change input type you can use the syntax like:
$("#id").attr('type','hidden');
To increment the value use
document.getElementById('id').value=parseInt(document.getElementById('id').value)+1;
or using jquery
$("#id").val($("#id").val()+1);
Hope it helps.
try this if you want to change text to hidden element and increment value
HTML Code:
<input type="text" name="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />
<button onclick="increment_value()">Update</button>
JS:
function increment_value()
{
var txt_field = document.getElementsByName("id")[0];
txt_field.value = parseInt(txt_field.value) + 1;
txt_field.setAttribute("type", "hidden");
}
OR
If you want to simply hide the text field just use this version of the above function
function increment_value()
{
var txt_field = document.getElementsByName("id")[0];
txt_field.value = parseInt(txt_field.value) + 1;
txt_field.style.display = "none";
}
<input type="hidden" name="id" id="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />
Jquery
$(function(){
$("button").click(function(){
$("#id").val($("#id").val()+1);
})
})
Here's the html code:
<Div>
<Div #btn-group>
<button value=0><img />Foo</button>
<button value=1 class=active><img />Lor</button>
<button value=2 class=active><img />Bar</button>
<button value=3><img />Ips</button>
</div>
<select hidden multiple>
<option value=0>
<option value=1 selected>
<option value=2 selected>
<option value=3>
</select>
</div>
http://jsfiddle.net/n6ns4/5/
I dont want it to constantly be running. So I have been trying to call .on() and .click() and .trigger() on the buttons. Which would then if check for "active", then add a selected, else remove selected. But the buttons dont toggle to ".active" until after the click/on/trigger completes.
I dont care what you change, but the requirements:
button needs to contain dynamic image and text (which is why i'm not
using checkbox.)
and the result needs to be able to submit to a form.
eventually it's going to use php laravel for the content.
Basically, if a button is pressed on top, and has the class 'active'...
Then the corresponding select option should have the attribute 'selected'
Or... Simply a way to submit a group of separated, toggling buttons with a dynamic image on them, to a form.
oh I like that answer Kalley, this is what I got.
<script>
$(function() {
$("#btnGroup button").click(function(){
var $thisButton = $('#btnGrouSelect option[value'+$(this).attr('value')+']');
if($(this).hasClass('active')){
$(this).removeClass('active');
if($thisButton.is(':selected')){} else {$thisButton.prop("selected", false)}
} else {
$(this).addClass('active');
if($thisButton.is(':selected')){} else { $thisButton.prop("selected", true)}
}
//$thisValue = $(this).attr('value');
})
});
// BEGIN: jQuery functions on load
</script>
<Div>
<Div id="btnGroup">
<button value=0>[img0] 0</button>
<button value=1>[img1] 1</button>
<button value=2>[img2] 2</button>
<button value=3>[img3] 3</button>
</div>
<select multiple id="btnGrouSelect">
<option value=0>0</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<input type="submit">
</div>
So, something like this fiddle:
$(document).ready(function () {
$('div.partnerBtnGroup button').on('click', function (ev) {
var btn = $(this).toggleClass('active');
var uid = btn.prop("value");
$("select option[value='" + uid + "']").prop('selected', btn.hasClass('active'));
$('pre').html(JSON.stringify($('#partnersSelect').val()));
ev.stopPropagation();
});
});
I solved it using the method described here, trying to use select was a poor decision. answer source:
<button type="button"> used as form value on submit
jsfiddle:
http://jsfiddle.net/nQFxU/3/
code
HTML
<div id="btn-group">
<button type="button" data-name="uid0" class="btn" data-toggle="btn-input" data-target="#puBtn0" value="uid0">
<img src="http://placehold.it/50">
<br>Randy</button>
<input type="hidden" id="puBtn0" />
<button type="button" data-name="uid1" class="btn" data-toggle="btn-input" data-target="#puBtn1" value="uid1">
<img src="http://placehold.it/50">
<br>Dick</button>
<input type="hidden" id="puBtn1" />
<button type="button" data-name="uid2" class="btn" data-toggle="btn-input" data-target="#puBtn2" value="uid2">
<img src="http://placehold.it/50">
<br>Jane</button>
<input type="hidden" id="puBtn2" />
<button type="button" data-name="uid3" class="btn" data-toggle="btn-input" data-target="#puBtn3" value="uid3">
<img src="http://placehold.it/50">
<br>Alice</button>
<input type="hidden" id="puBtn3" />
<button type="button" data-name="uid4" class="btn" data-toggle="btn-input" data-target="#puBtn4" value="uid4">
<img src="http://placehold.it/50">
<br>John</button>
<input type="hidden" id="puBtn4" />
</div>
JS
$(document).ready(function () {
$('[data-toggle="btn-input"]').each(function () {
var $this = $(this);
var $input = $($this.data('target'));
var name = $this.data('name');
var active = false; // Maybe check button state instead
$this.on('click', function () {
active = !active;
if (active) $input.attr('name', name).val($this.val());
else $input.removeAttr('name').removeAttr('value');
$this.button('toggle');
});
});
});
conclusion
This works, it's a lot less hassle, and it's just as easy to put into effect. The downside to this is in my form submit result I have .html?ID1=ID1&ID2=ID2 when I was hoping for .html?users=ID1+ID2+ID3
I have a form for Tags that is working OK, with some server validation, I would like to add a Jquery to submit the content without refreshing:
<form method="post" action="tags">
<div>
<input type="hidden" name="id" value="getId()" />
<input type="text" name="tag" />
<input type="submit" value="Add" name="add" />
</div>
</form>
Any advice will be highly appreciated.
Check out the jQuery Form Plugin. Using it, you can submit a form without reloading the page like so:
<form id="aForm" action="target.php" method="post>
...
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#aForm").ajaxForm();
});
</script>
The ajaxForm() function also supports all options (such as a callback function) that can be passed to the standard jQuery $.ajax function.
$(document).ready(function() {
$(form).submit( function() { // could use $(#submit).on('click', function(){ as well
$.ajax({
url: 'yourposturl',
data: $(form).serialize(),
Success: function() {
alert('ok');
}
}); //end ajax
return false;
}); //end submit()
});
Should take all form vars , serialize them so the server can receive, the return false is so page doesnt refresh on submit (stops propagation and default)
Add the JQuery javascript library
Turn the submit into a button
<button id="submitbutton" >Add</button>
Add ids to your inputs
<input type="text" id="tag" name="tag" />
And add the jquery to the click for the button ...
<script type="text/javascript">
$(document).ready(function() {
$("#submitbutton").button().click(function(){
$.post("tags.php",{id: $("#id").val(), tag: $("#tag").val()});
});
});
</script>
<form method="post" action="tags">
<div>
<input type="hidden" name="id" value="getId()" />
<input type="text" name="tag" />
<input class="button" type="button" value="Add" name="add" />
</div>
</form>
$(function(){
$('.button').click(function(){
var data = $('form').serializeToObject();
$.post('tags.php', data);
});
});
// jQuery Extension to serialize a selector's elements to an object
$.fn.serializeToObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};