Im having trouble with a contact form and reading a variable from a drop down.
The code I have is this for the drop down:
<label for="Cttl">Title :</label>
<select name="Cttl" onchange='CheckCttl(this.value);'>
<option>Choose your title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="other">other</option>
</select>
<input type="text" name="Cttl" id="Cttl" placeholder="Please specifiy" style='display:none;'/>
When the other option is selected and the user enters something in the input box , the email sent from the form contains what they have typed, eg:
Title : What I typed
If they choose another option such as Mr or Mrs , the email comes back blank like this :
Title :
Is there any what to solve this?
Other code used in contact form:
the php for actually sending the email (works for inputs):
$title= $_POST["Cttl"] ;
The js used to save the user inputs for a summary:
Ctitle = _("Cttl").value;
I believe it has to do with the fact that both the select field and input field have the same name. You could always check the form in PHP with something like this to make sure the title has been filled in properly or one was chosen from your dropdown.
<?php
// Check if they selected other for the title
if($_POST['select-title'] == 'other') {
if(!empty($_POST['input-title'])) {
$title = $_POST['input-title'];
} else {
echo 'Your title is empty!'; // The input was empty
}
} else {
$title = $_POST['select-title']
}
Related
I'm working on an html page that will allow users to get pre-populated text filled into the text input field, based on the option they select. I'm trying to do this via javascript but I can't get the function to "fire" when I do an onchange within the select input field.
Trying to figure out what I'm doing wrong, either with the function, the innerHTML, or both.
Example code I'm working on below:
HTML
<label for='accountg'>Goal</label>
<select id="accountg" name="accountg" style="border-radius:1px;border:1px solid #003399;font-size:14px;width:50px;" onchange="accountSelect()">
<option value=''></option>
<option value='1'></option>
<option value='2'></option>
<option value='3'></option>
<option value='4'></option>
<option value='5'></option>
</select>
<input type="text" id="account1" name="account1" style="width:900px;" title="140 character maximum" />
JAVASCRIPT
function accountSelect() {
var aSelect = document.getElementById('accountg').value;
var account1 = '';
if(aSelect == '') {
} else if(aSelect == 1){
if(account1 == '')
{
var act1 = 'Outlines written policies and procedures to ensure consistent adherence by staff.';
document.getElementById('account1').innerHTML = act1;
} else {}
}
}
<input> doesn't have an inner content, it has a value though:
document.getElementById('account1').value = act1;
I have integrated into a third party delivery service which I populate via Jquery.
[town] -> dropdown
[suburb] -> dropdown
On page load all the select elements are blank. When the user selects town, it then populates suburb.
Now in the event of a post to the server and a returned error, I want to set the form to the state the form was posted in by adding a select element to the correct drop down values.
As an example, user selects town_id 5 and suburb_id 105, form is posted, and returned due to an error. At this point I wish to populate town with value 5 and suburb with value 105...
HTML code:
<div class="form-group col-md-6">
Your town<span class="require">*</span>
<select name="town_id" id="mds_towns">
<option value="">Select your town</option>
<option value="2">Town1</option>
<option value="3">Town2</option>
<option value="4">Town3</option>
</select>...
<div class="form-group col-md-6">
Your town<span class="require">*</span>
<select name="suburb_id" id="mds_towns">
<option value="">Select your suburb</option>
<option value="2">Suburb1</option>
<option value="3">Suburb2</option>
<option value="4">Suburb3</option>
</select>...
I am no jquery expert and I am struggling with the concept of how to get the correct values on a return post.
One of my ideas was to have a special span element with each form field, so something like:
<span id="suburb_value" value="105"> <-----------------*** ADD THIS ***
<div class="form-group col-md-6">
Your town<span class="require">*</span>
<select name="suburb_id" id="mds_towns">
<option value="">Select your suburb</option>
<option value="2">Suburb1</option>
<option value="3">Suburb2</option>
<option value="4">Suburb3</option>
</select>...
Now when the page loads, I populate the span field via php
<span id="suburb_value" value="<?=$suburb_id;?>">
Next the javascript does an ajax call to the api and returns with the list of towns. I then check the value in the span fields and if a value is found, I add a select element to the associated select value...
Would this be on the right path?
Try this:
<script>
$(document).ready(function() {
var townId = <?= (isset($_POST['town_id'])) ? (int) $_POST['town_id'] : 0; ?>,
suburbId = <?= (isset($_POST['suburb_id'])) ? (int) $_POST['suburb_id'] : 0; ?>;
if (townId > 0 || suburbId > 0) {
// make your api call here with townId and suburbId
}
});
</script>
If I understand you correctly, you simply want to retain the selected values in the dropdowns after the page is reloaded on submit. In this case, using jQuery you could try something like:
<script>
$(function(){
var town_id, suburb_id = false;
// Here we assign values to these JS variables if they come through via PHP's $_REQUEST.
<?php echo (!empty($_REQUEST['town_id']) ? 'town_id = '.intval($_REQUEST['town_id']).';' : '') ?>
<?php echo (!empty($_REQUEST['suburb_id']) ? 'suburb_id = '.intval($_REQUEST['suburb_id']).';' : '') ?>
// Here we make the correspondings dropdown options selected, if needed.
if (town_id !== false) {
$('select[name=town_id] option[value='+ town_id +']').attr('selected', 1);
}
if (suburb_id !== false) {
$('select[name=suburb_id] option[value='+ suburb_id +']').attr('selected', 1);
}
});
</script>
More elegant way of doing this would be to pre-select the OPTIONs while outputting the page via PHP, but it's hard to suggest anything in this regard not knowing the structure of your application.
I want to enter the text selection for the following select field:
<select name="Payerid" id="Payerid" class="text" name="Payerid">
<option value="383">Aetna Healthcare</option>
...
Using VBA, I know I can use: (If you give me the syntax in another language, I'll convert)
IE.getElementById("Payerid").Value = "383"
but there about 100 options so I don't want to keep track of the values (which are meaningless to me) or changes the website developers make.
So is there a way to enter the text into the select field?
I tried:
IE.getElementById("Payerid").Text = "Aetna Healthcare"
but that didn't work.
Thanks
You mean you want to change the value? That's just $('select').val('value you want');, using Jquery.
If you're wanting to obtain the value based on what is in the text field, that is as below, derived in part from this post.
var pick = "hey";
var value_pick = $('option').filter(function () { return $(this).html() == pick; }).val();
console.log(value_pick);
$("select").val(value_pick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1" >hey</option>
<option value="1" >baha</option>
<option value="1" >yo</option>
</select>
I am not so sure I have designed my forms.py file correctly, when it comes to a TypedChoiceField and not allowing a selected value of "0" to be entered by the user.
I have read the django docs, but couldn't find anything about this. There is something about empty_value, but I couldn't find any examples about this for the TypedChoiceField.
I have a list of country names in a select list:
<select data-parsley-required="true" name="address_country_style_type" data-parsley-required-message="This field is required." id="id_address_country_style_type" data-parsley-id="1440" class="input-xxlarge" data-original-title="" title="">
<option value="0"> Select a country or territory</option>
<option value="1">Afghanistan</option>
<option value="2">Aland Islands</option>
<option value="3">Albania</option>
......
</select>
In my forms.py file I have the following (including the cleaned data code):
#parsleyfy
class AddressDetailsForm(forms.Form):
required_css_class = 'required'
address_country_style_type = forms.TypedChoiceField(
coerce=int,
label=_('Address Format'),
choices=[(x, x) for x in range(0, 256)],
required=True)
....
def clean(self):
cd_addf = super(AddressDetailsForm, self).clean()
if 'address_country_style_type' in cd_addf and cd_addf['address_country_style_type'] == 0:
self._errors['address_country_style_type'] = self.error_class([_("You must select an Address Format.")])
del self.cleaned_data['address_country_style_type']
else:
....
I have added django-parsley to set up the client side validation.
Is there a way in the forms.py file in the "address_country_style_type = forms.TypedChoiceField" declaration to state that the address_country_style_type must not accept an option value of 0, so that this validation will be picked up automatically by django-parsley and I can cull the cleaned data if statement?
I haven't worked with django, so I can only help you with parsleyjs.
Parsleyjs will tell you the field is required if you manage to remove the value="0" and place it like value="":
<option value=""> Select a country or territory</option>
In all honesty my brain is rather fried after getting this far today.
I am trying to save the state of multiple select drop downs on page using this plugin:
http://plugins.jquery.com/project/cookies
I am using this jQuery to set cookies for the different title drop downs based on their ID:
$(document).ready(function() {
// hide 'Other' inputs to start
$('.jOther').hide();
// event listener on all select drop downs with class of jTitle
$(".jTitle").change(function(){
//set the select value
var val = $(this).val();
if(val != "Other") {
//$(this).nextAll('.jOther').hide();
$(this).parent().find(".jOther").hide();
} else {
//$(this).nextAll('.jOther').show();
$(this).parent().find(".jOther").show();
}
// Sets a cookie with named after the title field's ID attribute
$(this).cookify();
});
$(".jTitle").each(function(){
// get the id of each Title select drop down
var $titleId = $(this).attr('id');
// get the value of the cookie for each cookie created above in $(this).cookify()
var $cookieValue = $.cookies.get($titleId);
// if value is 'Other' make sure it is shown on page refresh
if ($cookieValue == 'Other') {
// Show the other input
$(this).parent().find(".jOther").show();
// set select value to 'Other'
$(this).val('Other');
} else {
// set to whatever is in the cookie
$(this).val($cookieValue);
}
});
});
What is happening is that when no cookies are set the select drop down is displaying a blank option when i want it to default to 'Please select'.
Sample HTML that i am using:
<td>
<select id="titleDepend1" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="otherDepend1" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
So if it is the first time the user is on page and they have not clicked any drop downs the first value will be null rather than 'Please select'.
I'd change this portion, if the cookie isn't there, just don't mess with the dropdown:
$(".jTitle").each(function(){
var $titleId = $(this).attr('id');
var $cookieValue = $.cookies.get($titleId);
if ($cookieValue == 'Other') {
$(this).parent().find(".jOther").show();
$(this).val('Other');
} else if($cookieValue) {
$(this).val($cookieValue);
}
});
The only change is to add an if check on the end, see if there is a cookie...if not the default position of 0 in the dropdown (browser default) will be left alone.