We Keep Coding

How do I provide an exception for an onfocusout event when clicking on a specific element?

I have an HTML form element that I want to use to create a dynamic drop-down list of options with auto-suggestions as people type.
<form action="" id="clientSearchForm" autocomplete="off">
<input id="searchInput" onkeyup="updateResults();" onfocusout="clickAway();" name="search" placeholder="" type="text">
</form>
The updateResults() function generates a div below this section with clickable matching entries as they type. I want to create a clickAway() function onfocusout to delete whatever someone has written in the text field if they don't click one of the options presented to them. Basically I want them to know that we're not going to save the data unless they choose one of the pre-selected options.
However I can't seem to come up with a way to NOT erase once they click on an option in the results div.
I've tried to use some IF conditional statements in the onfocusout function, but the onfocusout event always happens before any events associated with the results click event.
function clickAway() {
$("#searchInput")[0].value = "";
updateResults();
}
How can I delete the content of this form input field for people clicking away to fill out the rest of the form, without also erasing it when the action stealing focus is the correct action of clicking on a result?

in firefox entering data into a textbox which acts as a radio button needs a double click

In mozilla firefox entering data into a textbox which acts as a radio button needs a double click...how to make it possible through single click.Even after selecting the radio button and If i click the textbox once and try to enter only the radio button gets selected and the data is not entered.

For Firefox, the first click in to select the radio button, which gets the focus (honnestly don't know why it's different with other browsers).
I think your solution will be to use Javascript... See this jdfiddle, I've update your code ;)
The idea is to have two inputs not linked in the HTML, but linked via the onclick (or onfocus) function, like:
<input type="radio" name="address-chosen" value="1" id="address-switch_1" />
<input type="text" name="address-item_1" value="1" onclick="selectRadioButton('address-switch_1')"/>
My question is: what's your final objective? Because when you submit the form, you'll have to take into account that you have two separate inputs... or maybe update the value of the radio button with JS, too?

validation not being applied when input type button element is clicked

The issue is viewable on the following webpage - http://www.bestcastleintown.co.uk/test/
I am trying to apply various validation rules to the form that features on the web page mentioned above with a jQuery plugin that utilises custom data attributes (http://formvalidator.net/index.html). This validation is present on the first 5 form fields. This is viewable when a user focuses on a field and then progresses to the next field, the previous field will lose focus and a validation message is presented.
I am encountering an issue whereby the validation is not applied when the form is submitted. This is caused by the onclick and type attributes that are present on the <input> element
<input class="btn-wpbc" type="button" onclick="mybooking_submit(this.form,1, 'en_US' );" value="Send">
I have observed that if the type attribute is changed to type="submit" and the onclick attribute is removed in Firebug or Chrome Developer Tools then the validation will be applied to the form fields.
However changing the attributes will in result the failure of calender validation as a booking is being made through an AJAX request that is initialised through the following JavaScript:
onclick="mybooking_submit(this.form,1, 'en_US' );"
The form will no longer check that a day has been selected.
Are there any suggestions for ensuring both forms of validation take effect (calender day selected and validation on form fields)?

change input type attribute to submit and call your javascript function on onsubmit event on form tag. Like-
<form onsubmit="mybooking_submit(this.form,1, 'en_US' );" >

javascript autosubmit form when dropping value into text field

I'm having a simple form with just a text field. I'm dropping in values (drag and drop), which works fine (of course), but I want to autosubmit as soon as I've dropped the value into it.
From what I understand 'onchange' wouldn't work, because you need to actually exit the field for it to submit..
Same with 'onmouseup'.. doesn't work either unless I click in the field again...
How can I fix this?
form:
<form name="getrdun" action="getrdun" method="post">
Original string: <input type="text" name="origstuff" value=""><br>
<input type=submit value="Submit">
</form>

The input event should do the trick, although note from the reference that there are some problems with IE9 and Opera.
Updated with details:
Instead of using the change event, listen for the input event. You don't show any code, so I don't know how you're setting up event listeners, but, e.g. using plain old JavaScript.
inputEl.addEventListener('input', function() {
// submit the form here...
})
A jQuery version:
$('input[type="text"]').on('input', function() {
// submit the form here...
})
Obviously, you'll want to select the <input> element appropriately.

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?

You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');

Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.

The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)