Js edited div content disappears - javascript

Hi I'm appending content to the div, after an ajax call success. But quickly the appended text disappears. Why that happens, could you please help?
My js is kept in another file and js is called via a button click event.
HTML:
<html>
<head> </head>
<body>
<script type='text/javascript' src='jq/jquery.js'></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script type='text/javascript' src='js/script.js'></script>
<br/>
<form name="form">
<input type="text" id="uname" name="uname">
<input type="submit" onclick="postData()" id="data-submit">
</form>
<br/>
<br/>
<br/>
<br/>
<div id="feedback"></div>
<script type='text/javascript'>
//this sometimes show errors on google chrome.
//$(document).ready(function(){});
</script>
</body>
</html>
This is the full content of my js file
function postData(){
var uname=$('#uname').val();
$.ajax({
url:'checkempcode.php',
data: {name: uname},
type: "POST",
async: false,
success: function(data){
window.alert('Checking');
$('#feedback').html(data);
$( "#feedback" ).append( "<p>Test</p>" );
}
});
}

The page get reloaded since the submit buttons are submitting your form. Try changing the button type from submit to button
<input type="button" onclick="postData()" id="data-submit"/>
OR
Add return false in onclick function;
<input type="submit" onclick="postData(); return false;" id="data-submit"/>

You should just add event.preventDefault() to you function to prevent form from submiting :
function postData(){
event.preventDefault();
var uname=$('#uname').val();
$.ajax({
url:'checkempcode.php',
data: {name: uname},
type: "POST",
async: false,
success: function(data){
window.alert('Checking');
$('#feedback').html(data);
$( "#feedback" ).append( "<p>Test</p>" );
}
});
}
Hope this helps.

Related

How to: PHP Ajax page update

I have a input field and 2 buttons to add/remove words from a database.
I'm using 3 php files. The main file which is outputting the html code, the addtag.php, which can add a word and the removetag.php file which can remove a word.
I want to call addtag.php when the plus is clicked and send the content of the input field. removetag.php should be called when clicking on the minus symbol.
addtag.php and removetag.php should run in the background and the page should only update <tagboxtxt>.
The elements below are listed multiple times on the same page. There are different links and values but the elements are the same.
<!-- language-all: lang-html -->
<bdiv>
<div>
<img src="001.jpg" />
</div>
<tagbox>
<form>
<input type="text" id="tag" name="tag">
<input type="hidden" id="hash" name="hash" value="23547">
<button class="button" type="submit" formaction="addtag.php" method="GET">+</button>
<button class="button" type="submit" formaction="removetag.php">-</button>
</form>
<tagboxtxt>foo bar</tagboxtxt>
</tagbox>
</bdiv>
<bdiv>
<div>
<img src="002.jpg" />
</div>
<tagbox>
<form>
<input type="text" id="tag" name="tag">
<input type="hidden" id="hash" name="hash" value="67889">
<button class="button" type="submit" formaction="addtag.php" method="GET">+</button>
<button class="button" type="submit" formaction="removetag.php">-</button>
</form>
<tagboxtxt>bla huh</tagboxtxt>
</tagbox>
</bdiv>
I know that Ajax is the way to go, but I cant get it working.
I've tried to use function below. How should I use that in my example?
function addtag () {
$.ajax({
url:"addtag.php",
type: "POST",
success:function(result){
alert(result);
}
});
}
You're missing the javascript that captures the click on the 'plus' button, and calls your ajax function. Try pasting this javascriptsnippet below your function:
//Execute on page ready
$(function() {
$('body').on('click', '.plusSign', function() {
addTag();
});
});
i would call a js file and have it reference the two add and remove php files--i have mocked this up for you first in the main file that outputs the html put this
<head>
<script type='text/javascript'></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="tag.js"></script>
</head>
<tagbox>
<input type="text" name="tag">
<div class="cssCircle plusSign" id="plus">+ </div>
<div class="cssCircle minusSign" id="minus" style="position:absolute; top:20px; left:25px;">–</div>
</tagbox>
This will allow you to call the js file to run ajax. the js file named tag.js should look like this
$(document).ready(function() {
$("#plus").click(function() {
$.ajax({
type: "POST",
url: "addtag.php",
dataType: "json",
data: ({word: $("#tag").val(),}),
success:function(result){
alert(result);
}
});
});
$("#minus").click(function() {
$.ajax({
type: "POST",
url: "removetag.php",
dataType: "json",
data: ({word: $("#tag").val(),}),
success:function(result){
alert(result);
}
});
});
});
this should accomplish what you need

