I have an inline frame within a form. The inline frame actually contains the form element which is generated programatically (a radio which holds a value). How can I retrieve that value hold by the radio from the page which contains that inline frame. Any idea? thanks for reading
What MvanGeest is suggesting is for you to use javascript to transfer values of the radio buttons to a hidden field in your main page form
so for each radio button you would have onclick="valueSet(this.value)"
and in the function valueSet (that you define in the iframe) you would set the value of the hidden form field
function valueSet(radioValue){
window.parent.document.forms["nameOfYourForm"].elements["nameOfHiddenElement"].value = radioValue;
}
and in the main window, in the FORM you have
<input type="hidden" name="nameOfHiddenElement" value="" />
and you can set the default value for it as well
Don't forget to give your form a name attribute and use that name in the function where it references forms["nameOfYourForm"]
Does that make sense for your project? Or am I totally off base here?
This site explains about cross-frame access in JavaScript: http://www.west-wind.com/Weblog/posts/589454.aspx. Be aware that the same-origin policy is enforced; in other words, you cannot access a frame which contains a page loaded from another domain.
Related
I have a form which I want to validate with PHP. The poster upload from Uploadcare's widget is part of that form.
Sometimes users have to go backward in the form to fix stuff - an incorrect email, etc. I want to have the chosen upload file persist within that form.
This works when the back button is clicked, but I cant rely on that. I'm using PHP POST variables to reload and repopulate the form.
My question: can I use a POST variables with the Uploadcare input button to make it "remember" and reload the chosen picture the user has previously uploaded?
My current code.
<input type="hidden"
role="uploadcare-uploader"
data-preview-step="true"
data images-only="true"
name="adposter"
style="display: inline-block;" />
Is it possible to do something like:
<input type="hidden"
role="uploadcare-uploader"
data-preview-step="true"
data-images-only="true"
name="adposter"
style="display: inline-block;"
value="<?php print isset($_POST["adposter"]) ? htmlspecialchars($_POST["adposter"]) : ""; ?>"
/>
As one would with other fields? Obviously the Uploadcare input widget has its own way of doing things, hence the query.
As the documentation says:
The value of [role=uploadcare-uploader] input is either empty or CDN link with file UUID.
If you externally set the value of the input and trigger the DOM change event, it will be reflected in the widget. For example, setting it to a file UUID or a CDN link will show that file as uploaded in the widget. You can do this on a live widget or even before it's actually loaded.
So your second snippet should work correctly.
You may also want to know the way to set widget's value via JS:
var widget = uploadcare.Widget('[role=uploadcare-uploader]');
widget.value("https://ucarecdn.com/e8ebfe20-8c11-4a94-9b40-52ecad7d8d1a/billmurray.jpg");
Sorted this. It can be done with Value. Great!
https://uploadcare.com/documentation/widget/#input-value
You can use $_POST to pass on variables from the one form to another just as you described using hidden fields. But this is not very efficient and as you write the information back to the client, they could change that.
A better way to save these kind of variables is to make use of $_SESSION:
The session support allows you to store data between requests in the
$_SESSION superglobal array. When a visitor accesses your site, PHP
will check automatically (if session.auto_start is set to 1) or on
your request (explicitly through session_start()) whether a specific
session id has been sent with the request. If this is the case, the
prior saved environment is recreated.
http://php.net/manual/en/intro.session.php
So after the image was uploaded you store the image id in a $_SESSION:
session_start();
$_SESSION['imageid'] = 123456;
Then even forms later you can access the imageid simply by using the $_SESSION variable again:
session_start();
var_dump($_SESSION['imageid']);
int 123456
See the php documentation for more information on sessions: http://php.net/manual/en/book.session.php
I want to send the properties of HTML elements as data via POST, for example whether an element is visible or not?
You cannot do it with PHP and HTML alone, since the HTML form would only post a form input's name. You would need to add some JavaScript, which at the time the form is submitted, would iterate over all its inputs and modify their values to include the attribute values as well.
Example:
yourform.onbeforesubmit = function() {
// Loop over form elements and append -visible or -hidden to its value based on CSS style
// jQuery selectors like .is(":visisble") would help a lot here.
// This is just a basic example though - it would require an explicit visibility CSS rule on each
// input element...
for (var i=0; i<yourform.elements.length; i++) {
yourform.elements[i].value = += "-" + yourform.elements[i].style.visibility;
}
}
Another method would be rather than to modify the values of the inputs themselves, keep a hidden input for each visible user input and set the attributes as the value to the hidden input rather than the visible input.
You can not do this with PHP. You will need to use Javascript to determine this information and then either send an Ajax Request or add this information to an existing form.
To elaborate a bit more: PHP is executed Server Side and then sent to the Client (Browser). The Server is not aware of the state of the HTML Elements in the Browser.
As far as i can tell you have a form that is submitted anyway? So add a piece of javascript which is called before the form is submitted (onsubmit property of the form) and have it read out the status of the elements (visible, hidden, ...) and set this information to some hidden form fields.
Make sure the javascript that is called before the form is submitted is returning true, otherwise the action gets cancelled.
In ajax.
Try Prototype Framework, it is really easy to use!
http://prototypejs.org/api/ajax/request
If you want to do that I suppose you will have to create some hidden fields and javascript that would fill them in with information depending on your elements attributes. As far as I know there is no other way.
You have to define your data definition standard first: what do you want to store, and under what name.
then, imho you have to serialize the result and send it through POST, for finally unserializing it once at the server.
Use JSON serialization for an effective way of proceeding.
Include Hidden inputs using PHP like the following:
<input type="hidden" id="hidden1" name="hidden1" value="<?php if(condition) echo "default"; else echo "default";?>">
This default value can be set by PHP during page load, for transferring extra hidden data from one page load to another. But can also be modified by javascript after page load:
<script type="text/javascript">
document.getElementById("hidden1").value="true";
</script>
Note: PHP can change the value of any hidden or non-hidden element only during the next page load. It doesn't have any control over the HTML it sends to the browser. This is why you need Javascript(Client side scripting).
I would like to be able to get as many properties from a button to show as I can.
The button:
<input name="Accept" type="submit" class="button" id="Accept" value="Accept" />
The button code:
if(isset($_POST['Accept'])){
//show button properties here
}
What I would like it to show on button press:
name: Accept
type: submit
class: button
id: Accept
value: Accept
and what ever else can be shown
Thank you in advanced.
One possible way, without using javascript would be to store a copy of the data in the name of the element:
<input name="Accept" type="submit" class="button" id="Accept" value="Accept" />
becomes:
<input name="Accept.submit.button.Accept" type="submit" class="button" id="Accept" value="Accept" />
You can get the value from your $_POST array. For the rest of the properties, just split up the key of the element using explode().
There is no way how to get properties of HTML element by normal HTML behavior - but you can use JavaScript function that handles "onSubmit" form event by which you can send all you need.
There is no way to submit properties of an input besides the name and value, however you can have hidden inputs on the form with whatever information you want, and you can even create them or populate them dynamically in the button's onclick even or the form's onsubmit event.
As another option I would stuff in the information in the button's value in JSON form, since the button's value usually anyway serves no purpose.
And if you are really out for ideas then you can stuff the info in the query string of the url in the action attribute of the form, and then get the info by checking the GET array (however if the form method is get instead of post then the values might get overwritten!)
But if yout problem is only that you need a way to distinguish between many buttons, then just have a different name or value for each of them, and this is probably the only reason why buttons have names and values.
Regarding andrejd's answer please note that while you can use the onSubmit function to to submit with Ajax and then return false to cancel the default submit, please note that the following problems exist with that approach:
1) That the onSubmit function doesn't know which button was pressed, however you can instead use the button's onClick event, but you will have to bind to every submit button on the form (you can do this much easier with jquery etc.)
2) Since Ajax does not affect the page content so ypu will refresh it on your own or navigate the page on your own, the latter can be done using "location.href"
3) If you are submitting files you will have a hard time doing it with ajax, you can try the use the jquery fileupload plugin.
4) Ajax is restricted to the same origin (something tgat form submittion isn't), you can try to workaround using JSONP.
5) Ajax will not work if the client doesn't have JavaScript (such as some mobile phones or some text browsers such as linux browsers) or has disabled JavaScript or is using an older browser, and in general it is not recommended to rely solely on Ajax but instead at least provide an alternative for these cases.
For problems 2-4 you can aldo solve them by having the Ajax just the extra content and then return true to let the default submission submit the form.
I'm using Codeigniter and wants to know how I can make a checkbox that submits the form on click?
Secondly, this checkbox will be one of several checkboxes that will act as a filter like products > $20, products < $30, how do i pass it in the url? I'm thinking /1+2+3
Haven't worked with Codeigniter much, but I can answer how to make the form submit on checking the checkbox with JS:
<form id="something">
<input type="checkbox" name="foo" id="foo" value="yes" />
</form>
<script type="text/javascript">
$("#foo").click(function() {
if ($(this).is(":checked"))
$("#something").submit();
});
</script>
The javascript questions seem to have been solved already; let's step to the codeigniter ones.
You can pass the url in one of those two ways.
Idiomatic but limited: as /1/2/3/4/etc. The controller function handling that url could both use func_get_args to read them or, if you already know how many parameters will be passed at the most, give a default value of null to all non-necessary paramenters;
Not Codeigniterish but seriously better for search parameters: enable the query strings on your config file, pass arguments as you would normally with GET (min=2&max=3 and so on) and get their value with CI's input class ($min = $this->input->get('min')).
This has nothing to do with PHP, nor CodeIgniter. The solution is to submit the form in the onclick event of the element.
<input type="checkbox" name="filterx" onclick="document.forms[0].submit()" />
You can use the OnSubmit event of the form to nicely format the url, if you like.
To do this, you can
get the values of all desired elements,
build a nice url from it,
set the url using location.href = yourniceurl,
cancel the regular submit by returning false.
Note that both solutions require javascript to be enabled. So it is a good thing to have other means of submitting the form (submit button). Don't rely on submitting by pressing Enter. Opera will use the Enter key for toggling the checkbox instead of submitting the form.
If you like, you can hide the submit button using Javascript, that way, users having Javascript will have their form auto-submitted, while users without can use the button.
You will need to make sure that your server side form validator not only accepts the nice url, but the ugly url (which posts values like ?filterx=on) too.
Im looking for a way to have a form in cakephp that the user can add and remove form fields before submitting, After having a look around and asking on the cake IRC the answer seems to be to use Jquery but after hours of looking around i cannot work out how to do it.
The one example i have of this in cake i found at - http://www.mail-archive.com/cake-php#googlegroups.com/msg61061.html but after my best efforts i cannot get this code to work correctly ( i think its calling controllers / models that the doesn't list in the example)
I also found a straight jquery example (http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/) which does what i would like my form to do but i cannot work out how to use the cakephp form helper with it to get it working correctly and to get the naming correct. (obviously the $form helper is php so i cant generate anything with that after the browser has loaded).
I an new to cake and have never used jQuery and i am absolutely stumped with how to do this so if anyone has a cakephp example they have working or can point me in the right direction of what i need to complete this it would be very much appreciated.
Thanks in advance
I would take the straight jquery route, personally. I suppose you could have PHP generate the code for jquery to insert (that way you could use the form helper), but it adds complexity without gaining anything.
Since the form helper just generates html, take a look at the html you want generated. Suppose you want something to "add another field", that when clicked, will add another field in the html. Your html to be added will be something like:
<input type="text" name="data[User][field][0]" />
Now, to use jquery to insert it, I'd do something like binding the function add_field to the click event on the link.
$(document).ready( function() {
$("#link_id").click( 'add_field' );
var field_count = 1;
} );
function add_field()
{
var f = $("#div_addfield");
f.append( '<input type="text" name="data[User][field][' + field_count + ']" />' );
field_count++;
}
Of course, if a user leaves this page w/o submitting and returns, they lose their progress, but I think this is about the basics of what you're trying to accomplish.
This was my approach to remove elements:
In the view, I had this:
echo $form->input('extrapicture1uploaddeleted', array('value' => 0));
The logic I followed was that value 0 meant, not deleted yet, and value 1 meant deleted, following a boolean logic.
That was a regular input element but with CSS I used the 'display: none' property because I did not want users to see that in the form. Then what I did was that then users clicked the "Delete" button to remove an input element to upload a picture, there was a confirmation message, and when confirming, the value of the input element hidden with CSS would change from 0 to 1:
$("#deleteextrapicture1").click(
function() {
if (confirm('Do you want to delete this picture?')) {
$('#extrapicture1upload').hide();
// This is for an input element that contains a boolean value where 0 means not deleted, and 1 means deleted.
$('#DealExtrapicture1uploaddeleted').attr('value', '1');
}
// This is used so that the link does not attempt to take users to another URL when clicked.
return false;
}
);
In the controller, the condition $this->data['Deal']['extrapicture1uploaddeleted']!='1' means that extra picture 1 has not been deleted (deleting the upload button with JavaScript). $this->data['Deal']['extrapicture1uploaddeleted']=='1' means that the picture was deleted.
I tried to use an input hidden element and change its value with JavaScript the way I explained above, but I was getting a blackhole error from CakePHP Security. Apparently it was not allowing me to change the value of input elements with JavaScript and then submit the form. But when I used regular input elements (not hidden), I could change their values with JavaScript and submit the form without problems. My approach was to use regular input elements and hide them with CSS, since using input hidden elements was throwing the blackhole error when changing their values with JavaScript and then submitting the form.
Hopefully the way I did it could give some light as a possible approach to remove form fields in CakePHP using JavaScript.