Jquery autosuggest with ajax - javascript

I am trying to implement a way in which auto suggest would work with dynamically added input boxes. Everything is working fine with the static input types. i am able to request and retrieve result through ajax with static input types. But when i am trying to do the same thing with the dynamic inputs it is not working here is my code. any help would be appreciated.
<script src="js/jquery.js"></script>
<script src="js/jquery.autoSuggest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
$.noConflict();
jQuery(function(){
var rows = 0;
jQuery('#addRow').click(function(){
jQuery('#userRows').append('<div class="userRow"><input type="text" name="users['+rows+'][name]" /><input type="text" name="country" id="inputBox" /><input type="text" name="id-holder" id="id-holder"> <input type="text" id="price" name="users['+rows+'][price]" />Remove name="users['+rows+'][name]"<div>');
rows++;
location.reload();
});
jQuery(document).on('click', '.removeRow', function(){
jQuery(this).closest('.userRow').remove();
});
// Below just used to show the string on submit
});
</script>
<script type="text/javascript">
<?php
$pluginConf = "";
if(isset($_GET) && count($_GET) > 0){
extract($_GET);
if($limit == "") $limit = "10";
if($width == "") $width = "auto";
$pluginConf = '
$(function() {
$("#inputBox").autoSuggest({
ajaxFilePath : "server.php",
ajaxParams : "dummydata=dummyData",
autoFill : "'.$autofill.'",
iwidth : "'.$width.'",
opacity : "0.9",
ilimit : "'.$limit.'",
idHolder : "id-holder",
prices : "price",
match : "'.$match.'"
});
alert("Worked");
});';
} else {
$pluginConf = '
$(function() {
$("#inputBox").autoSuggest({
ajaxFilePath : "server.php",
ajaxParams : "dummydata=dummyData",
autoFill : false,
iwidth : "auto",
opacity : "0.9",
ilimit : "10",
idHolder : "id-holder",
prices : "price",
match : "contains"
});
alert("Worked");
}); ';
}
echo $pluginConf;
?>
</script>
</head>
<body>
<div>
Item Name # Price
</div>
<form method="post" id="usersForm">
<div id="userRows">
Add Row<br />
</div>
<input type="submit" id="submit" value="Submit" />
<!--<input type="text" name="xxx" id="inputBox">
<input type="text" name="id-holder" id="id-holder">
<input type="text" name="price" id="price"> -->
</form>
</body>
</html>

https://github.com/wuyuntao/jquery-autosuggest/blob/master/jquery.autoSuggest.js
Looking at the code, it seems it only attaches these events (focus) to elements that are created on page load. You would need to write some additional code to add "suggests" to generated input elements.
https://api.jquery.com/on/ use this function.

Related

Get the radio button value through ajax to php file

