I am having some issues with this project that I am working on.
I have a list of different checkboxes which are records pulled from a database using PHP.
Now, when I click on one of these checkboxes I want that option to be displayed somewhere else somehow. I've been trying to get it to work with jQuery, but I'm not that experienced with it, so there's not really that much I can do.
It is actually done by using AJAX. But if you know/want to know jQuery, you should know about AJAX in jQuery. In jQuery you have to call a function associated with click event of the particular id in checkbox. For Simplicity, let us consider each unique Id is given to each og the checkboxes then you can individually call a jQuery Click event to handle that.
<script>
$(function(){
$("#yourid").click(function() {
//do what you want to do here if checkbox "yourid" is clicked
});
$("#yournextid").click(function(){
//do what your next event is.
});
});
</script>
Here 'yourid' , 'yournextid' are id's of respective checkboxes
Keep a hidden variable to store the values of checked checkboxes.
As suggested by "cipher" mention the onclick event of the checkbox to a javascript function. Pass the checkbox object as argument.
In the function check if the checkbox is checked or not checked. If checked, then add the value of the checkbox to the hidden variable. If it is not checked, then remove the value from the hidden variable, incase it was checked before.
This way you always have the list of checked checkboxes.
I fixed the issue I was having.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('.checkbox').change(function(event){
checked_value = $(this).val();
if(this.checked)
{
$("#content").append("<div id='" + checked_value +"'>New value: " + checked_value + "</div>");
}
if( !this.checked )
{
$("#" + checked_value).remove();
}
});
$('#checkall').change(function(){
$('.checkbox').attr('checked',$(this).attr('checked'))
});
});
</script>
</head>
<body>
<input type="checkbox" id="cb1" class="checkbox" value='a' />
<input type="checkbox" id="cb2" class="checkbox" value='b' />
<input type="checkbox" id="cb3" class="checkbox" value='c' />
<div id="content"></div>
</body>
</html>
The above code is what I am now using.
I do not remember where I got it from but credits to it's respective owner(s).
Related
My if(isset) validation is returning false after I have submitted the form through jQuery ,however works fine when done without jquery. Reason I am using jQuery is because I need to submit multiple forms:
Button
<input class="btn btn-primary" type ="submit" id="myButton"
name="create_record" value="Submit 1">
jQuery:
<script>
$(document).ready(function () {
$("#myButton").click(function (event) {
event.preventDefault();
$("#form1").submit();
// $("#form2").submit();
});
});
</script>
PHP
<?php
if(isset($_POST['create_record'])){
$ecode = $_POST['ecode'];
$ename = $_POST['ename'];
$date = $_POST['date'];
$jobRole = $_POST['jobRole'];
}else{
echo "did not receive anything";
}
?>
Always getting "did not receive anything" . Can someone please help.
The submit button value only gets sent if the form is submitted in the traditional way by a button click. Since you are submitting the form via javascript, you'll need to explicitly include the submit button's value or validate your post data in some other way. If you need the value of the specific button that was clicked, something like this should work:
$("#myButton").click(function (event) {
event.preventDefault();
var el = '<input type="hidden" name="' + $(this).prop('name') + '" value="' + $(this).val() + '">';
$("#form1").append(el).submit();
});
As for your objective of submitting multiple forms at once, I believe it's impossible without using ajax as discussed here. If you need guidance on how to do that, better to open a new question.
Your code, isset($_POST['create_record']) maybe false or it didn't receive any values. If your query is only in one PHP file together with your jQuery, you need to check first your algorithm or use var_dump() for testing. Second, If it didn't work, make an alternative solution for it. Do the proper HTML code when using form or make another PHP file for receiving post purpose only.
<form action="directory_to_another_file" method="POST">
<!-- SOME INPUTS HERE -->
<input type="submit" value="Submit 1" name="create_record">
</form>
Try to test all of your codes.
You have to set form method as "POST" type and if you want to receive the form data in same page then empty the "action" key otherwise give the target link.
<?php
if(isset($_POST['create_record'])){
print_r($_POST);
}
?>
<form action="" method="POST" id="form1">
<input type="text" name="create_record" value="Submit 1"/>
</form>
Submit
<script>
$(function(){
$("#myButton").click(function (event) {
event.preventDefault();
$("#form1").submit();
});
})
</script>
Let me know if it's work for you.
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>
What I want to do is simple in words but I have no idea how to actually do it.
I have a Div ID/Class given to a container in an HTML file.
Now I want to add a checkbox or button in a php file which can hide and show the div element on HTML file.
What I want to do:
Normally vislble to everyone.
I checked hide open and clicked submit.
Remove the container or change the visibility to none.
If i understood you right try this :
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
just change buttons to checkbox, and do some checking, if checkbox is checked make hide else show
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#showHide').change(function(){
var c = this.checked ? $("p").show() : $("p").hide();
});
});
</script>
<p>If you click on the "Hide" button, I will disappear.</p>
<input type="checkbox" id="showHide" name="showHide" value="Show">Check it
Use this Javascript (you don't have to use Jquery):
<script type="text/javascript">
function showHide(thediv){
id = document.getElementById(thediv).style;
id.display = (id.display != 'inline')? 'inline' : 'none';
}
</script>
Then define the div that you want to hide:
<div style="display:none" id="my_div">
Hello World or any other HTML
</div>
Now - set your radio button some where in your code, and trigger the show script upon click:
<input type="radio" onclick="showHide('my_div')" />
If you want the div to be shown as default, change to
<div style="display:inline" id="my_div">
Or just completely remove the style.
I want to update marks of a particular student in particular subject out of eight subjects.
My question is how to identify that a particular text box value has been changed after clicking submit button, then the updation task is forwarded to the update.php. Please give me your valuable answer. Thanks in advance.
Since your button click event is occured on client side, you can identify it by client side scripting.
<script lang='javascript'>
$(document).ready(function(){
$('#button_id').click(function(){
/* Do whatever you want to do right here*/
});
});
</script>
For identifying the change on text box after clicking submit button, first change the input type from submit to button as as soon as you click submit, it redirects the page.
<input type='button' onClick='your_function()' id='btn_submit' name='btn_submit' />
<input type='text' id='text_box' name='text_box' onchange='$('#flag_value_changes').val('1')' />
<input type='hidden' id='flag_value_changes' name='flag_value_changes' />
<script lang='javascript'>
function your_function()
{
flag_value_changes = $('#flag_value_changes').val();
if(flag_value_changes == 1)
alert('Value has been changed');
else
alert('Value has not been changed');
}
</script>
the scripting language can help you in this situation.use javascript for the event of the submit button click.
do whatever you needed in that event..happy coding :)
As stated by hsuk. You can do it on the client side using javascript.
I've provided an example using textarea and no inline javascript.
HTML
<div>
<textarea id= "math">Math</textarea>
<textarea id= "english">English</textarea>
<textarea id= "french">French</textarea>
<textarea id= "spanish">Spanish</textarea>
<input type="submit" value="submit"/>
</div>
And the following javascript(Using Jquery)
$(document).ready(function(){
var initialValues = [];
var i = 0;
//Gets values on load
$("div textarea").each(function(){
initialValues[i] = this.id+" had "+$(this).val();
i++;
});
//Checks values on click
$("input").click(function(){
i = 0;
$("div textarea").each(function(){
value = initialValues[i].split(" ");
if($(this).val() != value[2]){
alert(value[0] + " was Changed.");
}
i++;
});
});
});
DEMO
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);
}
}
});