Develop Reference

Not deleting data from Email select Box

I have working script which is sending emails from website to some array of emails.
Problem is: If the user forgot to choose value from select box (value = email to mail#mail.com in PHP array) my script is throwing alert "Choose a value!" but all data wrote by the user will be deleted from all select boxes.
Is there any way to avoid it?
JS:
function formSubmit() //onclick "Submit" button
{
var selectedValue = document.getElementById("sendTo").value;
if(selectedValue="99")
{
alert("Choose a value!");
}
else
{
//working ajax script which is sending emails
}
}
HTML:
<label class="company_emails">
<select id="sendTo">
<option value="99">Choose a department</option>
<option value="0">Justice</option>
<option value="1">Injustice</option>
<option value="2">Potatoes</option>
<option value="3">Mushrooms</option>
</select>
</label>

You have to stop the submit when there is an error, otherwise the form will be submitted and is empty again.
function formSubmit() {
var selectedValue = document.getElementById("sendTo").value;
if( selectedValue == "99" ) {
alert("Choose a value!");
// return false will stop the submit
return false;
}
}
But if you do it with onclick on a button you have to use return there too:
<button type="submit" onclick="return formSubmit();">send</button>
Or even better, if you have jQuery available, just register a listener on the form submit and use preventDefault. This is the best way imo.
$("form").on("submit", function(e) {
if( $("#sendTo").val() == "99" ) {
alert("Choose a value!");
// will stop the submit
e.preventDefault();
}
});
And as user #Carr said, you have missed a = in your if statement.

JavaScript code
<script type="text/javascript">
function formSubmit() //onclick "Submit" button
{
var selectedValue = document.getElementById("sendTo").value;
if(selectedValue="99")
{
alert("Choose a value!");
return false;
}
else
{
//working ajax script which is sending emails
}
}
</script>
And need to have return keyword on-click method of button as below.
<input type="submit" value="submit" onclick="return formSubmit()"/>

Using Javascript to select a value from a Html Select box

Hey guys I am using JavaScript to select a specific value(option) from the html select form tag, but whenever I call my JavaScript function I get a single message repeating for all the choices I want to select.
Ex: If I choose to select 'Rabbit' from the list of options and then display a message saying 'Rabbit chosen'; the message will display for each option/value selected.
Here is my JavaScript Code:
var element = document.getElementById('choices').value;
function SelectElement() {
if (element = 'Rabbit') {
alert("Rabbit Selected");
}
else if (element = 'Wall') {
alert("Wall Selected");
}
else if (element = 'Arrow') {
alert("Arrow Selected");
}
}
Here is my html code:
<form>
<select id="choices" >
<option>Rabbit</option>
<option>Wall</option>
<option>Arrow</option>
</select>
<input type="button" value="Submit" onclick="SelectElement()"/>
</form>
Can you smart guys please help me????

A. You should fetch the value each time before calling the function and then check it otherwise your element variable won't refresh at all.
B. To compare two values you should use ==, = is an assignment operator.
function SelectElement() {
var element = document.getElementById('choices').value;
if (element == 'Rabbit') {
alert("Rabbit Selected");
}
}
(As your question is not much clear) if you just want to alert the selected value for every option clicked, just do:
function SelectElement() {
var element = document.getElementById('choices').value;
alert(element+" Selected");
}
This is basic string concatenation.

There is a something called selected == true or false in a "select" tag.
You could write in HTML :
<form>
<select id="choices">
<option id="Rabbit">Rabbit</option>
<option id="Wall">Wall</option>
<option id="Arrow">Arrow</option>
</select>
</form>
<button onclick="TakeElement()">Click</button>
You could write in javascript:
var ra = document.getElementById('Rabbit');
var wa = document.getElementById('Wall');
var ar = document.getElementById('Arrow');
function TakeElement() {
if (ra.selected == true) {
alert("Rabbit is selected");
}
if (wa.selected == true) {
alert("Wall is selected");
}
if (ar.selected == true) {
alert("Arrow is selected");
}
}

I think you must replace element ='rabbit' with element =='rabbit'
== is comparison operator
and = is assignment operator

Set/Get input value using cookie

I want the switch button to remember selected option. Because when I refresh browser my selection is resetting.. How can I do that?
Here is my code:
HTML:
<input type="button" value="Tak" onclick="return change(this);" />
JS:
<script>
function change( el )
{
if ( el.value === "Tak" ){
el.value = "Nie";
}else{
el.value = "Tak";
}
}
</script>

Client side values will reset when you refresh the browser.
You need to store in cookie or session for that

Include this to simply set and get cookie.
Something like:
<head>
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.cookie.js"></script>
</head>
...
<input type="button" value="Tak" onclick="return setValue(this)" id="btn"/>
Now you can get/set cookie and change input value whit no problem, something like:
function setValue(elem){
if(elem.value == "Tak"){
elem.value = "Nie";
$.cookie("btnState", true);
} else {
elem.value = "Tak";
$.cookie("btnState", false);
}
}
function getValue(){
var c = $.cookie("btnState");
if(c != null){
if(c){
$('#btn').val("Nie");
} else {
$('#btn').val("Tak");
}
} else {
//first page view
$.cookie("btnState", true);
$('#btn').val("Nie");
}
}
trigger getValue() on page load to check cookie value and set input value
EDIT:
To fire a function on page load use jQuery .ready function like this:
<script>
$(document).ready(function() {
getValue();
});
</script>
jQuery .ready documentation.
Here is a example in jsfiddle

Html and javascript box authentication

In the following code I am trying to get the select box to display a message beside the box if it hasn't selected a value of male or female. and not show it if it has one of these values selected. but it isnt working, it works fine with the text boses for email and password can anyone see why this isnt working and help me with the answer.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0045)https://vle.wit.ie/file.php/8220/lab5pt2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function validate_gender(field,alerttxt)
{
with (field){
apos=value.indexOf("0");
if (apos>0)
{
document.getElementById('gender_help').innerHTML="";
return true;
}else{
document.getElementById('gender_help').innerHTML=alerttxt;
return false;
}
}
}
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("#");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{document.getElementById('email_help').innerHTML=alerttxt;return false; }
else {document.getElementById('email_help').innerHTML="";return true;}
}
}
function validate_password(field, alerttxt){
with (field){
var re = /^[a-zA-Z0-9]{6,8}$/;
if (re.test(value))
{
document.getElementById('pass_help').innerHTML="";
return true;
}else{
document.getElementById('pass_help').innerHTML=alerttxt;
return false;
}
}
}
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (!validate_gender(gender,"A Valid gender is Required"))
{gender.focus();return false;}
if (!validate_email(email,"A Valid Email is Required"))
{email.focus();return false;}
if (!validate_password(pass,"Password must be between 6 and 8 characters and contain both numbers and alphas"))
{pass.focus();return false;}
}
}
</script>
</head>
<body>
<form action="" onsubmit="return validate_form(this)" method="post">
What is your gender?<br />
<select name="gender" ><span id="gender_help"></span>
<option value="0" selected="selected">Select...</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br/>
Email: <input type="text" name="email" size="30" ><span id="email_help"></span><br>
Password <input type="password" name="pass" size="30"><span id="pass_help"></span><br>
<input type="submit" value="Submit">
</form>
</body></html>