After clicking the radio button, the value from the radio button is not being passed when the onclick event is triggered. Here is my code:
<form name="Form1" id="color" style="font-size: 100%" action="#">
<input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="blue"/>Blue <br /></p>
<p> <input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="red"/>Red
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function MyAlert() {
var radio1=$('input[type="radio"]:checked').val();
var pass_data = {
'radio1' : radio1,
};
alert(pass_data);
$.ajax({
url : "",
type : "POST",
data : pass_data,
success : function(data) {
}
});
return false;
}
</script>
<?php
echo $radio1=$_GET['radio1'];
?>
When I click the radio button, I get the error
Undefined index: radio1
I want to display value of the radio button when clicking it within the same page.
Firstly make ajax to separate PHP page where you will access the radio value. Also make alert after you receive the data.
$.ajax({
url : "post.php",
type : "POST",
data: pass_data,
success : function(data) {
// alert radio value here
alert(data);
}
});
Crete a separate PHP file post.php where you access radio input. Since you are making POST request you need to use $_POST instead of $_GET to get radio button value.
<?php
$radio1 = $_POST['radio1'];
echo $radio1;
?>
<input type="radio" id="status" name="status" value="1" /> Mbyllur<br />
<input type="radio" id="status" name="status" value="0" /> Hapur<br />
function MyAlert()
{
var radio1=$('input[type="radio"]:checked').val();
var pass_data = {
'radio1' : $('input[name=status]:checked').val(),
};
alert(pass_data);
$.ajax({
url : "",
type : "POST",
data : pass_data,
success : function(data) {
}
});
return false;
}
I would use a newer version of jquery .
You can't give two elements the same id.
I would rewrite the code as follow :
$(function() {
$(document).on('change', '[name="radio1"]' , function(){
var val = $('[name="radio1"]:checked').val();
alert(val);
/*
Ajax code 1 (GET) :
$.get('/myurl?val=' + val, function(){
});
Ajax code 2 (POST) :
$.post('/myurl', {val : val}, function(){
});
*/
});
});
<form name="Form1" id="color" style="font-size: 100%" action="#" >
<input type="radio" name="radio1" value="blue"/>Blue <br />
<p> <input type="radio" name="radio1" value="red"/>Red
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
Try This -->
<form name="Form1" id="color" style="font-size: 100%" action="#" >
<input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="blue"/>Blue <br /></p>
<p> <input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="red"/>Red
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function MyAlert()
{
var radio1=$('input[type="radio"]:checked').val();
//alert(radio1);
var pass_data = {
'radio1' : radio1,
};
//alert(pass_data);
$.ajax({
url : "request.php", // create a new php page to handle ajax request
type : "POST",
data : pass_data,
success : function(data) {
}
});
return false;
}
</script>
request.php
<?php
if(isset($_POST['radio1']))
{
echo $radio1=$_POST['radio1'];
}
?>
Above code handle with ajax so, its not refresh the page.
<script>
$(document).ready(function() {
$("#Enviar").click(function (e) {
var cedula = document.getElementById("Cedula").value;
var Nombre = document.getElementById("Nombre").value;
var Apellido = document.getElementById("Apellido").value;
var Sexo = $('input:radio[name=SexoC]:checked').val();
var Edad = document.getElementById("Edad").value;
var FechaN = document.getElementById("date").value;
var Tele = document.getElementById("tel").value;
var Direccion = document.getElementById("Direccion").value;
var Invitacion = document.getElementById("Invitacion").value;
var CasaG = document.getElementById("CasaG").value;
var Rango = document.getElementById("Rango").value;
var cadena = "Cedula="+cedula+"&Nombre="+Nombre+"&Apellido="+Apellido+"&Sexo="+Sexo+"&Edad="+Edad+"&Fecha="+FechaN+"&Tele="+Tele+"&Direccion="+Direccion+"&Invitacion="+Invitacion+"&CasaG="+CasaG+"&Rango="+Rango;
$.ajax({
type:'POST',
url:'datos/Registrar.php',
data: cadena,
beforeSend: function(){
console.log(cadena);
},
success:function(Resp){
alert(Resp);
}
});
return false;
});
});
</script>

Make a checkbox and check if checked

