Javascript Radio buttons issue

Javascript Radio buttons issue - javascript

I have two radio buttons - 'Italian' & 'Spanish'. When one is selected, I wont the autocomplete for 'Main' and 'Starter' inputs to be populated from different files. So when 'Spanish' is checked, it does autocomplete from http://xxx/spanish.php, and when 'Italian' is check, it does it from http://xxx/italian.php.
var radio1 = document.getElementById("radio1");
var radio3 = document.getElementById("radio3");
if (radio1.checked){
alert("radio1 selected");
//Starter Autocomplete (Spanish)
var starterSearchData;
$(function() {
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: "jsonp",
async: false,
success: function(data) {
starterSearchData = $.map(data, function(item) {
if (item.course == "starter")
return item.name;
});
EnableAutoComplete();
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
function EnableAutoComplete() {
$("#starter").autocomplete({
source: starterSearchData,
minLength: 2,
delay: 010
});
}
});
//Main Autocomplete (Spanish)
var mainSearchData;
$(function() {
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: "jsonp",
async: false,
success: function(data) {
mainSearchData = $.map(data, function(item) {
if (item.course == "main")
return item.name;
});
EnableAutoComplete();
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
function EnableAutoComplete() {
$("#main").autocomplete({
source: mainSearchData,
minLength: 2,
delay: 010
});
}
});
}else if (radio3.checked) { .... same code, except url changed to http://xxx/italian.php... }
HTML:
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Spanish</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Italian</label>
</div>
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>
The ajax call, etc, works, but when i try the if statement, the fields do not populate/autocomplete.
Thanks.

You could use the value of the radio as the url in ajax. And retrieve checked value via jquery selector.
//Starter Autocomplete (Spanish)
var starterSearchData;
$(function() {
$.ajax({
url: $("#radio input:checked").val(),
dataType: "jsonp",
async: false,
success: function(data) {
starterSearchData = $.map(data, function(item) {
if (item.course == "starter")
return item.name;
});
EnableAutoComplete();
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
function EnableAutoComplete() {
$("#starter").autocomplete({
source: starterSearchData,
minLength: 2,
delay: 010
});
}
});
//Main Autocomplete (Spanish)
var mainSearchData;
$(function() {
$.ajax({
url: $("#radio input:checked").val(),
dataType: "jsonp",
async: false,
success: function(data) {
mainSearchData = $.map(data, function(item) {
if (item.course == "main")
return item.name;
});
EnableAutoComplete();
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
function EnableAutoComplete() {
$("#main").autocomplete({
source: mainSearchData,
minLength: 2,
delay: 010
});
}
});
HTML:
<div id="radio">
<input type="radio" id="radio1" name="radio" value="http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php"><label for="radio1">Spanish</label>
<input type="radio" id="radio3" name="radio" value="http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/italian.php"><label for="radio3">Italian</label>
</div>
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>

Related

How can i make an option selected with jquery-template

I'm using jquery-template and i need make an option selected, according json's value.
Javascript:
$.ajax({
type: 'POST',
url: caminho + '/controller/ctrl_usuario.php',
data: 'acao=buscarUsuarioPorId&idUsuario=' + id,
dataType: 'json',
success: function (response) {
if (response.status == 1) {
//$('.cadastro').append(response.dados);
$("#" + id).loadTemplate(caminho + "cadastro/form-usuario.php", response.dados, {error: function (e) {
console.log(e);
}});
}
},
complete: function () {
//code
}
});
json returned:
"dados":[{"nome":"Maria Silva","l_Sexo":"F"}]"
<div class="wrp-inp">
<label for="genero">Gênero:</label>
<span class="icon-chevron-down"></span>
<select name="genero" id="genero" >
<option value="M" {{if l_Sexo == 'M'}}selected{{/if}}>Male</option>
<option value="F" {{if l_Sexo == 'F'}}selected{{/if}}>Female</option>
</select>
</div>
The sample above didn't work.

Just do:
var value = 'M';
$('select[name="genero"]').val(value);

The complete Solution:
Javascript:
$.ajax({
type: 'POST',
url: caminho + '/controller/ctrl_usuario.php',
data: 'acao=buscarUsuarioPorId&idUsuario=' + id,
dataType: 'json',
success: function (response) {
if (response.status == 1) {
$("#" + id).loadTemplate(caminho + "cadastro/form-usuario.php", response.dados, {error: function (e) {
console.log(e);
}});
var sexo = response.dados[0].l_Sexo;
$("#genero").val(sexo);
}
},
complete: function () {
//code
}
});
HTMl:
<div class="wrp-inp">
<label for="genero">Gênero:</label>
<span class="icon-chevron-down"></span>
<select name="genero" id="genero" >
<option value="M">Masculino</option>
<option value="F">Feminino</option>
</select>
</div>

selected checkboxes(dynamically created) values should be set to destination text field

For destination text field, based on the input, the auto suggestion will be displayed as checkboxes. I can select one or more values and my requirement is to get these selected values on the controller side, Once I click on the search button. How can I achieve this for dynamic checkboxes, please provide any suggestions.
jquery:
$("#destinationName").autocomplete({
source : function(request, response) {
$.ajax({
url: "${pageContext.request.contextPath}/showDestinations",
type: "POST",
data: { term : request.term },
dataType: "json",
success: function(data) {
$('.dest').html("");
$.each(data, function(i, record) {
$('.dest').append("<br/><input class= 'src' type='checkbox' id='chk-" + i + "' name='" + record + "' /> " + record);
});
HTML:
<form method="post" id="searchForm" action="someAction/showStatistics" id="ems">
<label>Destination</label>
<input type="text" id="destinationName" name="destinationName" value="${someForm.destinationName}" class="field" />
<div class="dest"></div>
<input type="submit" class="button" value="search" />
</form>

Try this
$(document).ready(function () {
var dynamicCheckbox = [];
$("#destinationName").autocomplete({
source : function(request, response) {
$.ajax({
url: "${pageContext.request.contextPath}/showDestinations",
type: "POST",
data: { term : request.term },
dataType: "json",
success: function(data) {
$('.dest').html("");
$.each(data, function(i, record) {
$('.dest').append("<br/><input class= 'src' type='checkbox' id='chk-" + i + "' name='" + record + "' /> " + record);
});
};
});
}
});
$('.button').on('click', function (event) {
event.preventDefault();
$('.dest input:checked').each(function() {
dynamicCheckbox.push($(this).attr('name'));
});
console.log(dynamicCheckbox);
});
});
Here in dynamicCheckbox you will get the names of the checked checkboxes.
Hope that's what you need!

show php json data into jquery ajax

I'm very new in this topic.I have a Json result something like this :
{
"span": " 1",
"numcard": "12",
"chan": " Yes",
"idle": "Yes",
"level": "idle ",
"call": "No ",
"name": ""
}
How can I show all the json data using a ajax .I currently have this code written up and although i am getting the data its not quite working the way i want it to be.
$("a[name=cardNo1]").click(function() {
var cardNo1 = $(this).attr("id");
$("a[name=cardNo1]").each(function() {
cardNo1 += "";
});
var dataString = "action=spanchan" + "&cardNo=" + cardNo1;
$.ajax({
type: "POST",
url: "dahdiprocess.php?",
data: dataString,
dataType: 'json',
success: function(data, status) {
if (data != "") {
$.each(data, function(key, val) {
$("#span").val(val.span);
$("#numcard").val(val.numcard);
$("#chan").val(val.chan);
$("#idle").val(val.idle);
$("#level").val(val.level);
$("#call").val(val.call);
$("#name").val(val.name);
});
}
}
});
});
<input id="span" name="span" value="" />
<input id="numcard" name="numcard" value="" />
<input id="chan" name="chan" value="" />
<input id="idle" name="idle" value="" />
<input id="level" name="level" value="" />
<input id="call" name="call" value="" />
<input id="name" name="name" value="" />
when I try to alert ,example alert(val.span) it keep showing undifined .Does anyone with experience in this topic and see if any problem about my code? Any help would be greatly appreciated.Thank you .

You are returning a single set of values so you do not need the each within your success handler. Try this:
success: function(data, status) {
if (data != "") {
$("#span").val(data.span);
$("#numcard").val(data.numcard);
$("#chan").val(data.chan);
$("#idle").val(data.idle);
$("#level").val(data.level);
$("#call").val(data.call);
$("#name").val(data.name);
}
}
In theory, you shouldn't need the data != "" check as your server side code should not be allowed to return an empty response for when the result of the request is 200 OK.

Try this:
$("a[name=cardNo1]").click(function() {
var cardNo1 = $(this).attr("id");
$("a[name=cardNo1]").each(function() {
cardNo1 += "";
});
var dataString = "action=spanchan" + "&cardNo=" + cardNo1;
$.ajax({
type: "POST",
url: "dahdiprocess.php?",
data: dataString,
dataType: 'json',
success: function(data, status) {
if (data != "") {
$("#span").val(data.span);
$("#numcard").val(data.numcard);
$("#chan").val(data.chan);
$("#idle").val(data.idle);
$("#level").val(data.level);
$("#call").val(data.call);
$("#name").val(data.name);
}
}
});
});

should be
if (data != "") {
$("#span").val(data.span);
$("#numcard").val(data.numcard);
$("#chan").val(data.chan);
$("#idle").val(data.idle);
$("#level").val(data.level);
$("#call").val(data.call);
$("#name").val(data.name);
}

Ajax call on checking a checkbox

I am having a two checkboxes.Now on click of one of the checkbox I want to make an ajax call to a jsp page.That jsp page is to show a table that contains datat being fetched from database.
Now,The problem is say i have two checkboxes like :
<div class="search-inputs">
<input class="searchName" type="text" placeholder="Search Here.."></input>
<input class="searchType1" type="checkbox" name="emailNotification"><label class="searchtype1label">Email Notification</label></input>
<input class="searchType2" type="checkbox" name="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>
<input class="searchDateFrom" type="text" placeholder="Search From"></input>
<input class="searchDateTo" type="text" placeholder="Search To"></input>
<input class="Datesubmit" type="button" value="Search"></input>
<div id="container"></div>
How to do it ?Please help
My Script part :
$(document).ready(function () {
$('.search-select').on('change', function(){
$('.search-inputs').children().hide();
var classn =$(this).find(":selected").val();
//alert(classn);
if(classn=='searchName')
{
//alert("searchname");
$('.'+"searchName").show();
}
else if(classn=='searchType')
{
//alert("searchType");
$('.'+"searchType1").show();
$('.'+"searchtype1label").show();
$('.'+"searchType2").show();
$('.'+"searchtype2label").show();
}
else if(classn=='searchDate'){
//alert("searchType");
$('.'+"searchDateFrom").show();
$('.'+"searchDateTo").show();
$('.'+"Datesubmit").show();
}
});
$('#emailNotification').on('change',function() {
//var checked = $(this).is(':checked');
if(this.checked){
//alert("in");
$.ajax({
type: "POST",
url: "searchOnType.jsp",
data: {mydata: "emailNotification"},
success: function(data) {
alert('it worked');
$('#container').html(data);
},
error: function() {
alert('it broke');
},
complete: function() {
alert('it completed');
}
});
}
});
});
But how to show the table on the same page ?

you have to change your html slightly with this--
give same class name to both check boxes.
<input class="searchType" type="checkbox" name="emailNotification" id="emailNotification"><label class="searchtype1label">Email Notification</label></input>
<input class="searchType" type="checkbox" name="SharingNotification" id="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>
Now slightly change in jquery part--
$('.searchType').click(function() {
alert($(this).attr('id')); //-->this will alert id of checked checkbox.
if(this.checked){
$.ajax({
type: "POST",
url: 'searchOnType.jsp',
data: $(this).attr('id'), //--> send id of checked checkbox on other page
success: function(data) {
alert('it worked');
alert(data);
$('#container').html(data);
},
error: function() {
alert('it broke');
},
complete: function() {
alert('it completed');
}
});
}
});

you have to use change event for this like below:
Html:
<input class="searchType1" type="checkbox" name="emailNotification"><label class="searchtype1label">Email Notification</label></input>
<input class="searchType2" type="checkbox" name="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>
<div id="container">
</div>
JQuery:
$('#emailNotification').on('change',function() {
if(this.checked){
$.ajax({
type: "POST",
url: "searchOnType.jsp",
data: {mydata:"emailNotification"},
success: function(data) {
alert('it worked');
$('#container').html(data);
},
error: function() {
alert('it broke');
},
complete: function() {
alert('it completed');
}
});
}
});

Ajax success: {return false;}

I want to return false from $.ajax when success is complete:
$.ajax({
url: '' + $website_url + 'queries/voorraad_berekenen.php',
type: 'post',
data: {
aantal: $(this).parent('form').children('.quantity').val(),
item_number_1: $(this).parent('form').children('.item_number_1').val()
},
success: function(result) {
return false;
}
});
This doesn't work. Is there a work around?

From your post I guess that you call a function that contains the $.ajax() and try to return false to that function. but you can't do that such way, because AJAX is asynchronous.
It's better to call a function from the ajax success function like following:
$.ajax({
url: '' + $website_url + 'queries/voorraad_berekenen.php',
type: 'post',
data: {
aantal: $(this).parent('form').children('.quantity').val(),
item_number_1: $(this).parent('form').children('.item_number_1').val()
},
success: function(result) {
var returned = true;
if(some_condition_not_satisfied) {
returned = false;
} else {
}
// call a function
calledFromAjaxSuccess(returned);
}
});
function calledFromAjaxSuccess(result) {
if(result) {
alert('TRUE');
} else {
alert('FALSE');
}
}

Maybe you could try something like this (values 1 and 0 should be changed to the ones that you use):
success: function(result){
if(result === '1'){
// do something
}
else
return false;
}

just use asunc false it can work fine i have implemented like that only
just try it
$.ajax({
url: '' + $website_url + 'queries/voorraad_berekenen.php',
type: 'post',
data: {
aantal: $(this).parent('form').children('.quantity').val(),
item_number_1: $(this).parent('form').children('.item_number_1').val()
},
async: false, //=>>>>>>>>>>> here >>>>>>>>>>>
success: function(result) {
return false;
}
});
it is working fine try it once

<form action="yourpage" method="post" onsubmit="return matchpass();">
<div>
<label> Name</label>
<input type="text" name="name" id="name">
</div>
<div>
<label> Email ID</label>
<input type="email" name="email" id="email">
</div>
<div>
<label> Mobile No</label>
<input type="text" name="mob" maxlength="10" onkeyup="check_if_exists();" autocomplete="off" id="mob">
</div>
<div>
<button type="button" >Send</button>
</div>
<span id="err"></span>
<div>
<label> OTP</label>
<input type="password" name="otp" id="otp" maxlength="6" placeholder="****">
<span id="err2"></span>
</div>
<div>
<input type="reset" value="Reset" class="reset-btn">
<input type="submit" name="submit" id="submit" value="Submit" >
</div>
</form>
<input type="hidden" id="otpcheck"/>
<script>
function matchpass()
{
$.ajax({
type:"post",
url: "yourpage",
data:{ mobile:mob,otp:otp},
success:function(data)
{
if(data==1)
{
document.getElementById("otpcheck").value=1; //important
}else{
document.getElementById("err2").style.color = "red";
document.getElementById("err2").innerHTML = "invalid OTP Number ";
document.getElementById("otpcheck").value=0; //important
}
}
});
if(document.getElementById("otpcheck").value==0){
return false;
}
}

I face this problem. then i found the actual solution. use async : false, inside ajax call
function thisisavailavailusername(uname){
var dataString = 'username='+ uname.value;
var trueorfalse = false;
$.ajax({
type: "post",
url: "/BloodBook/checkavailableusername",
data: dataString,
cache: false,
async : false, //user this then everything ok
success: function(html){
if(html=="true"){
$('#validusername').html('Available');
trueorfalse = true;
}else{
$('#validusername').html('Not Available');
trueorfalse = false;
}
},
error: function() {
alert("Something Wrong...");
}
});
return trueorfalse;
}

Develop Reference

JavaScript is the programming language of the Web.

Javascript Radio buttons issue - javascript

Related

How can i make an option selected with jquery-template

selected checkboxes(dynamically created) values should be set to destination text field

show php json data into jquery ajax

Ajax call on checking a checkbox

Ajax success: {return false;}

Categories

Resources