I have a form with 10 input textboxes and each of them have a default value like 'First Name', 'Last Name'. I used onblur and onfocus on these elements since there was no description beside the textbox to indicate what each box is for. Sample code:
<input type="text" id="o_fname" name="o_fname" value="<?php if (isset($_POST['o_fname']) ) echo $_POST['o_fname']; else echo 'First Name'; ?>" tabindex="1" size="36" style="background:#000000;color:#8e8e8e;border-color:#D8D8D8;height:22px;width:200px;" onFocus="if
(this.value==this.defaultValue) this.value=''; " onBlur="if(this.value=='') this.value=this.defaultValue;">
I want to validate this form on the same page, i tried my jquery stuff but the problem was that the textbox had a default value and jquery was assuming that something was entered into the box and i was not validating properly... any suggestions as to how can i validate this page dynamically so that user cannot submit the form unless he enters all the fields?
Found the Solution, here it is to help others:
http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
Then write a script to do a custom validation on the form fields and it will check if the entered value is First Name or not.
Only use a default value if that value is valid. Otherwise, use <label> to indicate what a field is for. This is also important for accessibility.
Legit places to use default values:
today's date in a date field in the
correct format
default select box value of the most
commonly selected option
checkbox/radio set to the most common
choice
either create a json object with all the fields and their related default values or create vars in javascript
Then when the form is submitted compare the submitted values to the default values and if none of the values match the associated default values continue with the submission
Related
I'm creating a wordpress post programmatically when a user compiles a contact form 7.
The post has some custom fields, mostly input text, which was pretty straight forward to pass data to them, like:
if(isset($posted_data['my-field'])){
add_post_meta( $new_ID, 'my_field_name', $posted_data['my-field'] );
}
where my_field_name is the name of the input field in the post, and my-field is the name assigned to the field in contact form front-end.
Now the problem comes with a select custom field in the post (name="ads_id") with two <option> , first has no value, second has value="0" .
What I tried within the contact form code, where i use jquery as well for all the logics, is:
HTML
<div class="hidden"><span class="wpcf7-form-control-wrap ads-id"><select id="ads" name="ads-id" value="" size="40" class="wpcf7-form-control wpcf7-select" aria-invalid="false" /></span></div>
JQUERY
$('#ads').val('0');
this same process works for text field but doesn't seem to work for this select, where i'm doing wrong?
You need to find the value of the selected child of the select. Try using:
$('#ads').children("option:selected").val();
I am pretty new to web programming and I cannot figure this problem out. To keep things simple, say I have 2 pages. The first page has a form with two selection boxes and a submit button. The second page has a form with two text input boxes and a submit button. After the form on the first page is submitted it goes to the second page and the two text input boxes are filled with the values from the first form with a $_POST.
My problem is, when I submit the second form (which goes to the same second page on submit) the $_POST variables of the form are empty.
I thought the if-else in the value would fix it. The purpose of that was because after submitting the $_POST from the previous page no longer has a value and I want the value in this forms field to be displayed after submitting (which is still the same value from the first form). Not only do I want it to display the value in these fields, I want to use them for a database query (which is why them being blank is a problem).
The values in the form when the second page is reached are correct. Also in the else case if I echo "test" instead of the $_POST it is displayed in the box so I believe I have it narrowed down to the $_POST being blank after submitting but I have no idea why.
<form method="post" action="newSerialNumber.php">
JON: <input type="text" name="newSNJON" value="<?php if ($_POST['JON'] != ""){ echo $_POST['JON'];}else{ echo $_POST['newSNJON'];} ?>" disabled>
Part Number: <input type="text" name="newSNPN" value="<?php if ($_POST['PN'] != ""){ echo $_POST['PN'];}else{ echo $_POST['newSNPN'];} ?>" disabled>
<input type="submit" name="Button" value="Add">
</form>
You have the disabled attribute set in those input fields.
Disabled form elements are not send when the form is submitted.
http://www.w3.org/TR/html5/forms.html#attr-fe-disabled:
“The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted.”
If you don’t want the user to be able to change the values, but still send them with the form when it is submitted – use the readonly attribute instead.
Yes, it's right.
Disabled fields are not included in the submit. Remove the disabled attributes and you can see it works.
I have a form field for estimating shipping costs. Currently the field has a label "ZIP/Postal code" and the form field itself is empty by default. I want to do the following:
Put the label "inside" the form field so that it says "Enter your zipcode..." (probably by value="
Once the users puts the cursor into the form field, the default text is deleted.
Once the users entered his zip code and clicked the submit button, his zip code (=the value he entered) is echoed in the form field, thus replacing the default text
Here's the code I am working with:
<label for="postcode" <?php echo $this->__('Zip/Postal Code') ?></label>
<input class="input-text validate-postcode<?php if ($this->isZipCodeRequired()):?>
required-entry<?php endif;?>" type="text" id="postcode" name="estimate_postcode"
value="<?php echo $this->htmlEscape($this->getEstimatePostcode()) ?>" />
How can I achieve this?
You can make the text disappear on the client-side using the HTML5 placeholder attribute. To make it cross-browser, use the jQuery Placeholder plugin (or one similar).
Depending on how you submit the form, you will have *estimate_postcode* available as a GET or POST variable.
$_GET['estimate_postcode']
$_POST['estimate_postcode']
Echo that as the value attribute. This won't be persistent across pages though.
If you are doing this strictly for the user's visual benefit, ditch the PHP and do it all on the client-side via cookies.
<script>
function clearField()
{
$(#postal_code).val('');
}
</script>
<form>
<input id = "postal_code" type = "text" name = "postal_code" value = "Input postal code here" onclick="clearField()"/>
</form>
something like this should work. clearField will just empty the field when the user clicks on it, and the in putted data would then be send by the form.
hi Iam trying to create a wordpress plugin option page.I need to create a form with input fields having default values in it and when I change the value and save it, the changed value should be reflected in the input filed and also in the variable which are assigned to store the value.
let me be more precise
When i change the value of the input field and save it it should be stored in the assiged variable value( permanently till i again change it myself).
Iam a bit poor in form validation and php.help me out guys.
If you're OK with it only working in newer browsers, you could use the placeholder attribute on the text field, to supply a placeholder that will disappear when you focus and reappear when you blur.
<input type="text" name="txtfield" value="" placeholder="input your text" />
If you want it to work in older browsers, do it in javascript:
<input type="text" name="txtfield" onfocus="if(this.value=='Enter Email')this.value=''" onblur="if(this.value=='')this.value='Enter Email'" >
Then you can use <?php $value = $_post['txtfield'] ?> to assign the input value to a variable.
I've written a simple entry form that compiles information onto a database, and I'm having trouble with my required fields...
I use a form to process the data via post method if the user neglects to fill in a required field I would like to bring him back to the original form with his/her previous fields entered.
How to I pass info back into an input label? Is there an easy way to do this without any crazy scripts? I started with sessions but I realized I have no clue how to put the stored info from the session back into the input field so the user doesnt have to retype all of their info... Also would a cookie be better for this over session?
Thanks guys,
Arthur
When you post a form, all those variables are submitted into a global array named $_POST['input_name'] and available on the page posted to. A lot of times what I like to do if I'm doing it fairly quickly, is just make the value of those input fields equal the same as what would be posting.
For example lets say we have a desired username field but the form didn't validate for some reason and posted back to itself; we don't want them to have to enter it again:
<input type="text" name="username" value="<?php print $_POST['username']; ?>" />
Of course when they first load the page, the value will be empty so there is nothing there, but if for some reason it posts back, that "username" field will already contain entered information.
Even better is java script validation, as the form doesn't have to post back, but this will do the job just fine!
Since the user posts all your data to you, these values are also available in your scripts. So you can use them very easily in the case of text-fields, but a bit more work is required for select options, checkboxes and radio buttons:
<input id="myid" name="myid" type="text"
<?php echo !empty($_POST['myid'] ? "value=\"{$_POST['myid']}\"" ?> />
For radio buttons, select options and checkboxes you instead have to check the value to see if it corresponds with the entry you are currently outputting and print selected="selected".
When it comes to validation you can also have a JavaScript validation to give feedback sooner to the user about possible failures. Just remember to have the same validation on the server side in case someone doesn't have JavaScript enabled or submits it using JavaScript, thus bypassing your client side validation.
Not sure if this is the best way, but you could redirect to a "reload" page and use the values from POST or GET to reinput the existing fields. So first validate, the fields that are required and if any are missing, redirect to this page. Then the POST or GET will have all of the values the user filled in (and the missing required fields will already be blank) so you just loop through and load up the supplied info. Additionally, if they supplied incorrect info you could manually clear it and this will also allow you to mark the missing required fields.
Another option is put your validation in JS so you know the data is good before you submit. However, I'm not sure if there are security concerns with that or not.
I check to see if the post value has been set otherwise you can show a default value, then use a bit of jQuery to remove it when the input has focus
<input type="text" name="first_name" id="first_name" value="<?php if(isset($_POST['myid'])) { echo $_POST['myid'] } else { echo "Your Name" ?>"></input>
Here's the jQuery which will remove the default Your Name when the textbox has focus.
$(document).ready(
function(){
$.fn.clearDefault = function() {
return this.focus(function() {
if( this.value == this.defaultValue ) {
this.value = "";
}
}).blur(function() {
if( !this.value.length ) {
this.value = this.defaultValue;
}
});
};
// clear default textbox entries
$("#first_name"). clearDefault();
}
);
jQuery Validation Plug-in
<input type="text" name="username" value="<?php isset($_POST['username']) ? echo $_POST['username'] : null; ?>" />
will work fine