Language selection using images in PHP - php

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.

Related

echo back $array[] elements to html form on Submit

After alot of digging around some very informative posts and info to try and find out how to solve this issue I thought I would ask around to see if anyone has any pointers.
I have an html form with various inputs (checkboxes, text boxes etc...). Each input section has its own submit or 'Upload' button. On Upload a php script is called and various bits of processing is done before data is sent over a pipe to a Python script for further stuff.
I am currently echoing back input variables to the form on submission so that the html page does not refresh (or should I say the inputted data is not lost to the users view) on an Upload event, however, I now have to do the same for a bunch of checkboxes and text boxes the values of which are stored in an array. The code I have written so far is as follows (I am new to both php and html so please excuse the inefficiency that I'm sure is obvious)
html/php
<margin>CH1</margin><input type="checkbox"name="ANout[]"value="AN1_OUT"
<?php if(in_array('AN1_OUT',$_POST['ANout']))echo'checked';?>>
Voltage<input type="text"size="5"name="ANout[]"
value="<?php $ANout[$i]=$_POST['ANout'];
if(!empty($ANout[$i]))echo"$ANout[$i]";?>">
<br>
The code above works fine for the checkboxes which happily remain after an Upload button is pressed but not for the array. When the Upload event occurs I simply get 'Array' written in the text box. I have tried existing code I have written to echo back other text input in the form (see below) and which works but these are for sole entries, not arrays. I have tried various configurations of syntax but I always seem to get the same result.
Working Code:
<margin>Duty Cyle</margin><input type="text"name="PWM1DC"size="3"
value="<?php $PWM1DC = $_POST['PWM1DC'];
if(!empty($PWM1DC))echo "PWM1DC";?>">
<br>
I'm sure it is something straightforward but I have been fiddling and staring at it for ages and can't seem to find the problem.
You are getting "Array", because you are trying to print out variable of type Array.
You probably want to give your fields separate names or indexes and do something like this:
<form method="post">
<input type="checkbox" name="ANout[1]" value="AN1_OUT"
<?php if(isset($_POST['ANout']) && in_array('AN1_OUT',$_POST['ANout']))echo'checked';?>>
Voltage<input type="text"size="5"name="ANout[2]"
value="<?php if(isset($_POST['ANout']) && !empty($_POST['ANout'][2])) echo $_POST['ANout'][2]; ?>">
<input type="submit" value="ok">
</form>
(Just added form tags, submit button and isset checks to show working example.)

How to set a value of input type after it was created

I have a basic question which I cant find an answer to.
i have an input text
I want to change the value by1 every time i click the button.
so, when I make a new soldier, i want it to be shown in the soldiers count.
I started programming in PhP recently.
In Java, command Im looking for would be some setText or something like that.
Here's the basic idea:
You specifically mentioned PHP so I'll give you a PHP example:
This is at the top of every page you want the form on...
<?php
session_start();
if(!isset($_SESSION['soldiers']))
$_SESSION['soldiers'] = 0;
include('form_process.php');
Then in form_process.php:
<?php
if(isset($_POST['soldiers']) && is_numeric($_POST['soldiers']))
{
if($_POST['soldiers'] == $_SESSION['soldiers'])
$_SESSION['soldiers'] ++;
else
$_SESSION['soldiers'] = $_POST['soldiers'];
}
?>
<form id="soldiers" action="" method="post">
<input type="text" name="soldiers" value="<?php echo $_SESSION['soldiers']; ?>">
<input type="submit" name="submit" value="submit">
</form>
I would do this in html and jquery personally, but you asked for PHP so here you go.
Why use sessions? Cause you said the form is on every page so you need to maintain a constant number throughout the session. Better to use a database so the number is constant across all people who may be viewing the site, but you didn't specify that in your question.
I myself don't know what value something like this could be in the state it is in. To me it sounds like you wanted a javascript type way to just update the html of an element on click, which makes a little more sense than incrementing an input value the user can just manually overwrite to begin with. But hey, the beauty of programming is it never needs to make sense to anybody per say, so long as you get whatever you want out of it.

url formatting when processing a form

So I have written this code for a form (search form) and it looks like this:
<form action="" method="get">
<select >
<option value="name">Client Name:</option>
<option value="email">Client Email:</option>
<option value="tnx_id">Transaction ID:</option>
<option value="amount">Amount:</option>
</select>
<input type="text" name="svalue" placeholder="Search"></input>
<input type="image" name="submit" src="img/search_btn.png"></input>
</form>
When user clicks Search I want the url to be formatted this way:
http://localhost/pp/index.php?search&name=haha
But instead I get:
http://localhost/pp/index.php?search=name&svalue=haha&submit.x=0&submit.y=0
I'm only having difficulties formating the url correctly because the rest of the
code is good, I cannot get rid of that &submit.x=0&submit.y=0 at the end of the
url too. Do you have any ideas guys?
Basically my desired url format gets the selected option (name, email, tnx_id, amount)
and assigns svalue's value to it.
I'd appreciated your help,
Thank you in advance,
Thanks.
That is how forms work. Each control gives a name=value pair in the submitted data.
You could hack it with JavaScript, but that becomes fragile. Give the <select> element a name and change the server side script so that it takes the two pieces of data as separate pieces of data.
I cannot get rid of that &submit.x=0&submit.y=0 at the end of the url too
Remove the name attribute from the image map so it won't be a successful control.
<input type="image" src="img/search_btn.png">
Other improvements you should make:
<input> is an empty element. It should not have an end tag. If you are writing XHTML then use the empty element syntax.
placeholder should not be used as a replacement for <label>
Add an alt attribute to the image map
Use JavaScript to create the URL. If you're using jQuery:
var url = 'http://localhost/pp/index.php?search&'
+ encodeURIComponent($('#id-of-your-select-element').val())
+ '='
+ encodeURIComponent($('#id-of-your-svalue-element').val());
Edit: As for getting rid of submit.x and submit.y, see #Quentin's answer.
in your php code you can add this:-
if(isset($_GET['name']))
{
$searchString="&cs=".$_GET['name'];
}
then use this:
http://localhost/pp/index.php?".$searchString."/
i think this will help you to get the right thing. if you want to use pagination with that,i have a code for you which i used before and it works great. just try it once!

Remove text from fields on input

How do I make the text disappear like the way some fields work here on stackoverflow once I start putting in text? I tried out the different 'on'-actions in HTML but that didn't really do what I wanted.
Thanks.
You can do it with onfocus/onblur events. For example:
<input type="text" value="search" onfocus="if(this.value=='search')this.value=''"/>
If you click on this input field, the default text "search" will disappear. The onfocus event handler checks if this input field has the value of "search" and if so then clears it, in other cases (user has already typed something in) leaves everything as is.
Presumably you mean "Labels which appear inside the input".
If you want to do this in a sane, accessible, semantic way — use a <label>, if JS is available then position it under the element, and onfocus/onblur change classes around based on the value of the element.
I knocked up a simple example at http://dorward.me.uk/tmp/label-work/example.html using jQuery (all the source that isn't part of the jQuery library is embedded in the HTML of that document for easy reading).
jQuery would make this easy work;
http://www.jsfiddle.net/TshDN/
If you are using HTML 5 you could use the placeholder attribute.
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
use the onFocus() in javascript
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />

Cloning or adding an input to a form in jQuery does not submit to PHP in Firefox

$('#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.

Categories