We Keep Coding

jQuery - Change action and form ID and use this

Apparently in the DOM have changed the values, even changed the ID of the form with the idea that the script no longer has effect but when you click Publish, nothing happens. Searching I tried to use "prop" instead of "attr" but it still does not work. I think it's because of the "e.preventDefault ()". But I do not know how to disable it. This is my code.
As you can see once the request is sent, the input and the "send" button are deactivated and when the values are received, they change the id of the form, the id and name of the button and it is renamed "Publish".
<script>
jQuery(function($){
var pluginUrl = '<?php echo plugin_dir_url( __FILE__ ); ?>' ;
$('[id^="form-search"]').on('submit', function(e) {
e.preventDefault();
$.ajax({
type : 'POST',
url : 'http://localhost/ladoserver/getapi.php',
data : $(this).serialize(),
cache: false,
beforeSend: function(){
$('input#keyword').prop('disabled', true);
$('button#search').prop('disabled', true);
$('#resuls').html('<img src="'+pluginUrl+'../../assets/img/loading.gif" />');
}
}).done(function(data) {
$('#results').html(data);
$('input#keyword').prop('value', 'PUBLISH DATA');
$('button#search').prop({disabled: false, id:'publish', name:'publish'}).html('Publish');
$('span#help').hide();
$('[id^="form-search"]').prop('action','publish.php');
$('[id^="form-search"]').prop('id', 'form-publish');
var countResults = $('input#total_data').val();
for (var i = 1; i <= countResults; i++) {
$('#lista>select').clone().prop({ id: "cat_"+i, name: "cat_"+i}).appendTo('.category_'+i);
}
$('#lista').remove();
});
});
});
</script>
Here my html
<form action="" method="post" class="form-search" id="form-search">
<fieldset>
<!-- Form Name -->
<legend>Name</legend>
<div class="form-group">
<input id="keyword" name="keyword" required="" type="text">
<button id="search" name="search" class="btn btn-success boton">Search</button>
<span class="help-block" id="help">Help</span>
<div id="lista" style="display:none">Test</div>
</div>
</fieldset>
<div id="result"></div>
</form>
Here a fiddle showing that happened (check DOM).
JSFiddle.net

