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?
Related
I have a problem. I want to exchange certain data using PHP, MySQL and Ajax.
To do this I always have to pass the ID of a field to my backend, so I can continue working with this ID.
How do I pass the value from my button to my URL in Ajax?
What do I have to consider?
row['id'] is my variable (PHP)
HTML Code:
<a class='commentSikayet'>
<button id='commentSikayet' name='commentSikayet' value='{$row['id']}'>
Şikayet et
</button>
</a>
Ajax:
$(document).ready(function () {
$("#commentSikayet").click(function () {
$.ajax({
url: 'report_comment.php',
type: 'POST',
data: {bar: $("#bar").val()},
success: function (result) {
alert('Erfolgreich gemeldet.');
}
});
});
});
Assuming there might be more than one data sets in your page I modified your example to the following snippet. Each buttons has a data-id attribute that identifies the current dataset (the id would be supplied through your PHP script as $row["id"]):
$("body").on("click","button", function(ev){
ev.preventDefault(); // prevent submitting a form ...
let data={cmt_id: $(this).data("id"),
value: $(this).prev().val()}
$.post("https://jsonplaceholder.typicode.com/comments",data)
.done(function (result) {
console.log("Erfolgreich gemeldet:",result);
});
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div><input type="text" value="some text">
<button name="commentSikayet" data-id="123">Şikayet et</button></div>
<div><input type="text" value="some other text">
<button name="commentSikayet" data-id="124">Şikayet et</button></div>
<div><input type="text" value="more text">
<button name="commentSikayet" data-id="125">Şikayet et</button></div>
In your backend PHP script (taking the place of the above typicode-URL) you can pick up the values from the $_POST superglobal as
$_POST["cmt_id"]; // id value
$_POST["value"];. // actual text content
Since you're listening for the click event on the button, you can access it via this in your handler function.
Add the name / value pair to your AJAX data option
$("#commentSikayet").on("click", function (e) {
e.preventDefault();
$.post("report_comment.php", {
bar: $("#bar").val(),
[ this.name ]: this.value // add name / value in here
}).done(function (result) {
alert('Erfolgreich gemeldet.');
});
});
This will include commentSikayet=rowIdValue in the POST request body which you access on the PHP side via...
$rowId = $_POST["commentSikayet"];
<td><input type="text" name="product_code[]" id="product_code1" class="form-control input-sm" /></td>
I have been creating an invoice system ... how can I access a specific input to get its text ( product code ) and load the description from the database???
I know how to access all the elements but cannot access the specific one the user is typing text :(
using the below code trying to get the value returns all the values of the product code text inputs and only works for the first one
$('[name="product_code[]"]').keyup(function() {
var values = $("input[name='product_code[]']")
.map(function(){return $(this).val();}).get();
alert(values);
});
#AlexisGarcia lets say user types product code I want to access the db and retrieve product description for that product code ... how do I get through javascript or jquery the value of the specific input the user is typing???
You have to use AJAX to get that from Database.
First you need to get what the user has typed (input value), and then send it to AJAX. Here is an example:
$('#product_code1').keyup(function(){
var user_text = $(this).val();
$.ajax({
method: 'post',
url: 'link_to_your_controller',
data: {text: user_text},
dataType: 'json',
complete: function(data) {
//..DO SOMETHING WITH RESULT FROM DB
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<input type="text" name="product_code[]" id="product_code1" class="form- control input-sm" />
</td>
You need to learn about AJAX to do what you need.
You can start by reading https://www.w3schools.com/xml/ajax_intro.asp
$('.input-sm').keyup(function() {
var values = $(this).val();
alert(values);
});
Try this code, you will get what you want
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 :)
I have a text box in index.jsp and after writing something i am calling a jsp by jquery. But my requirement is if a particular value will be matched in server side then how can i auto refresh that text box? It means suppose i entered apple then by onkeyup event i am sending the name(apple) to check.jsp and in this jsp page, I have kept apple in a string. So now an alert will come in index.jsp that apple already exists and simulatenously that text box will be auto refreshed. How can i do it? I am a beginner to this field.
index.jsp
<script type="text/javascript">
$(document).ready(function() {
$("#textbox").keyup(function () {
$.getJSON('check.jsp', {
textboxname: this.value
});
});
});
</script>
inside body
<input type="text" id="textbox" name="textboxname"/>
check.jsp
String textboxname=request.getParameter("textboxname");
on keyup send the value to the server and if it matches return true or false, then in the success handler check what is returned if its true refresh and not do something
$("#textbox").keyup(function () {
$.getJSON('check.jsp', {
textboxname: this.value
},function(data){
if(data.isTrue){
alert("the value already exists");
$("#textbox").val(''); //clear the text box
}
else
//do something
});
});
});
on the server not the exact servlet code but you'll get the idea
JSONObject match = new JSONObject();
//if value matches
match.put("isTrue","true");
else
match.put("isTrue","false");
response.setContentType("application/json");
response.getWriter().write(match.toString());true
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