Trouble creating elements with JQuery - javascript

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 :)

Related

Jquery result is not coming without alert

I did a live search function Laravel 7 using jquery. I used the keyup function. I have written the code tested each and every time for the keypress the alert is working and result also coming but I stop the alert search result is coming I tried the keypress & keydown event also same issues. I don't what is the issue please help me to solve this issue.
<form id="small-search-box-form" action="{{route('MainSearchProduct')}}" method="get">
<input type="text" class="search-box-text" id="search_query" name="search" placeholder="Search store" />
<input type="submit" class="button-1 search-box-button" value="Search" />
<ul class="search-drop" id="result">
</ul>
</form>
$(document).ready(function() {
var input_search = $('#search_query');
input_search.keyup(function() {
//alert(input_search.val());
var query = input_search.val();
$.ajax({
url: "{{ route('MainSearchQuery') }}",
type: "GET",
data: {
'proSearch': query
},
success: function(data) {
$('#result').html(data);
}
}, 10000);
});
$(document).on('click', 'li', function() {
var value = $(this).text();
$('#search').val(value);
$('#result').html("");
});
});

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;
}
});
}
});

How to Replace Div Content and have the JavaScript see the Replaced Content

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.

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

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.

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