Clear textbox with a button in a classic ASP - javascript

I have this code for the html button and textbox: the textbox is where I input a text so that I could do some changes on the table.
'textbox
<input name="txtupdate" type="text" id="txtupdate" value="<%=Request.Form("txtupdate")%>" />
'button
<td align="center"><button type="button" value="clear" id="clear">Clear</button></td>
What I need to do now is click the Clear button and the textbox will be clear. I tried using this code but it doesnt seems to work,
<script type="text/javascript">
$(document).ready( function() {
$('#clear').click( function () {
$('#<%=Request.Form("txtupdate")%>').val("");
});
});
</script>
Any help is appreciated. thanks

I think you messed the id and value. Your text box id is txtupdate but not <%=Request.Form("txtupdate")%>. So, the selector is incorrect. You should use txtupdate instead.
The correct JavaScript should as below.
<script type="text/javascript">
$(document).ready( function() {
$('#clear').click( function () {
$('#txtupdate').val("");
});
});
</script>

Related

How to trigger the 'change' event if jQuery sets the value?

How to trigger the 'change' event if jQuery sets the value from that button? Is it possible?
Code Snippet attached below:
$(".first").change(function() {
alert('something');
})
$(".button").click(function() {
$(".first").val('Button Value');
})
<!DOCTYPE html>
<html>
<head>
<title>Change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="" class="first">
<input type="button" name="" class="button" value="Change">
</body>
</html>
The answer is in the question!!! Use .trigger()!
$(".first").change(function(){
alert('something');
})
$(".button").click(function(){
$(".first").val('Button Value').trigger("change");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="" class="first">
<input type="button" name="" class="button" value="Change">
It wont call the change event, may be you can call it manually like this.
$(".first").on('change',function(){
alert($(".first").val());
})
$(".button").click(function(){
$(".first").val('Button Value');
$(".first").change();
})
Update:
Use oninput which is raised when an element value changes.
$(".first").on('input', function(){
alert('something');
})
here is simple example
$(".first").on('input', function(){
alert('something$(".first").on('input', function(){
alert('something');
})');
})
I guess you want to pop an alert on the page when the button is clicked, i.e. when the user submits some data to the form instead of alerting at the exact moment, you wish to pop an alert when the user clicks the button. Cause that is what i understood from your question. Maybe to do that all we can do is:
$(".button").click(function(){
alert("something");
$(".first").css("outline", "1px solid #3366BB";
});
See if this helps any.

How to store data in input box if the specific button is clicked

I want to do is when a user click the button it will store the value of the inputboxes to localstorage.
My problem is after i click the button it doesnt store the data to the localstorage if i refreshed the page all inputboxes are empty.
testing link: http://jsfiddle.net/LgA2m/64/
html:
One: <input type="text" name="one" id="one" /> <br />
One Copy:<input type="text" readonly="readonly" name="OneCopy" id="OneCopy" />
<br />
<button type="button" id="click">Click</button>
script:
$('#click').click(function(){
$('#one').on("blur keyup change", function () {
localStorage.setItem($(this).attr("id"), $(this).val());
});
$('#one, #OneCopy').each(function (ind, val) {
$(val).val(localStorage.getItem($(val).attr("id")));
});
localStorage.setItem($('#OneCopy').attr("id"), $('#one').val());
$('#OneCopy').val(localStorage.getItem($('#one').attr("id")));
});
Your code is rather confusing, you should really try understanding what you have, because I don't think it does what you think it does.
However, I have written some code that does what it sounds like you want:
$('#click').click(function() {
localStorage.setItem("one", $("#one").val());
});
$(function() {
$('#OneCopy').val(localStorage.getItem('one'));
});
you should not wrap your listeners inside a listener
every time you click it would create new ones
just this should do it if I understand you right:
$('#click').click(function(){
localStorage.setItem('one', $('#one').val());
$('#OneCopy').val(localStorage.getItem('one');
});

jQuery Validate doesn't remove error if value is auto-inputted via JavaScript

My HTML looks like this:
<form id="mainform" method="post">
<input type="text" class="required" name="receiver" />
<span id="clickMe">Click me</span>
<input type="submit">
</form>
And my JavaScript is as follows:
$(document).ready(function () {
$("#clickMe").click(function() {
$("input[name=receiver]").val("Clicked");
});
$("#mainform").validate({
submitHandler: function (form) {
alert("Success!");
return false;
}
});
});
Fiddle: http://jsfiddle.net/Y9RFt/2/
If you submit leaving the input empty, an error appears.
If you click the 'Click Me' span, the input is auto-filled, but the error remains until you submit the form. If you type something instead, the error disappears instantly.
Is there a way to emulate user input so that the error disappears on click?
Simply use the built-in .valid() method to force an immediate validation test of the form.
$("#clickMe").click(function () {
$("input[name=receiver]").val("Clicked");
$("#mainform").valid(); // <<-- Add this line to force a test
});
DEMO: http://jsfiddle.net/Y9RFt/8/
Got it. The solution is to simply blur the input:
$("input[name=receiver]").val("Clicked").blur();
Fiddle: http://jsfiddle.net/Y9RFt/7/

how to read input from text input field and put input into div

I am trying to run this code.
the code should take a string as input and put that input to a div and calculate the width of the div.
here is code i have used.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" value="" name="input">
<input type="submit" value="submit" name="submit">
<script>
var elem = '<div id="divitem" style="width:auto;"></div>';
$('body').append($(elem));
$("submit").click(function () {
var text = $(this).text();
value= $("input").val(text);
alert(value);
});
</script>
</body>
</html>
but i am not getting any output. how to do this?
please help me.
Try this paps!
Demo
This is similar to your problem.
HTML
<div id="container">
<input type="text" value="" id="inputtext">
<input type="button" value="submit" id="submit">
</div>
Script
$(function(){
var elem = '<span id="divitem"></span>';
$('#container').append($(elem));
$("#submit").click(function () {
$('#divitem').html($('#inputtext').val());
alert($('#divitem').width());
});
});
Here's a fiddle
To obtain value from a text field you need to use this,
$('input[name="input"]').val();
and not .text()
To answer your second question, you need to use this
$('#divitem').attr('style');
or
$('#divitem').attr('width');
The problem is here:
$("submit").click(function () {
var text = $(this).text();
value= $("input").val(text);
alert(value);
});
$(this) refers to the element that you select, which is the submit button.
You should replace the first line of the function with
$('input[name="input"]').text();
Finally, setting the html content of the div, will be done this way:
elem.html(test);
Hope this helps. Have a great day.
I have created a jsFiddle for your question http://jsfiddle.net/N4zFZ/ in JavaScript
You can calculate width by
`var width = $('#divId').attr('width');`

Add a string of text into an input field when user clicks a button

Basically just trying to add text to an input field that already contains a value.. the trigger being a button..
Before we click button, form field would look like.. (user inputted some data)
[This is some text]
(Button)
After clicking button, field would look like.. (we add after clicking to the current value)
[This is some text after clicking]
(Button)
Trying to accomplish using javascript only..
Example for you to work from
HTML:
<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />​
jQuery:
<script type="text/javascript">
$(function () {
$('#button').on('click', function () {
var text = $('#text');
text.val(text.val() + ' after clicking');
});
});
<script>
Javascript
<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
var text = document.getElementById('text');
text.value += ' after clicking';
});
</script>
Working jQuery example: http://jsfiddle.net/geMtZ/
​
this will do it with just javascript - you can also put the function in a .js file and call it with onclick
//button
<div onclick="
document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>
Here it is:
http://jsfiddle.net/tQyvp/
Here's the code if you don't like going to jsfiddle:
html
<input id="myinputfield" value="This is some text" type="button">​
Javascript:
$('body').on('click', '#myinputfield', function(){
var textField = $('#myinputfield');
textField.val(textField.val()+' after clicking')
});​
HTML
<form>
<input id="myinputfield" value="This is some text">
<br>
<button onclick="text()">Click me!</button>​
</form>
Javascript
const myinputfield = document.querySelector("#myinputfield");
function text() {
myinputfield.value = myinputfield.value + "after clicking";
}
I know this question is almost ten years old but this answer does not use jquery so it may be useful to others.
https://codepen.io/frog22222/full/oNdPdVB

Categories