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);
}
}
});
Related
This site has been really helpful while writing this program. Unfortunately, I hit a snag at some point, and have boiled the problem down quite a bit since. At this point, I am looking at three files, a .html that contains a form, a .js that contains my event handlers, and a .php that receives my post variables and contains new content for the form.
I am getting the post data from the initial text input just fine. The new form content is set as I would expect. However, after this form content is set to a new input of type button with a class of button, the post method in my button class handler is not setting post data on login.php as I expect it to.
Here is my code:
Contents of interface.html page:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="interface" action="login.php" method="post">
<input type="text" value="enter username here" name="user"/>
<button id="submit">submit</button>
</form>
<script src='events.js'></script>
</body>
</html>
Contents of events.js file:
$("#submit").click(function(){
$.post(
$("#interface").attr("action"),
$(":input").serialize(),
function(info){$("#interface").html(info);}
);
});
$(".button").click(function(){
var $this=$(this);
$.post(
$("#interface").attr("action"),
{data:$this.val()},
function(info){$("#interface").html(info);}
);
});
$("#interface").submit(function(){
return false;
});
Contents of login.php file:
<?php
if(isset($_POST['user'])){
echo '<input type="button" class="button" value="set data"/>';
}else if(isset($_POST['data'])){
echo 'data is set';
}
?>
You need to wait until the button exists to bind an event to it. Additionally, i'd switch from click to submit and drop the click event binding on .button completely.
//$("#submit").click(function () {
$("#interface").submit(function (e) {
e.preventDefault();
var $form = $(this), data = $form.serialize();
if ($form.find(".button").length && $form.find(".button").val() ) {
data = {data: $form.find(".button").val()};
}
$.post($form.attr("action"), data, function (info) {
$form.html(info);
});
});
//$("#interface").submit(function () {
// return false;
//});
Since the form is not being replaced, and the event is on the form, you no longer need to re-bind anything.
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 wrote an array to pass variables in the GET to a search page. The search page only has 4 fields but I'm only passing the most important variables, first name and last. Here is the array:
<?php echo "<td><a href='" . matry::base_to('test/trace', array('first'=>$patient->first , 'last' =>$patient->last)) . "'><ul class='controls'>
<li id='check_orders'><`span class='symbols'>L</span><span class='label'>Skip Trace</span></li>
</ul></a></td>";?>
When the page loads i'm just echoing the _GET to pre populate the first and last input fields on that page..
What I'm looking for is a script that will execute the search with the first and last name fields populated as that page loads automatically. Additionally, when the search is executed it's populating in an iframe. (forgot about that part)~!
I tried using:
<script>document.getElementById('stack').submit();</script>
<form action='http://xxxx.yyyyyyy.com/stuffhere' name='es' target="my_iframe" id="stack">
with no avail.
Your <script> is running before the <form> exists.
Move the <script> below the <form>.
You are calling the submit function before the form is even loaded on the page.
Place the script tag after the closing form tag or call submit on document ready or window onload.
<form id-"stack">
... form fields...
</form>
<script>document.getElementById('stack').submit();</script>
or
<script>$(function(){$('#stack').submit();})</script>
Please imagine this simple example:
<html>
<head>
<script type="text/javascript">
function body_onload() {
var form = document.getElementById('theform');
form.submit();
}
</script>
</head>
<body onload="body_onload()">
<form id="theform" action="action.php">
<input type="hidden" name="query" id="query" value="foo" />
</form>
</body>
</html>
It will submit the form after the page has loaded.
But are you really searching for a non AJAX solution?
Try this, been using this on a redirect page for a while. This of course needs to be below the from so it is run after the browser process the form.
<script type="text/javascript">
function send(o)
{
var f = document.getElementById("theForm");
f.submit();
}
send();
</script>
If you want to submit the form when the page loads you should change your code to this:
<script>window.onload = function(){ document.getElementById('stack').submit(); }</script>
However this will redirect the user (as if they have clicked a form submit button). To avoid this you will need to use AJAX (I recommend using jQuery to do this). See example below:
$(document).ready(function(e) {
var form_data = $("#form_id").serialize();
var form_url = $("#form_id").attr("action");
var form_method = $("#form_id").attr("method").toUpperCase();
$.ajax({
url: form_url,
type: form_method,
data: form_data,
cache: false
});
});
See this page for more info on using AJAX
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).
I am using the following code to effect an iframe that allows an ajax file upload on submit of the form without refresh.
This works as expected
window.onload=init;
function init() {
document.getElementById('form').onsubmit=function() {
document.getElementById('form').target = 'iframe';
}
}
What i would like to do is the same thing but 'onchange' of the file field input, i.e. when the user has chosen a file, to autmatically trigger the init() function and thus upload the file. I have tried with this code:
document.getElementById('file').onchange=function(){...
This doesn't work, and i'm completely stuck. Any ideas?
Many thanks
This should work for you
<script type="text/javascript">
window.onload = function() {
// add old fashioned but reliable event handler
document.getElementById('file_input').onchange = function() {
// submit the form that contains the target element
this.form.submit();
}
}
</script>
<iframe name="my_iframe"></iframe>
<form target="my_iframe"
action="your/file.ext"
method="post"
enctype="multipart/formdata">
<input type="file" name="my_file" id="file_input">
<!-- for no js users -->
<noscript>
<br/>
<input type="submit">
</noscript>
</form>
i think something like .live() will solve your issue hopefully, comment if you want more info on how to use it...
Give the file input element an id and:
$(document).ready(function(){
$(element).change(function(e){
fileInfo = e.currentTarget.files[0];
init();
});
});