I have a textbox in which I render some value the user can change.
If user does, then I have to show a popup and tell him that The new text you entered in textbox is this...
If he clicks OK then I will submit that to DB.
How to do that in JavaScript?
Suppose default value of textbox is
What,are,you,doing
and user enters this
What,are,you,doing,james
in this case user enters only james.
jQuery
oldVal = $('#textBoxID').val();
$(document).ready(function() {
$('#submit').on('click', function() {
alert('You Entered: ' + $('#textBoxID').val().replace(oldVal, ''));
// Submit form
window.oldVal = $('#textBoxID').val();
});
});
HTML
<textarea id="textBoxID">What,are,you,doing</textarea>
<button id="submit">OK</button>
example jsfiddle
Related
I have a dropdown with two text values "Regular" and "Irregular" in my jsp. I need to send the selected dropdown text to servlet using hidden form field. I am doing the following :
function addFundTypeHiddenFormField() {
var dropdown= document.getElementById("dropdown");
var formReq = document.getElementById("formReq");
var input = document.createElement('input');
input.id = 'fundingType';
input.type = 'hidden';
input.name = "fundingType";
input.value = fundType.options[fundType.selectedIndex].text;
console.log("dropdown: "+dropdown.options[dropdown.selectedIndex].text);
formReq.appendChild(input);
}
"Regular" is the default choice in dropdown. If I change it to "Irregular" and submit the form, the servlet receives the value "Irregular". But, if I change the dropdown to "Irregular" and then again revert to "Regualr" and submit the form, the servlet still gets "Irregular" for 'fundingType'. The console.log prints correct value as whatever choice I make for the dropdown. I am at a loss here.. what changes do I do so that correct hidden input value is sent to the servlet?
Adding the following piece of code helped
if(document.getElementById("fundingType")==null){
console.log("input doesn't exist");
}
else{
console.log("input exists");
formReq.removeChild(document.getElementById("fundingType"));
}
I have a chatbot I created that asks for a user's username, then stores it as a variable. However, in one of my dialog trees, I have to ask the user for them to type another answer, I have it working so that user's can navigate via button clicks.
On username capture, the "input bar" is removed from controls and I append buttons with each message function. I tried to do the inverse of this (remove buttons and add an input) which does work, however I can't get my input to do anything. It won't submit on enter, it won't save a variable and in my trial and error, I found that if I try to set a var off that msg value, it updates the username's.
Here is my function to retrieve name
function get_username() {
send_msg("Hello I'm Mumbles, the Help Bot", function(){
send_msg("Who am I speaking with today?")
});
}
function ai(msg) {
if (username.length < 3) {
username = msg;
send_msg("Nice to meet you"+username+". What are you working on today?" , function() {
$("#controls").append(
'<button class="options one" value="my_certifications" type="button">My Certifications</button>' +
'<button class="options one" value="videos"type="button">Videos</butto/>' +
'<button class="options one" value="login"type="button">Login</butto/>' +
'<button class="options one" value="other"type="button">Other</butto/>'
);
});
}
// Remove text bar
$("#controls").empty();
};
Here is my function to try and capture email
} else if (b_val == "my_practicum") {
send_msg("What is the email address you submitted your practicum with? By having this we can give you a status update!" , function() {
$("#controls").append(
'<textarea id="message" class="practicum-bar" placeholder="Type Your Name - Then Hit Enter"></textarea><button style="display:none;" id="sendMsg">Send</button>' );
email = msg;
console.log(email);
});
}
}
If you want to see this in action, here my JSFiddle. You can see it by going through this user path
Enter name > Certifications > My Practicum > Enter email
Any help on this is appreciated! Thanks!
It looks like you remove controls by doing $("#controls").empty(); and you want to add an event to a dynamically created element so you have to add the context to the second parameter of the .on. look now you can see the console.log in the fiddle the second time you clicked enter because jquery can detect the item now.
$("#controls").on("keypress", "#message", function(event){
if (event.which == 13) {
console.log("my test");
if ($("#slideThree").prop("checked")) {
$("#sendMsg").click();
event.preventDefault();
//*edit you can now change variables outside of scope*
}
}
});
now you can do your event handling.
I am trying to prevent the page from reloading or submitting when the user clicks the Cancel option. I looked around stackoverflow and have the same syntax for the problem I'm having, but I tried something like this and it still submits and reload the page on cancel option. How do I prevent it from doing anything and leave the page as-is on cancel?
JavaScript code:
// create an input element
var frm = document.getElementById("result");
var submitBtn = document.createElement("input");
submitBtn.type = "submit";
submitBtn.value = "Confirm Purchase";
frm.appendChild(submitBtn);
submitBtn.addEventListener('click', function()
{
// confirm the data
var submitQ = confirm('Are you sure you want to submit your DSLR selections?');
if(submitQ)
{
alert('Your query has been submitted! Have a great day! :)');
}
else document.getElementById("result").onsubmit = false; // prevent the page from refreshing on Cancel option
});
HTML Code:
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
Change your event handler to address the form onsubmit event rather than the submit buttons click event. And return false if the user cancels :
frm.onsubmit = function(){
// confirm the data
var submitQ = confirm('Are you sure you want to submit your DSLR selections?');
if(submitQ)
{
alert('Your query has been submitted! Have a great day! :)');
} else {
// prevent the page from refreshing on Cancel option
return false;
}
};
see fiddle -> http://jsfiddle.net/LGd2f/
Maybe you should try attaching the event to form submit event instead of on a button click, and then just return false or return true.
I have a survey. On button click need it to validate certain fields required/store locally/ go to confirmation page(to prevent user from resubmitting). Only 'FirstName''Hostipal' required atm.
Problem is when all required fields are filled, it fails to go to confirmation.html. If i leave 1 required field open, It doesnt validate and goes to confirmation. If all 'required' syntax is taken out, It doesnt go to confirmation
<label>First Name*:</label> <input required title="Name is required" id="FirstName" name="MainName" type="text"/>
In all cases, It still stores to local storage however. Any input on validating required fields would be appreciated. Hopefully can put it in my clicked() function.
<button type="submit" value="Save" id="Save" >Submit Form</button>
function
$( document ).ready(function() {
$('#Save').click(function (e) {
if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
var person = $("#FirstName").val() + "." + $('#LastName').val();
$('input, select, textarea').each(function () {
var value = $(this).val(),
name = $(this).attr('name');
localStorage[person + "." + name] = value;
window.location.href = "Confirmation.html";
console.log('stored key: ' + name + ' stored value: ' + value);
});
}
});
});
If the above doesn't show my problem, here is the whole: http://jsfiddle.net/smZHe/1/
each helper method in jquery executes the function we pass to it once for each item in the initial array. You are trying to execute below statement multiple times (once for each input, select, textarea).
window.location.href = "Confirmation.html";
You can use a variable instead as flag to mark validation failure. In the end, you can check variable and navigate conditionally.
My Form has a dropdown list with countries which does a AJAX postback and renders another dropdown with cities.
I have textbox field phonenumber which has been assigned with a event listener, for debug purposes it justs throws an alert msg box to the screen.
Scenario 1
when the form is loaded the countries dropdown is preselected with the logged in user country, and the textbox field phonenumber is prerendered as well. Then i make a change to this textbox of phonenumber, the alert box pops up everytime. i.e. the event seems to be firing all the time.
Scenario 2 - the problem
After scenario 1, if the user changes the countries selection, there is a ajaxpostback and when the form finishes rendering, and when I make another change in the textbox phonenumber, the event does not fire anymore, any ideas why?
Code:
Event listener registration
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener("change", phoneNumberParser, true);
document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").addEventListener("change", triggerCountryChange);
//alert(document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value);
//$("ctl00_ContentPlaceHolder1_officePhone_txtInput").bind("onchange", phoneNumberParser);
});
</script>
onChange code
<script>
var selectedcountrycodeval;
function triggerCountryChange() {
//var phoneNumber = document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value;
//alert(phoneNumber);
//ctl00$ContentPlaceHolder1$country$cbInput_Input country name input tag
var regionCode = document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").value;
alert(regionCode);
regionCode = getCountry(regionCode);
selectedcountrycodeval = regionCode;
alert(regionCode);
//document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener("change", phoneNumberParser);
//alert(document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener);
//document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").addEventListener("change", triggerCountryChange);
}
function phoneNumberParser() {
alert(selectedcountrycodeval);
var phoneNumber = document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value;
alert(phoneNumber);
}
</script>
Form values
country
<INPUT style="WIDTH: 220px"
id=ctl00_ContentPlaceHolder1_country_cbInput_Input
class=ComboBoxInput_WindowsXP tabIndex=1 value="United Kingdom"
name=ctl00$ContentPlaceHolder1$country$cbInput_Input></INPUT>
Phone
<INPUT style="WIDTH: 221px"
id=ctl00_ContentPlaceHolder1_officePhone_txtInput class=inputTextBox
tabIndex=1 value="+44 (20) 8222-2662" maxLength=64
name=ctl00$ContentPlaceHolder1$officePhone$txtInput >
Looks like you seem to be adding the phone number input after the form is refreshed.. For such cases it is better to Delegate the event.
$(document).on('change' , '[id*="officePhone_txtInput"]', phoneNumberParser );