Ajax Response as HTML

When the submit button is clicked on page1.php the response is printed as HTML format for a moment but it gets automatically deleted.
I want to display the response of page2.php in page1 in the id="output" element.
What am I doing wrong?
Here is the content of page1.php
<script type="text/javascript">
function func(tosearch) {
alert("search");
$.ajax({
type: 'post',
url: 'page2.php',
data: {
'tosearch' : tosearch
},
success: function(result) {
print(result);
}
});
}
function print(result) {
document.getElementById("output").innerHTML=result;
}
</script>
<form method="post" action="page1.php">
<input type="text" name="search" placeholder="Search.."><br><br>
<input type="submit" name="submit" onclick="func()">
</form>
<p id="output">table here!!</p>
Content of page2.php
<?php echo "<table align='center'>"
."<tr>"
."<td>"."Mr XYZ"."</td>"
."<td>"."MALE"."</td>"
."<td>"."987558745"."</td>"
."<td>"."xyz#gmail.com"."</td>"
."</tr>";
?>
The response isn't being deleted, the page is refreshing. Since you don't want the page to refresh at all, you don't really need that form element. Just remove the form and make the input a plain button to keep the markup simple:
<script>
// your JavaScript
</script>
<input type="text" name="search" placeholder="Search.."><br><br>
<button onclick="func()">
<p id="output">table here!!</p>

jQuery .val() not working on hidden fields added with .html()

I have an html form that loads the main portion of a document, postload an ajax request goes off and gets an xml file that is parsed out to create 'sub' forms which can be updated/submitted. This is the form 'preload'
<html>
<head>
<script src="jquery.js">
<script src="jquery.forms.js">
<script>
$(document).ready(function () {
//Script to execute when form is loaded
loadOrder(unid);
});
</script>
</head>
<body>
<form id="mainform" name="main" method="post" action="whatever">
<input type="hidden" id="unid" name="unid" value="123" />
</form>
<div id="orderForms">
</div>
</body>
</html>
Here is the form post load :
<html>...
<div id="orderForms">
<form id="order_1" name="order" method="post" action="whatever">
<input type="hidden" id="pid_1" name="pid" value="123" />
<input type="hidden" id="unid_1" name="unid" value="456" />
</form>
<form id="order_2" name="order" method="post" action="whatever">
<input type="hidden" id="pid_2" name="pid" value="123" />
<input type="hidden" id="unid_2" name="unid" value="789" />
</form>
</div>
</body>
</html>
JS code:
function loadOrders(unid){
var rUrl = "url";
$.ajax({type: "GET", url: rUrl, async: true, cache: false, dataType: "xml", success: postLoadOrders}) ;
}
function postLoadOrders(xml){
nxtOrder = 1;
var html="";
$('order',xml).each(function() {
// parses the xml and generates the html to be inserted into the <div>
});
$("#orderForms").html(html);
}
This all works, the main form loads, the 'hidden' forms in the <div> are written in. The trouble happens when I put a button on the main form that does this...
function submitOrder(){
$("#pid_1").val('555');
$("#order_1").formSerialize();
$("#order_1").ajaxSubmit();
}
If I alert($("#pid_1").val()) prior to the .val('555') it shows the original value, when I alert after, it shows the new value, however it submits the original value, and if I open the html in firebug the value isn't showing as changing.
If I put a hidden field into the main form, that exists when the document loads and change its value, not only does the new value post, it also shows as being changed when examining the source.
Any ideas?
$('order',xml).each(function() {
});
this is not Object in JQuery
You can edit:
$('[name=order]',xml).each(function() {
});

Submit jQuery ajax Form with multi buttons and PHP