I have a "terms of use" page, then I have the page where I have payment and such. On this page I would like the user to have to check a checkbox where it will say "if he accepts the terms of use", but I would also like a javascript, for the payment service Stripe, to check if the checkbox is checked and if not it will alert the user to check it and if it is just proceed like always.
I have commented in the script the different functions. I want it to function so if I were to click the checkbox and then click the submit button, it will then work as usual but if I don't check the checkbox, it will then make an alert box. I would like to do this using an "if" function.
The checkbox has to be in the form with the id "payment-form", where the rest of the inputs are.
The javascript is the whole function in the tags. It is the whole function that has to be disabled if the checkbox isn't checked.
My code so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript"> /* this is the javascript function that only has to "launch" if the checkbox is checked and if not it has to make an alert box to the user and not do any of the other functin in the javascript. */
$(document).ready(function() {
var handler = StripeCheckout.configure({
key: 'Removed for safety',
image: 'image2.png',
token: function(token) {
var $form = $('#payment-form');
$form.append($('<input type="hidden" name="stripeToken" />').val(token.id));
$form.get(0).submit();
}
});
$('#customButton').on('click', function(e) {
var amount = Math.round($("#amount").val()*100);
handler.open({
name: 'Payment',
description: 'describtion',
amount: amount
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
});
</script>
</head>
<body>
<div id="header">
</div>
<div id="container">
<div id="content">
<div class="firstproductbidwrap" style="height:500px width:800px">
<form id="payment-form" action="chargeCard.php" method="POST" name="payment-form"> <!-- this is the form I would like to add the checkbox to -->
<input onkeypress="return isNumberKey(event)" type="text" name="amount" id="amount" value="" readonly/>
<input type="text" name="emailForPayment" id="emailForPayment" placeholder="Enter Email"/>
<input type="text" name="displayNameForPayment" id="displayNameForPayment" placeholder="Enter Display Name" maxlength="12"/>
<input type="image" src="button3.png" id="customButton" value="submit" alt="button"/>
</form>
<script type="text/javascript">
function toDec(code) {
return code - 48;
}
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57 || toDec(charCode) != currentVar + 1))
return false;
return true;
}
</script>
<script type="text/javascript">
var request = new XMLHttpRequest();
request.open('GET', 'textFileVariables.txt', false);
request.send();
var currentVar= parseInt(request.responseText)
var nextVar = currentVar + 1;
document.getElementById("currentVar").innerHTML = currentVar;
document.getElementById("nextVarDisplay").innerHTML = nextVar ;
document.getElementById("amount").value = nextVar ;
</script>
<div class="acceptrules">
When participating <!-- this is the text for accept terms with the link -->
<br>
you agree to the rules Terms of Use
</div>
</div>
</div>
</div>
</body>
</html>
What you could is this:
<!--Replace this thing -->
<input type="image" src="button3.png" id="customButton" value="submit" alt="button"/>
<!-- By This -->
<input id="myButton" type="submit" disabled="disabled" />
Then in CSS
<style>
#myButton{
background: url(path/to/your/image.png);
width: 100px; /*Your image size*/
height: 50px; /*Your image height*/
}
</style>
Then, you add this input before your submit
<label><input type="checkbox" id="terms" /> I accept terms and condition</label>
Then in your JS
$('#terms').on('change', function(){
if ($(this).is(':checked')){
$('#myButton').removeProp('disabled');
}
else{
$('#myButton').attr('disabled', 'disabled');
}
});
Put <input type="checkbox" id="agree" /> somewhere in your form and try this:
$('#customButton').on('click', function(e) {
if (!document.getElementById("agree").checked)
alert("You must agree to the TOS.");
else {
var amount = Math.round($("#amount").val()*100);
handler.open({
name: 'Payment',
description: 'describtion',
amount: amount
});
}
e.preventDefault();
});
https://jsfiddle.net/cj6f41aL/

ajaxForm is not working and not returning error

