I have two pages lets say first.php, second.php.
first.php:
<form name=register method="post" action="second.php">
Name:<input type="text" name="username" value=<?=$username?> >
Email:<input type="email" name="email" value=<?=$email?> >
Hobbies:<select name="hobbies" id="hobbies" disabled>
<option value="cricket">cricket</option>
<option value="football">football</option>
</select>
</form>
second.php:
<?
print_r($_POST);
I am getting only name and email and not select value.
If I print the post value I am not getting the select value, but when I am removing the disabled in select, I am getting the select value in hidden.
In this scenario, I don't want the user to select the select box and when I submit the form, I should get the value in hidden in second.php.
I have tried many possible ways, to no avail.
Can anybody suggest me how can I achieve this.
Disabled tags can't be send to POST. Change disabled to readonly or hidden
You cant post a disabled field. Maybe you can disable the selectbox right before you post it or you could (like the comments tell you) get a hidden value to be posted that has the standard value you want. If the select box is able to be posted(so not disabled) you can overwrite the hidden value with the select value.
You can do this by Jquery before the form is submitted.
<script>
$(document).ready(function () {
$('#register').submit(function() {
$('select').removeAttr('disabled');
});
});
</script>
In
second.php
you have to create a validation to check that user can be registered or no.
if($this->user->can_register()){
$this->user->save($_POST['hobbies']);
}
Because if only with html or js exception is not enough to handle that case. Some users can just inspect element and remove the disabled element.
Related
When I try to read the dropdown with $data['fieldname'] , I expect to get back the text that’s displayed in the field, but that isn’t what happens. Dropdowns always point to either another record instance or an element of a list; these instances and elements all have an internal ID, and that internal ID is what I get back.
But what if I actually want the text that’s displayed in the dropdown?
When submitting a form, what you get is just the value of the selected option, and not the text. However, there is a way to bypass it if you really need the text. The strategy is to add a hidden input to your form, and fill it with the text of the selected option whenever a new option is selected. It will be something like the following code:
<form action="somewhere.php" method="POST">
<select name="field" id="field" onchange="document.getElementById('content1').value=this.options[this.selectedIndex].text]">
<option value="1">First Value</option>
<option value="2">Second Value</option>
</select>
<input type="hidden" name="fieldname" id="content1" value="" />
<input type="submit" name="submit" value="submit">
</form>
Explanation: here we have a dropdown named field, and there is an onchange event for this dropdown. Whenever a new option is selected, we put the text of that option into the hidden input which is called content1. The name of this hidden input is fieldname, so when this form is submitted, you can get the text in the post variable: $_POST['fieldname'];
I'm creating a demo page where certain setting fields have to be disabled. I have tried disabling the input with the value remaining intact, just greyed out. I have disabled the inputs using disabled="true". When submitting the form, the value disappears in spite of being there before. How do I prevent the value from disappearing whilst simultaneously disabling the said fields?
If you want the value to be displayed and and not changed , you can use readonly
<input type="text" name="xxx" value="xxx" readonly="readonly" />
If you want the value to be hidden and submitted to the action file you can use type =hidden
<input type="hidden" name="xxxx" value="xxx" />
More about HTML input tag can be found here
http://www.w3schools.com/tags/tag_input.asp
disabled form fields are not submitted under any circumstances.
The most common way to avoid this problem is making them readonly and adding an input[readonly] { ... } css rule to make the text gray like in a disabled field.
You might also want to use some JavaScript to prevent it from being focused; could look like this if you have jQuery:
$('input[readonly]').live('focus', function(e) {
$(this).blur();
});
use readonly attribute instead of disabling
another approach would be to store values in PHP session and keep them on the server.
Just throwing suggestions around here.
You could disable the field as normal with Javascript, but before the field get's disabled you could use Javascript to input the value of that field into a hidden field.
function runme() {
var newval = $('#field1').val();
$('#hiddenfield').val(newval);
$('#field1').attr('disabled', 'disabled');
}
<input id="field1" name="field1" type="text" value="this val" />
<input id="hiddenfield" name="hiddenfield" type="hidden" />
<input type="button" onclick="runme();" />
You could also use a hidden field of the same name with the correct value and retain your disabled field. Although do not trust 100% the data in a hidden / read only field as they could still be changed (through web dev tools or similar)
For input type="file" make sure you do this:
<style>
input[type=file][readonly] {
pointer-events: none;
}
</style>
<script>
$('input[type="file"]').prop('readonly', true);
</script>
<select class="txtbx1" name="country" disabled>
<option value='FR' >FRANCE</option><option value='CH' selected>SWITZERLAND</option>
</select>
the above code is inside a form whose method is post
but echo $_POST['country'] is showing nothing.. on the other hand if I remove disabled from select $_POST['country'] is showing the correct result
This is how the disabled attribute works. When a form control is disabled, the value will be ignored when the form is submitted and the key will not be present in $_POST (or $_GET).
If you want the value to be present in the submitted data, but you don't want the user to be able to change the value on the page (which I imagine is what you are trying to acheive) use readonly="readonly" instead of disabled="disabled".
EDIT
The <select> element does not have a readonly attribute. The above information still stands as it will work for <input>s and <textarea>s.
The solution to your problem here would be to disable the select and use a hidden input to send the value back to the server - e.g.
When the select is enabled:
<select class="txtbx1" name="country">
<!-- options here -->
</select>
...and when it is disabled:
<select class="txtbx1" name="country_disabled" disabled="disabled">
<!-- options here, with appropriate value having `selected="selected"` -->
</select>
<input type="hidden" name="country" value="value_of_field" />
This is the correct behavior. disabled disables the element, and does not send it's value when a form is POSTed.
You can use JavaScript to un-disable the form before you submit it. Something like this (untested):
document.getElementById('myForm').addEventListener('submit', function() {
for(var i = 0; i < this.children.length; i++){
var child = this.children[i];
if(child.disabled){
child.disabled = false;
}
}
});
How your form tag looks like? You may have forgotten the method="post" attribute...
If your goal is have a "readonly select" - that is show the user what the choices are without allowing it to change and have it sent with the POST variables, you want to use "selected" on the option with the current value, and "disabled" on all the other options. This will essentially show the select with all its options but only allow the current one to be selected.
I find this more helpful than simply having a disabled select.
As others have noted, you still need to insure that the server side doesn't accept changes to the field (as with any readonly field).
I would like to be able to dynamically add rows to a form (I have now included the form below) using a drop down menu. I presume this would be a javascript function, but I'm not sure.
My idea is that all that would show on the page initially is a drop down menu which defaults to '1', and one row of the form with a few fields, such as name, email, age, etc. The user is asked to select a number from the drop down menu, and then whatever number is selected, rows will be added to the form to match this number.
As an (important) aside, once the form has been completed I want to be able to submit the information in the form via email using PHP, and I wonder whether each input field would need to have a unique ID to pass to the PHP page that generates the email. I mention this in case it needs to be taken into consideration in the method that is used to add rows to the table.
I'd be grateful for any help in getting going with this.
Thanks,
Nick
Form:
<form id="myForm" method="POST">
<label>Please select the number of people you are booking for:</label>
<select id="myDropDown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br/><br />
<label>name:</label> <input type="text" name="name" id="name">
<label>email:</label> <input type="text" name="email" id="email">
</form>
I would like to be able to dynamically
add rows to a form using a drop down
menu. I presume this would be a
javascript function, but I'm not sure.
Yes, it would be easiest to do it in JavaScript. Pick a good toolkit like jQuery for helping you navigate and modify the DOM. Here's a simple skeleton:
$(function() {
var myForm = $("#myForm");
$("#myDropDown").select(function() {
var selected = $("option:selected", this).val();
$("<input/>")
.attr("type", "text")
.attr("name", selected)
.attr("id", selected)
.appendTo( myForm );
});
});
I think forms need unique names for post not id.
loop over the number selected, foreach one do this.
var newInput = document.createElement("input");
newInput.Name = "Unique name to form"
newInput.Type = "text" // or whatever
document.getElementById("formId").appendChild(newInput);
note that it could be done easier with jQuery possibly but this will work with the built in js function.
I have this simple Select box that is suppose to store the selected value in a hidden input, which can then be used for POST (I am doing it this way to use data from disabled drop down menus)
<body>
<?php
$Z = $_POST[hdn];
?>
<form id="form1" name="form1" method="post" action="test.php">
<select name="whatever" id="whatever" onchange="document.getElementById('hdn').value = this.value">
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
</select>
<input type="hidden" name ='hdn' id="hdn" />
<input type="submit" id='submit' />
<?php
echo "<p>".$Z."</p>";
?>
</form>
</body>
The echo call works for the last 3 options (2,3,4) but if I select the first one it doesnt output anything, and even if i change first one it still doesnt output anything.
Can someone explain to me whats going on, I think it might be a syntax issue.
EDIT: As mentioned in first paragraph: I am using the hidden field instead of just using the value of selected because i plan on disabling the select drop down in my actual website, and when you disable the menu the POST data is no longer accessible. By putting it into a hidden field you can still access the information
The first one is the default, so when you "change" to the first one, it hasn't actually changed and the event does not fire.
You should be reading the value directly from the select and not depending on JS to set a hidden field though. The JS is just pointless, unreliable complexity.
Does anything else in your client-side application depend on that hidden field? If the ONLY purpose of the hidden field is to duplicate the selected value of the dropdown, then there's absolutely no reason to use an onchange handler.
Best solution would be to set an onsubmit handler on the form itself to copy the dropdown value into the hidden field.
<form ... onsubmit="document.getElementById('hdn').value = document.getElementById('whatever').value">
Try your post access like this:
<?php
if (array_key_exists('hdn', $_POST)) {
$Z = $_POST['hdn'];
}
else {
$Z = 1;
}
?>
change your input:
<input type="hidden" name='hdn' id="hdn" value= <?php echo "$Z"; ?> />
this.value has no value. That is why $_POST['hdn'] doesn't have a value when you initially load the form.
As #David said, if you use Firefox you can see the post data for hdn is empty/null.