I would like to create a simple form with form field/component duplication feature.
I searched all over the web. But i couldn't find any proper tutorial.
For example my form fields contains the following.
1. Title
2. Email
3a. Image Name
3b. Image Description
3c. Image file
3a,3b,3c are a group here. So lets call it as "image group".
I would like to have a duplicate link below that group where my users click it and duplicate as many as they want.
Here is an example of what i'm asking.
Ps: I dont want to use jformer. Because it loads all the script and it taking to much time to load the page. Thats why i'm asking this question.
Thanks
All you need to do is write a JavaScript function that will append a new set of form elements to a given container. Something like this:
<div id="imageforms">
<fieldset id="firstimage">
<input type="text" name="imagenames[]" />
<textarea name="imagedescriptions[]"></textarea>
<input type="file" name="imagefiles[]" />
</fieldset>
</div>
add another image
And then you need the JavaScript function:
function addAdditionalImage() {
$('#imageforms').append($('#firstimage').clone());
}
The most interesting part here is the usage of name="xxx[]" which tells PHP to create an array from the form values.
since you tagged your question as being jquery related you should take a look at the clone method here: http://api.jquery.com/clone/
you need to group the fields that can be duplicated (let's say enclose them in a span) so that you would have a selector for all of them, clone and then use methods like append or prepend to "inject" the same elements again
you should use arrays for names if you want to process those values on the server side (input type="text" name="image_name[]")
Related
For example I have this line of html within form tags.
<form action="getData.php" method="post">
<div id="imadiv" value="2"></div>
</form>
How would I retrieve the value of the 'value' attribute so that I can use fwrite() to put it on a document using PHP?
Are you parsing html files that have this structure and need to access the value in order to create another document?
If not, then your form handler will have access to the value of "imadiv" (in this example) when you make your post.
if you were do do something like this
<form action="getData.php" method="post">
<input name="inputname" value="2"/>
</form>
and submit that form getData.php could do something like
$valueofinput = $_POST['inputname']
Giving your input tags a name attribute it important to reading the values out of the post payload.
If you're parsing HTML files with forms then I would suggest looking at XML/HTML parsing libraries that will help you access the html as a object node structure.
If you are doing something a little more complex where you want to validate the the data as the use enters, then you'll need to implement an ajax solution. However, keep in mind that connecting the post to key events can get messy as you could end up sending more requests than you originally wanted to if not implemented correctly.
I would like for a user to be able to input data in a text field on my website. WITH this data I would like for them to be able manipulate it.
For example:
Let's say someone needs all the letters in a paragraph capitalized and on my website I have a PHP script that does just that. How do I create a means for them to use my script?
Like so:
paste paragraph into left text field
press 'action button' or in this example 'capitalize letters' button
text in left text field gets ran through the script and becomes all capitalized
text now appears in right text field
A better way to ask this I guess is how do I connect the users input with the script and display the output once it's been ran?
You have to put your fields in a form in the HTML file, for example like this:
<form method="post" action="script_that_does_the_action.php">
Left paragraph: <input type="text" id="leftP" name="leftP"><br>
Right paragraph: <input type="text" id="rightP" name="rightP">
</form>
and then in your script that does all of the action, you can fetch the user input like this:
$userInput = $_POST['leftP'];
//do the capitalization now here
//store the result somehow. Maybe using sessions like this: $_SESSION["result"];
//then you have to redirect the page back to where the text fields are for example using header("location: ");
and now that you are back in the index page (if I may call it like that), paste the resulting value to the right field:
<input type="text" id="rightP" name="rightP" value="<?php echo $_SESSION["result"]; ?>">
Be sure that both of your files (the action script and index file) are in .php format, and that you start the session with session_start();
That's only one example...the most basic one. If you want to make it in the proper way, I'd also suggest using javascript :)
I have found an open source PHP script that uses a select menu to choose the language.
In the code session makes use of a loop to fill in the select menu, as above...
$la = 0;
foreach($trans['languages'] as $short=>$langname) {
$params['LANGSEL'][$la]['LANG_SHORT'] = $short;
$params['LANGSEL'][$la]['LANG_LONG'] = $langname;
$la++;
}
In the php template creates the select menu like that...
<td><select class="select" name="lang"><#FOR LANGSEL#>
<option value="<#LANG_SHORT#>"><#LANG_LONG#></option>
<#/FOR LANGSEL#></select></td>
So this code works fine but i find it kinda ugly so i am trying to make an image input instead
So i thought something like that would work..
<input type="image" name="lang" value="http://localhost/index.php?lang=en" src=" <#IMAGES_DIRECTORY#>/english.png"></td>
<input type="image" name="lang" value="http://localhost/index.php?lang=it" src=" <#IMAGES_DIRECTORY#>/italian.png"></td>
But nothing changes, the page always shows up in italian that is the default language..
Thanks in advance from a newbie that is struggling to learn some html and php.
The value of your name field should be <#LANG_SHORT#>. You don't say what it looks like after being processed but I'm pretty sure it's something like en or it. However, you provide a URL. You also prepend several white spaces to the image's URL.
This will probably work:
<input type="image" name="lang" value="<#LANG_SHORT#>" src="<#IMAGES_DIRECTORY#>/english.png"></td>
Remember to test it in Internet Explorer. It's traditionally had several problem with <input type="image"> elements.
The problem here is that you have two images with different names, whereas you need to only have one form element, called name, whose value is the correct <#LANG_SHORT#> string. In this regard, select and radio form elements are perfectly suited to the job, whereas inputs are not.
It also seems unlikely to me that the form element really has a value of http://localhost/index.php?lang=en. Isn't that merely the URL that results from changing the language? It seems more likely that the proper value for your form fields is just en/it.
Ultimately, I reckon you're going to need a hidden form field, and some Javascript on your images to set that field's value when required. And be aware that the usability/accessibility of your site just went from [potentially] high to [definitely] very low.
I am using jQuery auto-complete. I have download this script from http://code.google.com/p/jquery-autocomplete/. I want to use this on multiple fields. Please help me thanks.
$("#input").autocomplete("samefile.php");
$("#input").autocomplete("samefile.php");
thanks
the hash mark means you are using IDs to select elements. there should however never be more than one element in your page with the same ID. for instance,
<input id="test" /><input id="test" />
is invalid HTML.
The second problem, is that it appears you are trying to find tag names, which means you should simply leave out the hash mark from your code, and JQuery will apply your methods to all of the tags with that tag name,
$("input").autocomplete("samefile.php");
will apply autocomplete to all input tags on your page.
Third, I would use classes instead of tag names incase you ever want to have an input on your page that does not use the same auto complete. So your html would look like this,
<input class="auto" /><input class="auto" />
and your JQuery would look like this.
$(".auto").autocomplete("samefile.php);
I also wonder where you are calling your JQuery from?
You should use a less specific selector to mark multiple fields as autocomplete in one statement.
Maybe you can assign a class of type ".autocomplete" and then use that.
<input type=textbox" name="txt1" class="autocomplete"/>
<input type=textbox" name="txt2" class="autocomplete"/>
$(".autocomplete").autocomplete("samefile.php");
$('#images_upload_add').click(function(){
$('.images_upload:last').after($('.images_upload:last').clone().find('input[type=file]').val('').end());
});
using this code to append file input's does not upload the file in firefox.
also
$('#image_server_add input[type=button]').click(function(){
var select = $(this).siblings('select').find(':selected');
if(select.val()){
$('#image_server_add').before('<tr class="images_selection"><td><input type="button" value="Delete"></td><td class="main">'+select.html()+'<input type="hidden" value="'+select.html()+'" name="images_server[]"/></td></tr>');
}
})
also does not upload the values to the $_POST
I can't find anything to say why this wouldn't work in the documentation, this works in IE but not it Firefox/WebKit
Why wouldn't these examples correctly upload the form values?
Bottom line the markup on the page was mangled.
The form was in a table based layout, not by my choice, and the form declaration was inside a tr.
I moved the form declaration to a parent td of the form inputs and now it works.
This is an interesting result considering the rendering engine will correctly submit inputs that are improperly placed, but attempting to add those inputs using jQuery/javascript? into the same place will not work in Firefox/WebKit.
I imagine this has to do with the dom manipulation that javascript does and how it may be more strict about the block level element requirements.
Any more notes/conjectures about my findings would be appreciated.
Are you having the same problem if you create a new input rather than cloning an existing one?
Are you changing the name of the cloned input to avoid name collisions or are you using an array style name (e.g. file[])?
What is the purpose of adding the markup of the selected option to a hidden input?
For fun, have you tried using .clone(true)?
Wow! Sometimes jQuery can actually be too dense to read. Would also help if we could see your markup.
Stab in the dark here because I'm guessing at what you're trying to do.
You can't programmatically enter a filename into a file field and it be uploaded to the server. That would be dangerous.
Perhaps I'm barking up the wrong tree?
Maybe rather than adding the element just as the form is submitted, put the element in, but with default values.
Then when the button is clicked, populate that element with the right value.
I just say that because by the time you click on the submit, it might be too late for the added element to be submitted along with the form.
I got to this section from google searching a similar problem.
To me, I was able to fix it by taking a step back at the problem -
in a example form:
<table>
<form method="post">
<tr>some content <input type="text" name="test"> </tr>
</form>
</table>
This will work in Internet explorer for some reason, but it is actually invalid html.
Move the form tags to outside the table, like so:
<form method="post">
<table>
<tr>some content <input type="text" name="test"> </tr>
</table>
</form>
And it will then work.
The input's will work fine (even dynamicly) this way, I was having a lot of trouble where a form would work, until you inserted more inputs or form elements - only the original elements would submit, which was very hard to track.