//var pluginUrl = '<?php echo plugin_dir_url( __FILE__ ); ?>' ;
// when the action is plugin url.
$(document).on('submit','[id^="form-search"]', function(e) {
e.preventDefault();
$.ajax({
type : 'POST',
url : 'http://localhost/ladoserver/getapi.php',
data : $(this).serialize(),
cache: false,
beforeSend: function(){
$('input#keyword').prop('disabled', true);
$('button#search').prop('disabled', true);
$('#resuls').html('<img src="'+pluginUrl+'../../assets/img/loading.gif" />');
}
}).done(function(data) {
$('#results').html(data);
$('input#keyword').prop('value', 'PUBLISH DATA');
$('button#search').prop({disabled: false, id:'publish', name:'publish'}).html('Publish');
$('span#help').hide();
$('[id^="form-search"]').prop('action','publish.php');
$('[id^="form-search"]').prop('id', 'form-publish');
var countResults = $('input#total_data').val();
for (var i = 1; i <= countResults; i++) {
$('#lista>select').clone().prop({ id: "cat_"+i, name: "cat_"+i}).appendTo('.category_'+i);
}
$('#lista').remove();
});
});
// when the action point to publish.php === This is what you need
$(document).on('submit','[id^="form-publish"]', function(e) {
e.preventDefault();
var url = $(this).attr('action');
$.ajax({
type : 'POST',
url : url,
data : $(this).serialize(),
cache: false,
beforeSend: function(){
// do your pre-processing
}
}).done(function(data) {
// do your post processing.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form action="" method="post" class="form-search" id="form-search">
<fieldset>
<!-- Form Name -->
<legend>Name</legend>
<div class="form-group">
<input id="keyword" name="keyword" required="" type="text">
<input type ="submit" id="search" name="search" class="btn btn-success boton">Search</button>
<!-- change the button type to submit type -->
<span class="help-block" id="help">Help</span>
<div id="lista" style="display:none">Test</div>
</div>
</fieldset>
<div id="result"></div>
</form>

Unable to Post Data in my JSON File

Unable to Perform Post method on my JSON File
My JSON File is
[{
"name": "Help",
"description": "Deletion not allowed for products!?",
"price": 100000.0 }]
<html>
<head>
<title>Product Management</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"</script>
<script src="js/bootstrap.min.js"></script>
Function for Getting the Values
<script>
$(document).ready(function() {
$(window).load(function() {
$.ajax({
type: 'GET',
url: 'test.json',
dataType: 'json',
success: function(data) {
$.each(data, function(index, element) {
$("#abc").append($('<li>', {
text: element.name
}))
});
}
});
});
});
</script>
Function for Posting the Values in the JSON file
<script>
function sumbitForm(){
var x=document.getElementById("#name");
var y=document.getElementById("#description");
var z=document.getElementById("#price");
var Product={"name":x, "description":y, "price":z };
$.ajax({
url: "test.json",
type: "POST",
contentType: "application/json",
data: JSON.stringify(Product)
});
}
</script>
</head>
<body>
<div>
<ol id="abc">
</ol>
</div>
<div class="container">
Input Form for posting the Data
<form name="PForm" action="" method="POST">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" id="name" placeholder="Product Name">
</div>
<div class="form-group">
<label>Description:</label>
<textarea class="form-control" id="description" placeholder="Descrpition" rows="8"></textarea>
</div>
<div class="form-group">
<label>Price:</label>
<input type="text" class="form-control" id="price" placeholder="Price">
</div>
<button type="submit" class="btn btn-primary Right" onClick="submitForm()">Submit</button>
</form>
</div>
</body>
</html>

You need to get the value of the elements, like
var x=document.getElementById("#name").value;
Else you would send the DOM elements (which, converted to a string, would only be 'object')

how to call json object on popup?

I am trying to call the json object on pop-up but unable to make it happen....!
please suggest me if i am wrong somewhere.
My html file is here:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
function advanceSearch() {
$("#test").dialog({
width: '90%',
modal: true
});
}
function getInformation() {
alert("hello");
$.ajax({
url: "/response.json",
dataType: "json",
type: "GET",
success: function(response) {
alert("hello2");
$.each(response.BankAccounts, function(item) {
informationArray.push(item);
alert(data[0].bank)
});
informationArray.push("success");
}
});
}
</script>
</head>
<body>
<form id="BankAccounts" name="BankAccounts">
Sort Code :
<input type="text" name="sortCode1" />
<br>
<input type="text" name="sortCode2" />
<br>
<input type="text" name="sortCode3" />
<br>
<input type="button" id="search" value="Search" onclick="getInformation()"> Bank Name :
<input type="text" name="bank" />
<br> Branch Name :
<input type="text" name="branch" />
<br>
</form>
<div id="test" style="display: none;">
This is a sample content
</div>
</body>
</html>
and my json is here:
{
"BankAccounts": [{
"bank": "HSBC"
"branch": "nlbc road"
}, {
"bank": "BOA"
"branch": "New York"
}
]
}
on click i want to call the bank-name on popup

Ajax to send form to server, fails at serialize?

It seems like i cant get to serialize my form. I do get the first alert with lol, but not the second alert with pdata. Does anyone see whats wrong? Im trying to use ajax to send the data in the form. Down below is the script and the html code.
<html>
<head>
<script>
function dologin(event) {
event.preventDefault();
alert("lol");
var pdata = $('#form').serialize();
alert(pdata);
$.ajax({
type: 'POST',
data: pdata,
url: 'LINK',
success: function(data) {
//console.log(data);
alert("YAY");
},
error: function() {
//console.log(data);
alert("NAY");
}
});
};
</script>
</head>
<body>
<h1>Logg inn</h1>
<form id="form" onsubmit="dologin()">
<div class="form-group">
<label for="email">Epost</label>
<input type="email" class="form-control" name="login" value="" placeholder="Epost">
</div>
<div class="form-group">
<label for="password">Passord</label>
<input type="password" class="form-control" name="password" value="" placeholder="Passord">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember_me">
Husk meg
</label>
</div>
<button type="submit" class="btn btn-default">Logg inn</button>
</form>
<div class="login-help">
<p>Glemt passordet? Trykk her for å endre det.</p>
</div>
</body>
</html>

The problem with your code is, you are accessing event argument wheres there is no parameter passed to the function, so its triggering an error and submitting the form as normal form submission.
If you like to keep your implementation u can modify your code like bellow:
function dologin() {
alert("lol");
var pdata = $('#form').serialize();
alert(pdata);
$.ajax({
type: 'POST',
data: pdata,
url: 'LINK',
success: function(data) {
//console.log(data);
alert("YAY");
},
error: function() {
//console.log(data);
alert("NAY");
}
});
return false;
};
and modify this line
<form id="form" onsubmit="dologin()">
to
<form id="form" onsubmit="return dologin()">
or can use the following way
$(document).ready(function() {
$('#form').submit(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
data: $(this).serialize(),
url: 'LINK',
success: function(data) {
//console.log(data);
alert("YAY");
},
error: function() {
//console.log(data);
alert("NAY");
}
});
});
});
And form tag should be then:
<form id="form">

autocomplete ajax on two fields

I am having trouble executing the following code successfully. I want to get autocomplete data from the server on 1st field (drug1) which is successful. I want that the 2nd field (drugdose1) should return result based on the value of the 1st field (drug1). But I am unable to pass the value of the drug1 to the php file. The firefox debug displays as localhost/lib/searchdose.php?d=&q=xx.
Here is the code:
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type='text/javascript' src='lib/autocompletefull.js'></script>
<link rel="stylesheet" type="text/css" href="lib/autocomplete.css" />
<script type="text/javascript">
$(function() {
$("#drug1").autocomplete('lib/search.php', {
delay:100,
maxItemsToShow: 15,
minChars:2,
useCache:false
});
$("#drugdose1").autocomplete('lib/searchdose.php', {
delay:100,
minChars:2,
extraParams: { d: $("#drug1").val() }
});
});
</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>
I am using autocomplete.js from https://github.com/dyve/jquery-autocomplete ... I am not using jquery.ui autcomplete ..

Try this,
src = 'lib/searchdose.php';
$("#drugdose1").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
d: $("#drug1").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});

I have sort this problem on my own. Here is the solution:
<script type="text/javascript">
var dname;
function newv ()
{
dname = $("#drug1").val();
$("#drugdose1").autocomplete('lib/searchdose.php', {
delay:100,
maxItemsToShow: 15,
extraParams: { d:dname },
minChars:1,
useCache:false
});
alert("Hello");
}
$(function() {
$("#drug1").autocomplete('lib/search.php', {
delay:100,
maxItemsToShow: 15,
minChars:2
});
});
</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1" onchange="javascript:newv();">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>