here is my problem:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<form id="roomform" action="room.php" method="POST">
<button name="room" value="Room01">IMG01</button>
<button name="room" value="Room02">IMG02</button>
<button name="room" value="Room03">IMG03</button>
<button name="room" value="Room04">IMG04</button>
<button name="room" value="Room05">IMG05</button>
<button name="room" value="Room06">IMG06</button>
<button name="room" value="Room07">IMG07</button>
<button name="room" value="Room08">IMG08</button>
<button name="room" value="Room09">IMG09</button>
<button name="room" value="Room10">IMG10</button>
</form>
<script type="text/javascript">
var frm = $('#roomform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
</script>
</body>
</html>
PHP using $_POST['room'] to get the room name Room01-Room10(Room100 maybe?) and doing something special.
It works good.
Now I need to do this using Ajax. Above code seems ok, but I cannot get any data(Room01-Room10) from it.
then I found this:
<form action="/vote/" method="post" class="vote_form">
<input type="hidden" name="question_id" value="10" />
<input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" />
<input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" />
</form>
$(".vote_form").submit(function() { return false; });
$(".vote_up, .vote_down").click(function(event) {
$form = $(this).parent("form");
$.post($form.attr("action"), $form.serialize() + "&submit="+ $(this).attr("value"), function(data) {
// do something with response (data)
});
});
but it seems not suitable to my case, my all buttons with same name="room" for $_POST['room'] and no class.
and this not works:
$(function() {
$('input[name=room]').click(function(){
var _data= $('#roomform').serialize() + '&room=' + $(this).val();
$.ajax({
type: 'POST',
url: "room.php?",
data:_data,
success: function(html){
$('div#1').html(html);
}
});
return false;
});
});
anyone know how to solve this problem?
Your (last) code is not sending AJAX requests because you attached the handler to the wrong input selector. Your buttons are button elements, not input elements. This should work:
$('button[name=room]').click(function() { ...
Edit:
Your first code isn't working because your buttons are just buttons. You have to add the type attribute to let your form know you're pressing a submit button: <button type="submit"...>
The serialize() method does not collect the data from a button element. Take a look to the documentation on this link: https://api.jquery.com/serialize/. In your code I would assume that your data object is empty.
Also if you post several form controls (serialized) , they should have different name attributes.

How to post to php on input change then get results in content div

I want to do just what the title says, when data is inputted into the textfield, I want it sent to posttothis.php, then have the result printed in a content div. I can't seem to make it work.
testscript.html
<html>
<head>
<script type="text/javascript">
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
</head>
<body>
<input type="text" name="text" id="text">
<div id="content" name="content">
<script>
$('#text').keyup(function(){
$.ajax({
type: "POST",
url: "posttothis.php",
data: {text: $(this).val()},
success: function(data)
{
$("#content").html(data);
}
});
});
</script>
</body>
</html>
posttothis.php
<?php
$testvar=$_POST['text'];
echo $testvar;
?>
Thanks
EDIT: Updated my script with the suggested modifications, but still can't get it to display what I type in the textbox in the content div. To answer the questions below: I don't want to submit the form, I just want to get the value from it on every change. Console shows no errors.
EDIT2: I updated the working code, maybe it helps someone else in the future.
You can use the On Key up function instead.
<input type="text" name="text" id="text">
<div id="content" name="content">
<script>
$('#text').keyup(function(){
$.ajax({
type: "POST",
url: "posttothis.php",
data: {text: $(this).val()},
success: function(data)
{
$("#content").html(data);
}
});
});
</script>
Why not try jQuery post?
Example
<input type="text" name="text" id="text">
<div id="content" name="content">
<script>
$('#text').keyup(function(){
$.post('posttothis.php', {text:$('#text').val()}, function(data) {
$("#content").html(data);
});
});
</script>
put "," after data: {text: $('#text').val()}
<input type="text" name="text" id="text">
<div id="content" name="content">
<script>
$('#text').change(function(){
$.ajax({
type: "POST",
url: "posttothis.php",
data: {text: $('#text').val()},
success: function(data)
{
$("#content").html(data);
}
});
});
</script>
Use:
$('#text').keyup(function(){
Instead of
$('#text').change(function(){
Also your are missing a comma (,) after data property
data: {text: $('#text').val()},

Categories

Resources