We Keep Coding

How to call a function in Javascript when a input changes value?

How to call function xxx when input type text id="username" change value ?
first, when you fill data into
<input type="text" name="thingy" onkeypress="updateInput(this.value)" onkeyup="updateInput(this.value)" />
Then data in
<input type="text" name="thingy" onkeypress="updateInput(this.value)" onkeyup="updateInput(this.value)" />
will change value.
OK, when input name="thingy" change i want to call function xxx , i try this code but not work.
How can i do that ?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function updateInput(ish){
document.getElementById("username").value = ish;
}
</script>
<form id="main_fid">
input1 : <input type="text" name="thingy" onkeypress="updateInput(this.value)" onkeyup="updateInput(this.value)" />
<span id="mySpan"></span>
<input type="submit" value="OK"/>
</form>
<script>
function xxx() {
$.ajax
(
{
url: 'other.php',
type: 'POST',
data: $('#username_send_value_fid').serialize(),
cache: false,
success: function (data) {
$('#mySpan').show();
$('#mySpan').html(data);
}
}
)
}
</script>
<br>
<form id="username_send_value_fid">
input2 : <input type="text" name="username" id="username" onchange="xxx()" readonly/>
</form>

I think calling xxx() on "onchange" event or inside updateInput(ish) will give the same effect.
Try
function updateInput(ish){
document.getElementById("username").value = ish;
xxx();
}

$("#username").on( "change", handler )
or in short form
$("#username").change( handler )
And get rid of the inline onchange attribute. You will also need to wrap the code in a ready function:
$(document).ready(function(){
$("#username").change( handler )
});
http://api.jquery.com/change/
Added after reading the question a bit more carefully:
If you want to link your input name="thingy" to username you can do something like this:
$('input[name="thingy"]').change(function(){
$("#username").val( $(this).val() ).trigger('change');
});
This will update the value of username and then trigger a change event as if the user had typed in the input.
However if what you are trying to accomplish is something like validating the uniqueness of an input the is no reason to jump though so many hoops - just call your ajax handler straight from the username change event.

Trouble creating elements with JQuery

I have this form:
<form>
<input id="checkuser" type="text" name="user" placeholder="Your username"/>
</form>
And what I'm doing with JQuery is to check if the username that was written is avalible. This is the JQuery code:
$('#checkuser').click(function (){
$(this).change(function () {
$.ajax( {
url: '/check',
type: 'POST',
cache: false,
data: { checkuser: $(this).val() },
dataType: "json",
complete: function() {
},
success: function(data) {
var check = JSON.stringify(data.aval);
if (check == "false") {
$('<p>Not available.</p>').insertAfter('#checkuser');
}
else {
$('<p> Available!</p>').insertAfter('#checkuser');
}
},
error: function() {
console.log('process error');
}
});
});
});
The problem is: if the user is not available, the user has to rewrite the username and when jQuery recheck if is available, instead of rewrite the content of <p>, JQuery create another <p>next to the old <p>, ergo, this is the result: Not available.Available!, instead write only one of them. How can I resolve this?

To solve this I would add a blank <p></p> tag after the input and update this tag when needed.
<form>
<input id="checkuser" type="text" name="user" placeholder="Your username"/>
<p></p>
</form>
$('form p').text('Available!');

insertAfter will append new html context to the div. instead create another div after the checkuser div and replace the html inside:
<input id="checkuser" type="text" name="user" placeholder="Your username"/>
<div id="msg"></div>
and then just:
$('#msg').text('your text if available or not here');

The insertAfter() method is working as designed: it finds the element (#checkuser in this case) and appends a new paragraph after it.
You probably need to create a DIV or SPAN element after your INPUT tag like this:
<span id="checkuser-validation"></span>
Then adapt your JavaScript code to look like this:
if (check == "false") {
$('#checkuser-validation').Empty();
$('#checkuser-validation').Html('Not Available');
}
... and so on. Hope that helps :)

send multiple text box names to one jsp page by jquery

