I have used the following code in index.jsp to set the value of textarea INPUT_TEXT and INPUT_TEXT2 in a form after extensive processing, wherein the text goes through a servlet, a java class and the preprocessed data then gets returned to the 2nd textarea.
CODE I:
<td>
<%
String txtvalue="";
if(request.getAttribute("x")!=null){
txtvalue=request.getAttribute("x").toString();
System.out.println("txtvalue= "+txtvalue);
}%>
<textarea id="INPUT_TEXT" name="INPUT_TEXT" style="font-size: 13pt;" rows="15" cols="50"><%=txtvalue%></textarea>
</td>
<td>
<%
String txt="";
if(request.getAttribute("y")!=null){
txt=request.getAttribute("y").toString();
System.out.println("txt= "+txt);
}%>
<textarea id="INPUT_TEXT2" name="INPUT_TEXT2" style="font-size: 13pt;" rows="15" cols="50"><%=txt%></textarea>
</td>
I have tried using
1)innerHTML,
2)setting the value using document.getElementById("INPUT_TEXT") and
3)the present method which I have given in the code I.
Unfortunately, nothing works!
Method 3 (code I) used to work, but then I had to make some changes in the function that is called after onclick, to make a POST request, which now looks like this:
CODE II
function submitPreprocessForm() {
var postData=$("#maryWebClient").serializeArray();
$.ajax({
url: "preprocess",
context:this,
type:"POST",
dataType:"JSON",
data:postData,
contentType: "application/x-www-form-urlencoded;charset=utf-8",
success: function(response){
}
});
}
Now, the txt and txtvalue (Code I) are being printed only to the NetBeans output console (correctly, I might add) but not to the webpage, which gets reset when I click the submit button. Thus, although the entire internal functioning works perfectly, the only problem is text not being displayed in the respective textareas.
Kindly help.
The following approach solved my problem and text is displayed in the textrea.
success: function(response){
$("#INPUT_TEXT").val(response["x"]);
$("#INPUT_TEXT2").val(response["y"]);
},
I had to remove the <%=txtvalue%> as it caused the textarea to be initialized to null.
<div>
<textarea id="text" ></textarea>
<button type="submit" onclick="show()"> submit</button>
</div>
function show(){
let a = document.getElementById("text");
console.log(a.value);
}
The above JS function show() , shows the content in textarea after clicking the submit button .
Related
I have the following html:
<div class="form-outline mb-4">
<input type="text" id="PlanID" asp-for="PlanID" name="PlanID" class="form-control form-control-lg" value="#Model.PlanID" />
<label id="errorLabel" name="errorLabel" class="form-label text-danger" for="PlanID"></label>
</div>
<button class="btn btn-primary btn-lg btn-block" type="button" disabled id="nextButton" name="nextButton" onclick="DisplayProgressMessage(this, 'Next');">Next</button>
And I have the following jquery:
$.ajax({
type: "POST",
url: "#Url.Action("CheckPlanID")",
data: {PlanID: planID},
dataType: "text",
success: function (msg) {
if (msg.length > 4) {
console.log(msg.length);
$("#nextButton").prop("disabled", true);
$("#errorLabel").text = msg;
}
},
error: function (req, status, error) {
console.log(msg);
}
});
I have additional jquery that keeps the button disabled until the length of the data in the input is 4. When the length is 4, I enable the button.
When running the code, as soon as the length of the data in the input box is 4, the button is enabled and I click on it. the ajax executes and sends the data to my controller. The controller processes the data and will send back a string. If the length of the returned string is greater than 4, then the string being returned is an error string and that error string should get displayed to the user.
When I run the code and force an error, I can see the length of the error string being displayed in the console so I know this section of code is being executed. The button gets disabled, but the text of the errorLabel is not changing.
The text of the errorLabel should change to the error message. Is there something else that needs to be done? Am I missing something?
Thank you!
In jQuery, text is a method not an attribute so to fix your issue you'd simply change this
$("#errorLabel").text = msg
into this
$("#errorLabel").text(msg)
Also it seems, based on your code if (msg.length > 4), you only change the text if msg length is greater than 4. That means, unless msg has 5 characters or more the text won't change.
Learn more about text() method on jQuery docs.
I have a form on a page.
<div id="form_catch">
<form id="form2">
<div><input type="button" value="Dear Diary" id="add" /><input type="button"
value="Dear Friend" id="add_1" /></div>
<div><input type="text" id="salutations" name="salutations" value=""/></div>
<input type="submit" value="Submit" class="submit" />
</form>
</div>
I use a javascript to manipulate this form
$(document).ready(function(){
var form_box_copy = $('#form_catch').html()
$("#add").click(function(){
$('input#salutations').val('Dear Diary,');});
$("#add_1").click(function(){
$('input#salutations').val('Dear Friend,');});
//console.log('test button');
$("form#form2").submit(function(evt){
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://wei.rocks/test2.html',
type: 'GET',
data: {
format: 'html'
},
enctype: 'multipart/form-data',
processData: false,
error: function(){alert('You Failed');},
success: function (response) {
alert('You passed');
$('#form_catch').html(form_box_copy + "html replaced");
$('#form_catch').append("Test222222222");}
});
return false;
})
})
When I run the page the scrip works as designed I ajax the form, the task are successful. After success It replaces the form with a fresh copy of it self. All this work except when it is complete the Replacement of the form is no long working with the Java script.
The reason this is happening is because when you replace the form with the new html, it discards the submit event registration attached to the form.
To bypass it you can either re-register the event or, as a better approach, register the event at the document level.
Simply change:
$("form#form2").submit(function(evt){
// your code
});
to:
$(document).on('submit', '#form2', function(evt) {
// your code
});
});
This should now work since the event is registered at the document level and not at the form level (and the document is never being replaced).
In general if you are replacing DOM elements, then the events registered to them will no longer work. This is why registering to the element's parent is a better approach (when needed).
See this codepen for working example.
Hope this helps.
Hi I'm new to jQuery and Ajax
And I tried to make code that searching only last word
<form action="/index/output" method="POST">
<input type="text" name="text_box" id="target">
</form>
<script>
$('#t').keyup(function(){
$.ajax({
url : '/index/output',
data : {
text_box : $('input:text').val()
},
success : function(html) {
$('#result').html(html);
}
})
})
</script>
<div id="result"> </div>
Now when users type something, it show the results at <div id="result">
but I want to submit the data of last word
For example
When users type this sentence in textbox
He is a handsome guy
I want to make transmit only "guy"(typed last) through keyup() event
Is it possible to make it using jQuery..? I can't get the hang of it...
var str = 'He is a handsome guy';
var word = str.split(" ").pop();
alert(word);
Fiddle
You can get the value of the input then split that value getting the last word like above
FIDDLE WITH INPUT
Its ok to do the keyup event but i suggest you do it on an event click or event change
I've got some code that sends an ajax request when a form is being submitted. This works the first time the form is submitted (it's a search module), but only once. I've added an effect to highlight the table when data is returned, and you can only see it once (the data changes only once as well).
When I look at the response in the chrome dev tools, I can see it contains the data of the new search query but this isn't shown. Why can I only display results once?
JS:
$(function () {
// Creates an ajax request upon search form submit
var ajaxFormSubmit = function () {
var $form = $(this);
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr("data-nn-target"));
var $newHtml = $(data);
$target.replaceWith($newHtml);
$newHtml.effect("highlight");
});
// Prevent default action
return false;
};
$("form[data-nn-ajax='true']").submit(ajaxFormSubmit);
});
HTML:
<form method="GET" action="#Url.Action("Index", "Show")" data-nn-ajax="true" data-nn-target="#contentlist" class="form-search">
<div class="input-append mysearch">
<input type="search" class="span5 search-query" name="query" data-nn-autocomplete="#Url.Action("AutoComplete")" />
<input type="submit" class="btn" value="Search" />
</div>
</form>
<div id="contentlist">
#Html.Partial("_Shows", Model)
</div>
I think you should use html() instead of replaceWith() method:
$target.html($newHtml);
just an idea... try
$target.html(data);
instead of
$target.replaceWith($newHtml);
By replaceWith, you might actually remove the div that you want to fill your content in. Then, the second time, it doesnt find the div to insert the content into.
i still have problem in my code. i want the Java get the string froom the input text field and compare to another string, it´s true, send to some url. i did this code, but it doesn´t work.
<input type="text" name="procura" id="pro" value="" />
<script language="JavaScript">
function ver(){
var pp = document.getElementById('pro').value;
if (pp.equals('advogados'))
{
window.location = "http://www.jornalexemplo.com.br"
//do something
};
};
</script>
</div></td>
<td width="399"><input type="submit" name="Busca" id="Busca" value="AWR Procura" onsubmit="ver()"; /></td>
Change the type of button instead of submit. call that method onClick.
<input type="button" name="Busca" id="Busca" value="AWR Procura" onClick="ver()"; />
submit only use when you need to send data on server.
Instead of using pp.equals,use
if(pp == 'advogados')
then it works properly.
and change the submit button to button and call the function