I have several forms inside DIVS on my page.
I have one form which contains a text field and is always visible, and this is where the user hits 'enter' key and submits...
I want to get values selected in the other forms on the page, and submit them all together, not one by one, so that my PHP code can use "ALL VALUES" and search a mysql database...
Is this possible by javascript using the "<form onsubmit>" to call a javascript?
any codes would be appreciated...
thanks
Without some Javascript hocus-pocus, you can't. One form = one request.
You can do it with JS, and you have a few options. The easiest would be to loop through all the forms on the page, and basically duplicate all the input fields and values into one form and then submit that combined form.
With jQuery it'd go something like this:
$("form").submit(function() {
combineAndSendForms();
return false; // prevent default action
});
function combineAndSendForms() {
var $newForm = $("<form></form>") // our new form.
.attr({method : "POST", action : ""}) // customise as required
;
$(":input:not(:submit, :button)").each(function() { // grab all the useful inputs
$newForm.append($("<input type=\"hidden\" />") // create a new hidden field
.attr('name', this.name) // with the same name (watch out for duplicates!)
.val($(this).val()) // and the same value
);
});
$newForm
.appendTo(document.body) // not sure if this is needed?
.submit() // submit the form
;
}
You need to make a script which will collect the data from the forms, and inject them into the only form that is visible. Only one form will be submitted, you can not submit multiple forms.
You can create multiple hidden fields, or you can construct a single hidden field in that form, then use javascript to collect all the data from the various forms, then create a JSON string, set the value of the hidden one, and submit.
Edit:
Say you have a single hidden input like this:
<input type='hidden' name='hiddenfield' id='hiddenfield' />
you could use JQuery to do this:
$('#hiddenfield').val('myvalue');
To get the value from other forms is as simple as calling $('#elementid').val()
before form submission. To use JQuery, go to the jquery website, download the library, and link it (follow their installation guide).
you can add an onsubmit to that form, and then collect other values with javascript:
<input type="hidden" name="hidden1" id="hidden1" />
<input type="hidden" name="hidden2" id="hidden2" />
<script>
document.getElementById("the_form").onsubmit = function(){
document.getElementById("hidden1").value = document.getElementById("other-field1").value;
document.getElementById("hidden2").value = document.getElementById("other-field2").value;
};
</script>
Wrap the whole Page in your form tag (if possible) and use the server side code, along w/ Javascript, to handle your business rule validation.
kind of a hack solution, but it should minimize the necessity for Javascript "hacks" depending on your skill level with javascript.
Related
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 have a large page/form divided as tabs, now the requirement is such that, each tab should have a save button, which will submit the fields within that tab. And there should also be a global save button which saves the data from all tabs.
My idea of doing this was, making separate forms for each tab, and use jquery serialize to post them, but some of the forms have image upload and ckeditor fields which do not play well with jquery.
Any idea,about what would be the best way to solve this?
A low impact appoarch is to leave your 3 forms as you have them. And then attach your a "form merge " to the submit element of the global form:
For the HTML:
<form id="form1"> ... </form>
<form id="form2"> ... </form>
<form id="global"></form>
JS:
$("#global").submit(function(e){
var $ch1 = $("#form1").children();
var $ch2 = $("#form2").children();
$(this).append($ch1).append($ch2);
//Let the form get submitted...
});
With Using jQuery, You can submit each form one by one
$("#globalsubmit").submit(function(e){
//simply submit all the forms one by one
$("#form1").submit();
$("#form2").submit();
return false;
});
Or Find all the form and submit at once
$("#globalsubmit").submit(function(e){
$("form").each(function() { $(this).submit(); });
return false;
});
Without jQuery. Here are the few steps you might want to follow.
Submit the form, do not process the data, but store in the session.
Collect all the data from all the form in the session and at the end Submit the data as a bulk.
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.
In PHP, in a particular CMS I am using a custom field, which works like google suggest.
As in, for each letter I type an SQL query is performed and matching records are displayed. When clicking on a record it fills the field with that record.
I am fairly certain this is all done with JavaScript.
I need to know how I can access the resultant content of that field, with the text placed through JS, before it is submitted so I can explode() it.
The CMS I am using is using mootools, so a solution relying on mootools would be ideal.
(This answer assumes that you have control over the markup of your forms (the form that requires a string "explosion" before submit) and/or you feel comfortable tinkering with whatever plugins you're using.)
first, make sure that you aren't submitting your form using an actual submit button (). We'll need to submit the form using javascript after fiddling with the field's contents.
next, make sure that your input box (the one you're grabbing text from) and your hidden inputs have unique ids. This will make it easier to query the DOM for the data we need.
Inside your form, in place of a "real" submit button, create a form button:
<form action="something.php" name="myform">
<input type="hidden" id="hiddenItem">
// SOME STUFF
<input type="text" id="autocomplete_field" value="whatever"/>
// SOME OTHER STUFF
<input type="button" value="Submit" onclick="processForm(this)"/>
</form>
Then, write a javascript function to process the string and submit the form:
processForm = function(el){
text = $('autocomplete_field').get('value');
// Lets assume the strings separates words (what you're exploding apart) using spaces
// something like 'DOGS CATS BIRDS PETS'
var array = text.split(' ');
// returns ['DOGS','CATS','BIRDS','PETS']
$('hiddenItem').set('value',array[0]);
// #hiddenItem now has the value 'dogs'
//SUBMIT THE FORM
el.getParent('form').submit();
};
Hope this helps!
You could try to use JS to send the field on some event (onkeyup?) to your php script. After it does it's part, store the result as a session variable and you can retrieve that later.
Try using jquery's get function.
Was that your question?