I have two text boxes and i want to send these two text box names to one jsp page. By getting these two names in check.jsp i will do some calculation and will return the result by json to third text box, but i think i am doing wrong somewhere. Can anybody give me an idea?
<script type="text/javascript">
$(document).ready(function() {
$("#textbox").keyup(function () {// do i need to write another onkey up for another text box?
$.getJSON('check.jsp', {
textboxname: this.value// here how can i send another text box name to check.jsp?
},function(data){
// get data
});
});
});
</script>
html
<input type="text" id="textbox" name="textboxname"/>// name goes to check.jsp
<input type="text" id="textbox1" name="textboxname1"/>// how can i send this text box's
name to that same check.jsp
<input type="text" id="textbox2" name="textboxname2"/>// here i want to display the
result received from check.jsp
server side(check.jsp)
String firsttextboxname=request.getParameter("firsttextboxname");
String firsttextboxname1=request.getParameter("firsttextboxname1");
JSONObject jsonObj= new JSONObject();
jsonObj.put("isTrue","true");
response.setContentType("application/json");
response.getWriter().write(jsonObj.toString());

<input type="text" id="textbox" class="submitme" name="textboxname"/>// name goes to check.jsp
<input type="text" id="textbox1" class="submitme" name="textboxname1"/>// how can i send this text box's
<script type="text/javascript">
$(document).ready(function() {
$(".submitme").keyup(function () {
$.getJSON('check.jsp', {
textboxname: jQuery("#textbox").val(), textboxname2: jQuery("#textbox1").val()
},function(data){
if (data.textboxname != "" && data.textboxname2 != "") {
jQuery("#textbox2").val(JSON.stringify(data));
}
else {
jQuery("#textbox2").val("");
}
}
});
});
});
</script>
------OR AS A POST-----------
$.ajax({
type: 'POST',
url: 'check.jsp',
data: { textboxname: jQuery("#textbox").val(), textboxname2: jQuery("#textbox1").val() },
success: function(data) {
jQuery("#textbox2").text(JSON.stringify(data));
},
dataType: 'JSON'
});
I'll comment to say your doing a couple things I wouldn't.
1) Why not send this data via a POST
2) Why send data everytime a key is pressed, why not bind this to a submit button?

Jquery: Getting input value of a form

I have the following code:
<form action="" method="get" onsubmit="doRequest($('word').value); $('word').value=''; return false;">
<input type="text" name="word" id="word" value="" />
<input type="submit" name="submit" value="Send" />
</form>
doRequest() function:
function doRequest(request)
{
$.ajax(url, {
type: 'get',
data: { 'msg' : request }
});
}
The problem is, if I change the word value manually like value="111", I can see the value is being posted to PHP. However, when I want it to post whatever I write into textarea, it posts nothing, so the problem lies in the onSubmit area.
Can anybody help me about this?

You are missing the # in your jQuery selectors.
onsubmit="doRequest($('#word').value); $('#word').value=''; return false;"
I would also remove the inline JavaScript and replace it with a function in the submit handler instead. Also using jQuery .val() instead of .value.
$(document).ready(function() {
$('form').submit(function() {
doRequest($('#word').val());
$('#word').val('');
return false;
});
});

The correct way to access the value via jQuery is val() - not by setting a property.
$(...).val("set the value");
var get_the_value = $(...).val();
Also, your current selectors are looking for <word> elements which you hopefully don't have. Use #word as the selectors to search by ID.

Jquery fails when i use button tag in HTML to call Javascript function which in turn uses Jquery

I have button on my HTML page. Initially i was using
<input name="op" id="changepass_submit" value="Change Password" disabled="disabled" class="form-submit" type="button" onClick="change_passwd();" />.
Using this i am able to call the javascript function change_passwd() which has it's definition as,
function change_passwd()
{
var o_pass = document.getElementById('o_passwd').value;
var n_pass = document.getElementById('n_passwd').value;
var c_pass = document.getElementById('c_passwd').value;
if(n_pass == "")
alert("New Password can not be empty!");
else
{
if(n_pass == o_pass)
{
alert('New password and old password are same! Please choose different new password.');
}
else
{
o_pass = rtrim(ltrim(o_pass));
n_pass = rtrim(ltrim(n_pass));
$.ajax({
type: "POST",
data: {o_pass:o_pass,n_pass:n_pass},
url: "changepass",
success: function(response) {
var result = eval(response);
alert(result[1]);
window.location = "/my_profile";
}
});
}
}
}
It works fine.
But when i change <input> tag to:
<button name="op" id="changepass_submit" disabled="disabled" class="form-submit" onClick="change_passwd();" style="width:150px;"><strong>Change Password</strong></button>
it gives jQuery error..
why so? If any body has any suggestions or answers pls let me know. Thanks in advance.

I don't know about the jQuery error (what's the error?) but a <button> is type="submit" by default and not type="button". That means when clicked (assuming it is not disabled as in the markup), since you do not return false to cancel the default action, the form will continue to submit, potentially cancelling your ajax() operation.