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

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.

Related

Problem passing arguments to function using .submit in JQuery

I cannot for the life of me understand why this doesn't work.
function test(event) {
alert(event.data.fieldone);
};
$('form').submit({fieldone: $('#field').val()}, test);
I just end up with a blank alert. If I hardcode a string and pass that instead it works fine and if I declare a variable within the function and fetch the data that way it also works. What gives?
It will not process the input field , because the form submit line will be executed only ONCE at the beginning, when the input field is blank.
If you wish to make it able to alert with the text inside the input field, you need to add event listener. For example, I add a button that will trigger the alert that prints the text inside the input field in the snippet below.
function test(event) {
event.preventDefault();
console.log(event.data);
alert(event.data.fieldone);
};
$('#submit').click(function() {
var data = $('#field').val();
$('form').submit({'fieldone': data}, test);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="field" id="field">
<button id="submit" type="submit">submit</button>
</form>
In this version the data argument contains a reference to the #field input element and the .value property is then read at submit time and not at the time the submit event was attached to the form:
function test(event) {
event.preventDefault();
console.log(event.data.value);
};
$('form').submit($("#field")[0], test);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="field" id="field">
<button>submit</button>
</form>

Can't write AJAX output variable in html form

I need to print inside a span tag ("estimation2") the result of a calculation (for now, just a simple sum of the two input boxes "SHm2" and "STm2"). I'm using an AJAX call to perform that task. It seems to work perfectly until the alert, which shows the correct result, but for some reasons I can't write that result in my html form. I've been looking around and tried several things, yet none of them worked. For instance I've tried using the write method but it didn't work or stuff like $("#estimation2").html(estimation); or
document.getElementById("estimation2").innerHTML = estimation;
The only way I managed to get it written was by using window.onload, but this generates the calculation when the page loads, and I don't want that. I only want the AJAX code to be triggered when I click on my button.
Also, just for info, the calculation is made in my django view, even though I don't think it's relevant here as it looks to work properly. I'm really lost here, could you please help?
Here is my html code and the AJAX script:
<input type="text" id="SHm2" name="SHm2" maxlength="10" type="number" value="50">
<input type="text" id="STm2" name="STm2" maxlength="10" type="number" value="50">
<button id="estimation" name= "estimation" onclick="calculate()">Estimation</button>
<label>Result:</label>
<span id="estimation2"></span>
<script type="text/javascript">
function calculate () {
var SHm2 = $('#SHm2').val();
var STm2 = $('#STm2').val();
$.ajax({
url: '/myApp/templates/homepage/',
type: 'POST',
data: {
'SHm2':SHm2,
'STm2':STm2,
estimation: 'estimation',
},
success: function(estimation) {
alert(estimation);
document.getElementById("estimation2").innerHTML = estimation;
}
});
}
</script>
so what you wanna do is run the JS after the HTML document has loaded, and as mentioned in the comment section you need to add type="button" to estimation button
HTML
<input type="text" id="SHm2" name="SHm2" maxlength="10" type="number" value="50">
<input type="text" id="STm2" name="STm2" maxlength="10" type="number" value="50">
<button id="estimation" name= "estimation" type="button" onclick="calculate()" >Estimation</button>
<label>Result:</label>
<span id="estimation2"></span>
JS
$(document).ready(function() {
function calculate() {
var SHm2 = $("#SHm2").val();
var STm2 = $("#STm2").val();
$.ajax({
url: "/myApp/templates/homepage/",
type: "POST",
data: {
SHm2: SHm2,
STm2: STm2,
estimation: "estimation"
},
success: function(estimation) {
console.log(estimation);
document.getElementById("estimation2").innerHTML = estimation;
}
});
}
});

Multiply parameter and textBox value in JavaScript

I have an input text box that is in a form, and I'm trying to retrieve the value and multiply it to the parameter.
It doesn't run and I'm not sure if there's a syntax error or if my retrieval of textbox value is incorrect.
<script>
function product(parameter1) {
a=parseInt(document.myForm.myTextBox.value);
return parameter1*a;
};
</script>
HTML:
<form name='myForm'>
Insert your number: <input id='myTextBox' value=''><br>
</form>
<input type='button' value='CLICK HERE' onclick='product()'>
You miss an argument in the onclick trigger, it should be ="product(10)", where 10 is your paremeter1 argument.
I believe you would have to have a name on the input tag to access it the way you do, so an easier and probably faster way to access your input would be document.getElementById('myTextBox')
It is better to execute your product() function on form submit, rather than on button click event, since some users might want to just hit enter in the text field instead of the button, but then you would have to move it within the form boundaries and make it be type="submit"
MODIFIED CODE:
js:
<script>
function product(parameter1) {
a = parseInt(document.getElementById('myTextBox').value, 10);
var result = parameter1*a;
// alert(result);
return result;
};
</script>
html:
<form name='myForm' onsubmit="product(10); return false;">
Insert your number: <input id='myTextBox' value=''><br>
<input type='submit' value='CLICK HERE'>
</form>
You were calling method without argument. If you only want to retrieve value, below is the code. I dont know how ur going to use it
Insert your number:
<input type='button' value='CLICK HERE' onclick='product()'>
<script>
function product()
{
parameter1=10;
a=parseInt(document.myForm.myTextBox.value);
return parameter1*a;
}
</script>

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.

How to make the domain validation with jquery?

The HTML:
<input type="text" value="" id='u' name="url" /> //domain input text box
<input name="" type="button" class="searchorange fl" onclick="get()" />
I am using Ajax to submit the "url" input text. My Code is:
<script type='text/javascript'>
function get(){
var u = $("#u").val();
$.ajax({
type:"get",
url:"/url/api/?u="+u,
dataType:"json",
data:"",
success:function result(data){
$("#show").html(data);
$("#show").show();
}
});
}
</script>
What I want is to add a validation using jQuery based on the user input. What should I do?
Thank You.
that's nothing about jquery, you can use Regexp to match the value of the <input>
if (/yourdomain\.com/.test($("#u").val())) {
//DO AJAX
} else {
//DO SOMETHING ELSE
}
Update:
Maybe you are looking for http://api.jquery.com/attribute-starts-with-selector/
Follow this example here:
http://docs.jquery.com/Plugins/Validation/Methods/url

Categories