I get a very weird problem when I want to use jQuery ajaxForm.
I want to set form and upload file with having progress percent.
my ajaxForm function is not fire at all.
here is my code but I cant find out where is the problem because I get no error.
function recieve(res,obj)
{
var frm = res.substr(1,res.length-8);
$('#'+frm).find('.error').each(function(){ $(this).remove(); });
if(obj['alert']!=undefined) $(res).html(obj['alert']);
if(obj['field']!=undefined) {
for(var i in obj['field'])
{
/*$("#"+i).next('.error').remove();*/
if(obj['field'][i]!='') $("#"+i).after('<div class="error avesome OC OBC">'+obj['field'][i]+'</div>');
}
}
if(obj['msgbox']!=undefined) alert(obj['msgbox']);
if(obj['location']!=undefined) document.location = obj['location'];
}
function sendAjax(form,response,loader,progress)
{
var frm = $(form);
frm.ajaxForm({
dataType: 'json',
data: frm.serialize()+'&_ajax=1',
beforeSend: function(){
$("input[type='submit']").attr('disabled','disabled');
$(progress).width('0%').parent('.progress').removeClass('hidd');
},
uploadProgress: function(event, position, total, percentComplete){
var pVel = percentComplete + '%';
$(progress).width(pVel);
},
complete: function(data){
recieve(response,unserialize(data));
$(progress).parent('.progress').addClass('hidd');
$("input[type='submit']").attr('disabled',null);
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="setting_form" action="http://127.0.0.1/marketing/users/setting/" method="post" onsubmit="return sendAjax('#setting_form','#setting_form_result','#setting_form_loader','#setting_form_progress');">
<input type="hidden" name="_submit" value="1" />
<input type="hidden" name="data[setting][id]" id="setting_id" value="11" />
<input type="hidden" name="data[setting][data-token]" id="setting_data-token" value="8022735" />
<input type="hidden" name="data[setting][token]" id="setting_token" value="90e18fe55fbc38708456606f4b2b3f96" />
<input type="submit" name="data[setting][submit]" id="setting_submit" value="send" />
<div id="setting_form_progress" class="bar fade"></div>
<div id="setting_form_result"></div>
</form>
i guess you missing the this library
http://malsup.com/jquery/form/
insert the code after
jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

jquery Clone and with remove button of newly cloned item [duplicate]

All,
I need to add a "delete" link to the end of all of my cloned sections, but not the source of the cloned material. This is what I have so far
Need something like this:
Step One:
Step Two:(The cloned material does not get a delete link)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Demo</title>
<script type="text/javascript">
var uniqueId = 1;
$(function() {
$('.addRow').click(function() {
var copy = $("#cosponsors").clone(true).appendTo("#myForm");
var cosponsorDivId = 'cosponsors_' + uniqueId;
copy.attr('id', cosponsorDivId );
$('#myForm div:last').find('input').each(function(){
$(this).attr('id', $(this).attr('id') + '_'+ uniqueId);
$(this).attr('name', $(this).attr('name') + '_'+ uniqueId);
});
uniqueId++;
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<h3>Sponsors</h3>
<form action="" id="myForm">
<div id="cosponsors" style="padding:12px;">
<label>Sponsor Info:</label> <input type="text" id="cosponsorcontact" name="cosponsorcontact" placeholder="Name" title="Co-sponsor contact" />
<input type="text" id="cosponsoremail" name="cosponsoremail" placeholder="Email" title="Co-sponsor email" />
<input type="text" id="cosponsorphone" name="cosponsorphone" placeholder="Phone" title="Co-sponsor phone" />
</div>
</form>
<input type="button" class="addRow" value="Add Sponsor" />
</div>
</body>
</html>
Try this:
var deleteLink = $("<a>delete</a>");
deleteLink.appendTo(copy);
deleteLink.click(function(){
copy.remove();
});
Note that you'll need to style the delete link appropriately since it doesn't have an href.
JSFiddle: http://jsfiddle.net/5QBLB/

Button redirecting to new jsp page not working

I was trying to redirect to a n ew jsp page on click of a button like this :
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function () {
var x=$(this).siblings("input[type=text]").val();
$('#selectedempids').val(x);
alert("Would submit: " + x);
loaction.href='ProjectAssigning.jsp';
});
});
</script>
And in html I have something like :
<div>
<h1 align="center">ASSIGN PROJECTS</h1>
Assign Project To : <input type="text" id="demo-input-facebook-theme" name="blah2"></input>
<br></br>
<input type="hidden" name="selectedempids" id="selectedempids"></input>
Project Name : <input type="text" name="projecttitle" id="projecttitle"></input>
<br></br>
Project Description : <input type="file" name="description" id="description"></input>
<br></br>
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-facebook-theme").tokenInput("ValidEmployeeList.jsp", {
theme: "facebook"
});
});
</script>
</div>
But its not getting redirected.Please help me know the reason.
Instead of:
loaction.href = 'ProjectAssigning.jsp';
Use this:
window.location.assign('ProjectAssigning.jsp');

Categories

Resources