My code is like this :
<html>
<head>
<title>Test Loading</title>
</head>
<body>
<div id="header">
This is header
</div>
<div id="navigation">
This is navigation
</div>
<div id="content">
<form action="test2.php" method="post">
<table>
<tr>
<td>First Name</td>
<td>:</td>
<td><input type="text" name="first_name"></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" name="last_name"></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><input type="text" name="hobby"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" Value="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="footer">
This is footer
</div>
</body>
</html>
The complete code of test1.php : http://pastebin.com/idcGms0h
The complete code of test2.php : http://pastebin.com/rvBPTrhn
I want to load only the content area and skip header, navigation and footer loading
Besides that, I also want to add loading
Seems to use ajax, but I am still confused
How to load only the content area when click submit button?
Any help much appreciated
Cheers
you need to use ajax. please try this instead
before submit
<!DOCTYPE html>
<html>
<head>
<title>Test Loading</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div id="header">
This is header
</div>
<div id="navigation">
This is navigation
</div>
<div id="content">
<form action="" id="info">
<table>
<tr>
<td>First Name</td>
<td>:</td>
<td><input type="text" name="first_name"></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" name="last_name"></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><input type="text" name="hobby"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</div>
<button id="submit">Submit</button>
<div id="footer">
This is footer
</div>
</body>
</html>
<script type="text/javascript">
var postData = "text";
$('#submit').on('click',function(){
$.ajax({
type: "post",
url: "test2.php",
data: $("#info").serialize(),
contentType: "application/x-www-form-urlencoded",
success: function(response) { // on success..
$('#content').html(response); // update the DIV
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
})
});
</script>
before submit form
test2.php contents
<table>
<tr>
<td>First Name</td>
<td>:</td>
<td> <?php echo $_POST['first_name']; ?></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><?php echo $_POST['last_name']; ?></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><?php echo $_POST['age']; ?></td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><?php echo $_POST['hobby']; ?></td>
</tr>
after submit form
You need to use ajax . to update only a part of the page. firstly,give
unique id's to form elements
1. i have given form an id regForm
2. submit button an id submitButton
you can either listen to form submit or click of the submit button
listening to the click of submit button ....
$("input#submitButton").on("click",function(event){
event.preventDefault();
var data = $('form#regForm').serialize();
$.ajax({
url: "test2.php",
method: "POST",
data: { data : data },
dataType: "html"
})
.done(function( responseData ) {
console.log("theresponse of the page is"+responseData);
$("div#content").empty();
///now you can update the contents of the div...for now i have just entered text "hey i m edited" ....and i have considered that you will echo out html data on test2.php .....so specified data type as html in ajax.
$("div#content").html("hey i m edited");
})
.fail(function( jqXHR, textStatus ) {
console.log("error occured");
});
})
Well you have to use jquery ajx for that.istead of writting a big code you can just use this plugin http://malsup.com/jquery/form/ when you using this plugin you don't have to change anything of your form (except setting a form ID)
$(document).ready(function() {
var options = {
target: '#output', //this is the element that show respond after ajax finish
};
// bind to the form's submit event
$('#myForm').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
Change your form like that:
<form action="test2.php" method="post" id="myForm">
Related
I'm trying to pass a javascript variable to PHP so when I submit my form, it will save the variable in my MYSQL database.
Heres the HTML:
function replyLink(element) {
document.getElementById('displayForm').style.display = "block";
var replyId = element.getAttribute("data-replyid");
console.log(replyId)
}
function closeLink() {
document.getElementById('displayForm').style.display = "none";
}
<a href='javascript:void(0);' data-replyid='1' class='replyLink' onclick='replyLink(this)' />[Reply]</a>
<div id='displayForm' style='display:none;'>
<div id='replyTitle'>
<label>Write a reply</label>
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
<form action='' method='POST' accept-charset='utf-8' enctype='multipart/form-data'>
<table id='postForm'>
<tr>
<td class='replyForm_title' sty>Name</td>
<td><input type='text' name='commentName'></td>
</tr>
<tr>
<td class='replyForm_title'>Comment</td>
<td><textarea cols='48' rows='4' wrap='soft' name='commentText'></textarea></td>
</tr>
<tr>
<td></td>
<td><input type='submit' name='commentBtn' value='Reply' onclick='submitForm()'></td>
</tr>
</table>
</form>
</div>
If you run the code, you can see that the form pops up, and returns the data-attribute value of '1'. I'd like to insert that variable 1 into a MYSQL database. Would anyone guide me? Thanks. (ALSO, code snippet runs. So you have an understanding of how it works.)
Add a hidden input to the form, and put replyId into its value.
Then in PHP use $_POST['replyId'] to get the value.
function replyLink(element) {
document.getElementById('displayForm').style.display = "block";
var replyId = element.getAttribute("data-replyid");
document.getElementById('replyId').value = replyId;
console.log(replyId)
}
function closeLink() {
document.getElementById('displayForm').style.display = "none";
}
<a href='javascript:void(0);' data-replyid='1' class='replyLink' onclick='replyLink(this)' />[Reply]</a>
<div id='displayForm' style='display:none;'>
<div id='replyTitle'>
<label>Write a reply</label>
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
<form action='' method='POST' accept-charset='utf-8' enctype='multipart/form-data'>
<table id='postForm'>
<tr>
<td class='replyForm_title' sty>Name</td>
<td><input type='text' name='commentName'></td>
</tr>
<tr>
<td class='replyForm_title'>Comment</td>
<td><textarea cols='48' rows='4' wrap='soft' name='commentText'></textarea></td>
</tr>
<tr>
<td><input type="hidden" name="replyId" id="replyId"></td>
<td><input type='submit' name='commentBtn' value='Reply' onclick='submitForm()'></td>
</tr>
</table>
</form>
</div>
I'm creating a table containing a list of uploaded files and I wanted to add a link in the last column to allow the user to delete the corresponding file. I could simply use a link "delete.php?fileid=", but I prefer to use a POST request and so I decided to use a form with the ID of the file in the database being passed as hidden input.
Issue: console.log($(this).closest('form').find(":input").serialize()); returns an empty string. Can you help understanding what is the root cause?
Code of form submission:
$('.f-delete a'). click(function(e){
e.preventDefault();
console.log($(this).closest('form').find(":input").serialize());
$.ajax({
type: "POST",
url: 'delete_image.php',
dataType: 'json',
data: $(this).closest('form').find(":input").serialize(),
success: function(response){
console.log(response);
},
error: function(){
alert('Error: Could not delete the file');
}
});
});
The markup:
<table class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Type</th>
<th>Size</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Test file</td>
<td>image/png</td>
<td>302.65 KB</td>
<td>
<form id="f-1" class="f-delete" method="post" action="delete_image.php">
<input id="id-1" value="1" type="hidden">
<a id="a-1" href="">Delete image</a>
</form>
</td>
</tr>
<tr>
<td>Test file 2</td>
<td>image/png</td>
<td>37.88 KB</td>
<td>
<form id="f-2" class="f-delete" method="post" action="delete_image.php">
<input id="id-2" value="2" type="hidden">
<a id="a-2" href="">Delete image</a>
</form>
</td>
</tr>
</tbody>
</table>
The problem is in your html, for use serialize your input's should have name. For example:
<input id="id-1" value="1" name="id-1" type="hidden">
For serialize use
$(this).closest('form').serialize() //return id-1=1
Result https://jsfiddle.net/cmedina/1Lv8gkms/
hi i have some problem when i try to make some php with javascript function
what i want to make is a textbox that will go enable / disable depending on checkbox on left side
this is my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function enable_txtbox(id){
if(document.getElementById(id).disabled){
document.getElementById(id).disabled=false;
var x = document.getElementById(id).disabled;
document.getElementById("demo").innerHTML=x;
}
else
document.getElementById(id).disabled=true;
}
</script>
</head>
<body>
<form method="get">
<table>
<tbody>
<tr>
<td>Nama Gejala</td>
<td>:</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Jenis Gejala</td>
<td>:</td>
<td><select name="jenis">
<option value="0">Umum</option>
<option value="1">Khusus</option>
</select></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>Penyakit yang Berhubungan</td>
<td>:</td>
</tr>
</thead>
<tbody>
<?php
$id=1;
while($row = mysqli_fetch_array($result)){
$id=$row['id'];
echo "<tr>";
echo "<td><input type='checkbox' name='chk$id' value='$id' onclick='enable_txtbox('".$id."')'>".$row['nama']."<br></td>";
echo "<td>Nilai Kepastian</td>";
echo"<td>:</td>";
echo "<td><input type='text' name='cf".$id." id='$id' disabled='disabled'></td>";
echo "</tr>";
}
mysqli_close($con);
?>
</tbody>
</table>
<table>
<tbody>
<tr>
<p id="demo"></p>
<td><input type="submit"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
PS : i have more than 1 checkboxes and textboxes depending on my database file
thanks before and forgive me for my bad english skill :)
You should use jQuery to check whether the checkbox is checked.
Say you have a checkbox with id='idTag', and we would like to check whether the checkbox is checked or not.
$('#idTag').is(":checked")
This returns true should the Checkbox be checked; from that moment on you could use jQuery to either show the were it hidden, or append it to the div.
say the text input box has id 'textId'.
Method one:
if($('#idTag').is(":checked"))
$("#textId").css("display", "block"); //if you just like to show the block.
if($('#idTag').is(":checked"))
$("#textId").fadeIn("slow"); //Gives it a nice effect as well.
Method two:
<div id='DIV'>
<input type='checkbox' id='idTag' value='checkbox'/>
</div>
<script>
if($('#idTag').is(":checked"))
$("#DIV").append("<input type='text' placeholder='textbox' />");
</script>
You could simplify your function
DEMO http://jsfiddle.net/x8dSP/2853/
<script>
function enable_txtbox(id){
if(document.getElementById(id).disabled == true){
document.getElementById(id).disabled = false;
} else {
document.getElementById(id).disabled = true;
}
return true;
}
</script>
I hope this solves your problem.
Script...
function enable_txtbox(id){
if(document.getElementById(id).disabled){
document.getElementById(id).disabled=false;
var x = document.getElementById(id).disabled;
document.getElementById("demo").innerHTML=x;
} else {
document.getElementById(id).disabled=true;
var x = document.getElementById(id).disabled;
document.getElementById("demo").innerHTML=x;
}
}
HTML....
<table>
<tbody>
<tr>
<td>Nama Gejala</td>
<td>:</td>
<td><input type="text" name="nama"/></td>
</tr>
<tr>
<td>Jenis Gejala</td>
<td>:</td>
<td><select name="jenis">
<option value="0">Umum</option>
<option value="1">Khusus</option>
</select></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>Penyakit yang Berhubungan</td>
<td>:</td>
</tr>
</thead>
<tbody>
<tr>
<td>check1</td>
<td><input type="checkbox" onclick="enable_txtbox('first')" /></td>
</tr>
<tr>
<td>Txt1</td>
<td><textarea id="first"> </textarea></td>
</tr>
<tr>
<td>check2</td>
<td><input type="checkbox" onclick="enable_txtbox('second')" /></td>
</tr>
<tr>
<td>Txt2</td>
<td><textarea id="second"> </textarea></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<p id="demo"></p>
<td><input type="submit"/></td>
</tr>
</tbody>
</table>
JSPIDDLE
HTML:
<table border="1">
<tr id="main_account">
<td width="50%">
<h3 style="margin-left:10px">Details</h3>
<table width="270">
<tr>
<td>First name:</td>
<td><input type="text" name="first_name" id="id_first_name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" id="id_last_name" /></td>
</tr>
<!-- other html -->
</table>
</td>
</tr>
<tr id="authorised_reporter">
<td width="100%" colspan="2">
<form method="post" action="." id="reporter-form">
<table width="100%">
<tr>
<td style="width:100px;">First name:</td>
<td><input type="text" name="first_name" id="id_first_name" /> </td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" id="id_last_name" /> </td>
</tr>
<tr>
<td>Daytime phone:</td>
<td><input id="id_phone_daytime" type="text" class="trim-space" name="phone_daytime" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
onpage load id #main_account is shown and id #authorised_reporter is hidden.If #authorised_reporter is clicked #authorised_reporter is in display block and #main_account is in display none state.In #authorised_reporter tab i am updating the user data using ajax,after sucess call i am reloading the page.Since onload i am showing the #main_acount by default after reload it takes me to #main_account but what i required is after sucess ajax call on pagereload the page should show #authorised_reporter tab and not #main_account tab.
I tried the below but not working,takes me to #main_account
//other code not shown
success: function() {
location.reload();
$('#authorised_reporter').css("display", "block");
$('#main_account').css("display", "none");
$("#sucess").show();
$("#sucess").text("Changes has been updated.");
}
Your changes may not apply since,
location.reload();
It will reload the content and later part of success function will not effect. If you can be more specific and supply more html, will be able give you an answer. You can use .done() in jQuery also.
Try with the below:
Example: 1
$("#main_account").hide();
if the answer is not related to you please disregard it.
Example:2
To have graceful degredation as well, you could stick with the hiding done via jQuery, just give the edit <tr> rows a class, e.g. <tr class="edit"> then hide all of those at once with jQuery outside the table, like this:
<script type="text/javascript">
$(function() {
$("tr #main_account").hide();
});
</script>
This approach, instead of hiding them off the bat with CSS is more friendly to those with JS disabled, if you might have an audience of users like that, go with this .hide() approach.
I started to build clicks manner such that there will be like a box up. it can in no way get to work at all!. so is it like when you create an account and click "opret_ok" then the close box/dialog by itself.
Oppen
<div id="dialog" style="display:none;">
<form action="#" method="post" name="opret_nyheder">
<table>
<tr>
<td>Navn</td>
<td><input type="text" name="navn" class="new"></td>
</tr>
<tr>
<td>Email - Brugernavn</td>
<td><input type="email" name="email_indhold" class="new"></td>
</tr>
<tr>
<td><input type="submit" name="opret_ok" value="Opret Bruger" class="new"></td>
<td></td>
</tr>
</table>
<?php
if(isset($_POST["opret_ok"]))
{
$opret_bruger = $mebe->opret_bruger();
}
?>
</form>
</div>
<script>
$(document).ready(function() {
$("#contactUs").click(function() {
$("#dialog").dialog();
return false;
});
});
</script>
I'll get nothing from jquery page about box or style. All I have here is what I show on the outside of the body, etc.
$(document).on('click','input[name="opret_ok"]',function(){
jQuery('#dialog').dialog('close');
});