I have the following code:
<input type="text" value="name" id="name" />
<input type="button" id="button" value="Click Me" /></p>
<script>
$( "#button" ).click(function() {
var text = $("#name").val();
$.ajax({
url: 'page.php',
type: "POST",
data: {
text: text
},
success: function(response) {
alert("inserted");
}
});
});
</script>
and everything works fine now, but after clicking the button I get the popup msg (alert) saying the data was inserted. Instead of that I want to grey out the textfield - is it possible?
You can make the text input disabled using prop(). This will also grey it out in most browsers. Try this:
success: function(response) {
$('#name').prop('disabled', true);
}
function disable(){
$("#name").prop("disabled",true);
}
Try this way after ajax success callback,
$("#name").attr('readonly', 'true'); // mark it as read only
$("#name").css('background-color' , '#DEDEDE'); // change the background color
Related
I know this is probably a duplicate question. I am trying to use the value of a textbox and just show it in my console.log. It appears for a second and disappears.
Here is my HTML form
<form>
<input type ="text" id="search" name="search" placeholder="Search..." size="45" required>
<input type ="submit" value="GO" id="submit">
</form>
Here is my JavaScript
$(function(){
$("#submit").on("click", function(){
var t = document.getElementById("search").value;
console.log(t);
});
});
For future context, I am trying to use that information to plug it into the wikipedia API.
var wikipediaURL = "https://en.wikipedia.org//w/api.php?action=opensearch&search="+ t +"&format=json&callback=?";
$.ajax({
url: wikipediaURL,
type:'GET',
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function(data, status, jqXR){
console.log(data);
},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("fail");
})
.always(function() {
console.log("complete");
});
Reason you see it for a moment in your console and then it's disappear is you are using submit button inside your form and whenever you click submit button it will by default submit the form and refresh the page if target is same page unless you stop form submission.
In order to avoid form submission try this.
$(function(){
$("#submit").on("click", function(){
var t = document.getElementById("search").value;
console.log(t);
e.preventDefault(); // this will also do the trick and avoid form submission.
return false; // return statement is included just as safety measure as this will make sure form is not submitted.
});
});
How can I clear the input tag with javascript in this code?
I've tested many ways but could not.
<div id="center">
<p id="alert">FILL FIELDS</p>
<input id="name"/>
<input id="family"/><br />
<button onclick="SaveData()" type="submit">INSERT</button>
</div>
<script>
function SaveData() {
var name = $('#name').val();
var family = $('#family').val();
$.ajax({
type: "POST",
url: "server.php?p=add",
data: "fn="+name+"&ln="+family,
success: function(msg){
document.getElementById('alert').innerHTML = "SUCCESS SAVE";
}
});
}
</script>
To clear the name input, you can use jquery .val() function to reset to empty string:
$('#name').val('');
Yes, do it in your success function:
success: function(msg){
document.getElementById('alert').innerHTML = "SUCCESS SAVE";
$('#name').val(''); // set the value to blank with empty quotes
$('#family').val('');
}
what's up guys? look... I have a comment system for my web page... and I've been dealing with this little problem for a entire week. I really need some help here x_x ... the thing is that when a user leave a comment on my page, this comment is showed automatically thanks to ajax, that's ok...
each comment can be voted. and here's my problem... these divs that contain the forms for voting are build dynamically and the thing is that when I do click on the button for sending the form in any comment... the resulting data appears in all the comments! instead of appear in the specific one where the submit button was clicked, so I don't know what to do at this point, I hope you can give me a hand. this is my code
the form:
<label > Vote </label>
<form action="vote.php" method="POST" class="form-vote" id="form-vote">
<button class="icon-thumbs-up" id="icon-thumbs-up"></button>
<input hidden="hidden" type="text" name="num-comment" id="num-comment" value="'.$d['id'].'" >
<input hidden="hidden" type="text" name="point" id="point" value="'.$d['point'].'" >
<p id="actual-points" class="actual-points"> '.$d['point'].'</p>
<div id="result" class="result"> </div>
</form>
the script:
<script type="text/javascript">
$(document).ready function() {
$('.form-vote')on('submit', function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('.actual-points').hide();
$('.result').html(data).fadeIn('slow');
}
})
return false;
});
})
</script>
Have you tried saving the 'this' object of the original event and using it inside the success function like this:
$('.form-vote')on('submit', function(e) {
e.preventDefault();
var $form = $(this); // Save here
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
// use here
$form.find('.actual-points').hide();
$form.find('.result').html(data).fadeIn('slow');
}
})
return false;
});
change this:
$('.result').html(data).fadeIn('slow');
to this:
$(this).find('.result').html(data).fadeIn('slow');
I have a textbox which is passed to the api....the text entered is stored...
<input type="text" id="name" placeholder="Type something">
The below code works in developer mode of chrome with breakpoints but doesnt work without it...
$("#submit").click(function() {
var name = $('#name').val() ;
var url = "https://www.mariyano.com/app-server/test/?action=add_list&name="+name;
$.ajax({
url: url,
dataType: "jsonp",
});
Actually no idea what's wrong but here is a working source code: http://jsfiddle.net/HLmsr/
JavaScript
$("#submit").click(function() {
var name = $('#name').val() ;
var url = "https://www.mariyano.com/app-server/test/?action=add_list&name="+name;
$.ajax({
url: url,
dataType: "jsonp",
error: function (e) {
console.log(e);
},
success: function (data) {
console.log(data);
}
});
});
HTML
<input type="text" value="" id="name" />
<input type="button" id="submit" value="Submit" />
Try to modify your code like this:
$("#submit").click(function(evt) {
evt.preventDefault();
var name = $('#name').val() ;
...
If you don't call preventDefault and "submit" is a submit-input type, it could happen that the code is not executed because instead the browser navigates to another page.
See jquery reference for more details: jquery
I've got a problem with submitting AJAX forms - using this tutorial.
My forms are in div#upform and when I'm trying to submit any of them via $.ajax it submits only the first one, here's the code:
$(function() {
$(".button").click(function() {
var txt = $(".tekst#test").val();
var dataString = 'tekst='+ tekscior;
$.ajax({
type: "POST",
url: "upload/base",
data: dataString,
success: function() {
$('#upform').html("<div id='message'></div>");
$('#message').html("<h2>described!</h2>")
.append("<p>thanks!</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='http://artivia-dev2/i/check.png' />");
});
}
});
return false;
});
});
AND Here are my forms:
<!-- ONLY THIS ONE IS SUBMITTED, EVEN WHEN I'M SUBMITTING THE SECOND ONE! -->
<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>
<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>
##UPDATE
Problem, when I submit one form - it's great - but when after this one submit I want to submit the second - the data is submitted correctly, but the success messages are refreshed in both forms, that's the fix, which I've triend to use, but it doesn't work:
$.ajax({
type: "POST",
url: "upload/base",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
var mess = $(this).closest('.message');
mess.html("<h2>Described</h2>")
.append("<p>Thanks!</p>")
.hide()
.fadeIn(1500, function() {
mess.append("<img id='checkmark' src='http://ar-dev2/i/check.png' />");
});
}
});
First, you should not use same id to multiple element. Instead of that you may use class or name or data attribute.
$(".button").click(function() {
var upform = $(this).closest('.upform'); // keep reference of upform
var txt = $(this).prev(".tekst").val(); // this will retrieve the value of input
// nearest to the button
var dataString = 'tekst='+ tekscior;
......
$.ajax({
type: "POST",
url: "upload/base",
data: dataString,
success: function() {
upform.html();
.....
}
});
});
Problem with var txt = $(".tekst#test"); selector:
It has been started searching from top and when it found a match it stop journey and return the value and you always get the value of first one. If you use
var txt = $(".tekst"); without id, you will face the same problem.
IDs are singular. You can not have the same id on the page more than once!
If you want to repeat identifiers, use name.
You should be using different ids for both the forms. Both your forms have the same id upform