This is a shocking display of anti-patterns!!
Don't use with.
Cache your selectors i.e. var emailHelper = document.getElementById('email_help')
Don't use inline javascript i.e onClick=''
Consider using a library like jQuery to handle events in a cross-browser way.
Generally it's not good to put braces on a new line.
You shouldn't have a <span> inside of the <select> element.
Check out http://javascript.crockford.com/ or http://eloquentjavascript.net/ for some other tips and tricks and best practices. Also more about why not to use with here: Are there legitimate uses for JavaScript's "with" statement?
Now on to the actual question!
You're having trouble with the select box. Let's try something like this:
var genderHelper = document.getElementById('gender_help')
function validate_form(thisform) {
// your other stuff
if (!validate_gender(thisform.gender.value,"A Valid gender is Required")) {
thisform.gender.focus();
return false;
}
}
function validate_gender(gender, error) {
var validGender = (gender === "M" || gender === "F")
if (!validGender) {
genderHelper.innerHTML = error
}
return validGender
}
Update
After playing with it for while in jsFiddle I've found the problem appears to be that your <span> tag is nested within the <select> tag, which is why you can't see it.
Here's a working version mostly using your code:
http://jsfiddle.net/6buUJ/1/

You can not display text in a select area that is not an option or a optgroup.
I think it better to :
add a span with 'A Valid gender is Required' close to select area and display it, when gender is not select.
or border in red the select area if gender mising.

You can't nest a span inside a select element.
You could however update one of the select elements to have the text you want the user to see.
Probably just having the span next to the select is the best though.
This is not valid html:
<select name="gender" ><span id="gender_help"></span>
<option value="0" selected="selected">Select...</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>

"0".indexOf("0") is 0
"M".indexOf("0") is -1
"F".indexof("0") is -1
You could check if (value != '0') { return true; }

Force AutoCompleteExtender dropdown to redisplay via Javascript

I have an AjaxControlToolkit.AutoCompleteExtender control attached to a textbox, and three radio buttons. When the user selects a radio button, the service method used to retrieve the values listed in the AutoCompleteExtender is changed, as follows:
$("#radioButtonList input").click(function() {
var selectedValue = $(this).val();
if (selectedValue == 0) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod1');
}
else if (selectedValue == 1) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod2');
}
else if (selectedValue == 2) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod3');
}
$('#textbox').focus();
}
I want to ensure that, if the user selects a radio button when text is already present in the textbox, the list of autocomplete values based on the new service method is displayed (just as it would be if the user clicked the radio button and then typed into the textbox).
I have tried various event-firing mechanisms, such as this:
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 77;
$('#textbox').trigger(press);
...each of these...
$('#textbox').keydown();
$('#textbox').keypress();
$('#textbox').keyup();
and even:
$('#textbox').get(0).value += 'm';
but nothing seems force the correct events to fire in order to make the autocomplete list re-display with the results of the new service method. How can I make this happen using Javascript?
EDIT: I should note: the jQuery events are firing correctly in each of the above cases, they're just not causing the autocomplete list to reappear when they do. I figure I haven't yet struck the right combination of events that the autocompleteextender is expecting to force the list to appear.

Make sure that you bind your events in the $(document).ready() function. The following works correctly
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
$("#radioButtonList input").change(function() {
var selectedValue = $(this).val();
if (selectedValue == 0) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod1');
}
else if (selectedValue == 1) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod2');
}
else if (selectedValue == 2) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod3');
}
//force click on text box
$('#textbox').click()
$('#textbox').focus();
});
//handle click event
$("#textbox").click(function(){
alert("textbox clicked")
//handle your refresh action for the textbox here
})
})
</script>
</head>
<body>
<input id="textbox" type="text" value="test">
<div id="radioButtonList">
<input type="radio" value="0">
<input type="radio" value="1">
<input type="radio" value="2">
</div>
</body>
</html>