We Keep Coding

How to pass many ajax results to different input values?

My ajax return results are four values.I want assign these values to four input value.Here my ajax code:
$.ajax({
type:"POST",
url:"modify_cbndtb.php",
data: {cabinetNum:id},
success:function (res)
{
}
});
modify_cbndtb.php code:
if(isset($_POST['cabinetNum']))
{
$q=$_POST["cabinetNum"];
$sql="select num1,num2,num3,num4 from hpc WHERE sysid= '".$q."';";
$sel = $conn->query($sql);
}
My html code:
<div id="content" class="content">
1U:<input type="text" id="1U" value="">11U:<input type="text" id="11U" value=""><br />
2U:<input type="text" id="2U" value="">12U:<input type="text" id="12U" value=""><br />
</div>
1U.value should be num1. 2U.value should be num2. 3U.value should be num3. 4U.value should be num4. But I don't know how to realize. Who can help me?

I think you can try this
modify_cbndtb.php
if(isset($_POST['cabinetNum']))
{
$q=$_POST["cabinetNum"];
$sql="select num1,num2,num3,num4 from hpc WHERE sysid= '".$q."';";
$sel = $conn->query($sql);
$arr = $sel->fetch(PDO::FETCH_ASSOC);
$data = json_encode($arr);
echo $data;
}
and AJAX
client file
$.ajax({
type:"POST",
url:"modify_cbndtb.php",
data: {cabinetNum:id},
success:function (data) {
$('#1U').val(data[0].num1);
$('#11U').val(data[0].num2);
$('#2U').val(data[0].num3);
$('#12U').val(data[0].num4);
}
});
I hope it help you

Try this
modify_cbndtb.php
<?php
if(isset($_POST['action']))
{
$q=$_POST["cabinetNum"];
$sql="select num1,num2,num3,num4 from hpc WHERE sysid= '".$q."';";
$sel = $conn->query($sql);
while($row = $sel->fetch_assoc()){
echo $row['num1'].",".$row['num2'].",".$row['num3'].",".$row['num4'];
}
}
?>
your form
<script type="text/javascript" src="testing/jquery-3.2.1.js"></script>
<form id="form">
<input type="submit" name="submit" id="submit">
<input type="hidden" id="cabinetNum" name="cabinetNum" value="1">
</form>
<div id="content" class="content">
1U:<input type="text" id="1U" value="">3U:<input type="text" id="3U" value=""><br />
2U:<input type="text" id="2U" value="">4U:<input type="text" id="4U" value=""><br />
</div>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#submit',function(e){
e.preventDefault();
var dataen = $("#form").serialize() + "&action";
$.ajax({
type:"POST",
url:"modify_cbndtb.php",
data: dataen,
success:function (data) {
$(function(){
var valData = data;
var valNew=valData.split(',');
for (i = 0; i < valNew.length; i++) {
valNew[i] = valNew[i];
$('#'+(i + 1)+'U').val(valNew[i]);
}
});
}
});
});
});
</script>

how to submit form with ajax and php to avoid page refresh

I'm trying to submit a form on page in php,But i don't want the page to refresh,I go through many tutorials,But still can't figure it out someone should me fix my code please.
index.php
<script src="profile.js"><script>
<div class="sta">
<form action="test.php" method="POST" id="sta">
<input type="text" name = "sta" id="sta" placeholder="Status">
<input id="submit" onclick="status()" type="button" value="save">
</form>
</div>
</script>
profile.php
<?php
session_start();
include 'db.php';
if(isset($_SESSION['email'])){
$eml = $_SESSION['email'];
$sql = $con->prepare("update alert_users_account SET statu=? where email_phone=?");
$sql->bind_param('ss',$_POST['sta'],$eml);
$sql->execute();
$sql->close();
}
?>
profile.js
function status() {
var sta = document.getElementById("sta").value;
var dataString = 'sta1=' + sta;
if (sta == '') {
alert("Please Fill All Fields");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "test.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}

Add the return with onclick="return status()"
<input id="submit" onclick="return status()" type="button" value="save">
or try with in form.submit
<form action="test.php" method="POST" onsubmit="return status()" id="sta">
<input type="text" name="sta" id="sta" placeholder="Status">
<input id="submit" type="button" value="save">
</form>

Form submission, just can't stop refresh

So I am very new to this stuff and i have a specific problem I just can't fix. I have searched all over, and I have tried loads of solutions to no avail. I'm sure I'm missing something or have something in the wrong order but I just need some guidance.
I have a simple form in my website and I can't stop it refreshing the page on submit. There's some php validating happening also.
Here's a link to the website: www.nathanchapmanphotography.co.uk
Any help would be massively appreciated.
$("form").submit(function() {
var error = "";
var success = "";
var fail = "";
if ($("#name").val() == "") {
error += "name required<br>";
}
if ($("#email").val() == "") {
error += "email required<br>";
}
if ($("#message").val() == "") {
error += "message required<br>";
}
if (error != "") {
$("#error").html(error);
$("#success").html(success);
$("#fail").html(fail);
return false;
}
else {
sendContactForm();
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<p class="form-p">name:
<input class="input" type="text" id="name" name="name">
</p>
<p class="form-p">email:
<input class="input" type="email" id="email" name="email">
</p>
<p class="form-p">message:
<br/>
<textarea id="message" cols="40" rows="7" name="message"></textarea>
</p>
<button type="submit" id="submit">submit</button>
<div id="error">
<? echo $error; ?>
</div>
<div id="success">
<? echo $success; ?>
</div>
<div id="fail">
<? echo $fail; ?>
</div>
</form>

You need to prevent the default action of the submit event:
$("form").submit(function(event) { // capture the function's event here
event.preventDefault(); // use the captured event here
// rest of your code...
EDIT: from the OP's website after the change -

I'm not 100% sure what you are looking for,..however,
If sendContactForm does the posting of the form data and you just don't want the submit to happen automatically you can make the button of type button and bind to it for the validation.
$(document).ready(function() {
function sendContactForm(){
console.log('sendContactForm');
};
$('#submit').on('click', function() {
var error = "";
var success = "";
var fail = "";
if ($("#name").val() === "") {
error += "name required<br>";
}
if ($("#email").val() === "") {
error += "email required<br>";
}
if ($("#message").val() === "") {
error += "message required<br>";
}
if (error !== "") {
$("#error").html(error);
$("#success").html(success);
$("#fail").html(fail);
} else {
sendContactForm();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<p class="form-p">name:
<input class="input" type="text" id="name" name="name">
</p>
<p class="form-p">email:
<input class="input" type="email" id="email" name="email">
</p>
<p class="form-p">message:
<br/>
<textarea id="message" cols="40" rows="7" name="message"></textarea>
</p>
<button type="button" id="submit">submit</button>
<div id="error">
<? echo $error; ?>
</div>
<div id="success">
<? echo $success; ?>
</div>
<div id="fail">
<? echo $fail; ?>
</div>
</form>
or,..if you want to only have more control over the submit itself without the page refreshing, you can use ajax. Similar to this:
var $form = $("form");
$.ajax({
data: $form.serialize(),
url: $form[0].action,
type: 'post',
dataType: 'json',
success: function(data) {
sendContactForm();
}
});
$(document).ready(function() {
function postData() {
var $form = $("form");
$.ajax({
data: $form.serialize(),
url: $form[0].action,
type: 'post',
dataType: 'json',
success: function(data) {
sendContactForm();
}
});
}
function sendContactForm() {
console.log('sendContactForm');
}
$('#submit').on('click', function() {
var error = "";
var success = "";
var fail = "";
if ($("#name").val() === "") {
error += "name required<br>";
}
if ($("#email").val() === "") {
error += "email required<br>";
}
if ($("#message").val() === "") {
error += "message required<br>";
}
if (error !== "") {
$("#error").html(error);
$("#success").html(success);
$("#fail").html(fail);
} else {
postData();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="http://yourtageturl">
<p class="form-p">name:
<input class="input" type="text" id="name" name="name">
</p>
<p class="form-p">email:
<input class="input" type="email" id="email" name="email">
</p>
<p class="form-p">message:
<br/>
<textarea id="message" cols="40" rows="7" name="message"></textarea>
</p>
<button type="button" id="submit">submit</button>
<div id="error">
<? echo $error; ?>
</div>
<div id="success">
<? echo $success; ?>
</div>
<div id="fail">
<? echo $fail; ?>
</div>
</form>

So I managed to sort it using both your suggestions, thanks so much. The issue was that the function I found online to send the data actually wasn't doing anything. I have it running perfectly now, no server side validation but that's for another day. If your interested, here's the revised code.
$("form").submit(function(e) {
e.preventDefault();
var error = "";
var success = "Thank you for your message!<br/>I'll get back to you shortly."
var url = "index.php"; // the script where you handle the form input.
if ($("#name").val() == "") {
error += "name required<br>";
}
if ($("#email").val() == "") {
error += "email required<br>";
}
if ($("#message").val() == "") {
error += "message required<br>";
}
if (error != "") {
$("#error").html(error);
//alert("We need your" + error + "please!" );
}
else {
$.ajax({
type: "POST",
url: url,
data: $("form").serialize(), // serializes the form's elements.
success: function(data)
{
$("#success").html(success);
$("#error").html(error);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<p class="form-p">name:
<input class="input" type="text" id="name" name="name">
</p>
<p class="form-p">email:
<input class="input" type="email" id="email" name="email">
</p>
<p class="form-p">message:
<br/>
<textarea id="message" cols="40" rows="7" name="message"></textarea>
</p>
<button type="submit" id="submit">submit</button>
<div id="error">
<? echo $error; ?>
</div>
<div id="success">
<? echo $success; ?>
</div>
<div id="fail">
<? echo $fail; ?>
</div>
</form>

How to Insert and display record without refreshing web page in codeigniter version?

I have a code here of inserting and displaying record without refreshing web page using ajax and plain php but I don't know how to set this up using codeigniter. Please help. Here are the codes
inserting.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var dataString = 'content='+ test;
if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle">
<span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "demo_insert.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});
});
</script>
// HTML code
<div>
<form method="post" name="form" action="">
<h3>What are you doing?</h3>
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Update" name="submit" class="comment_button"/>
</form>
</div>
<div id="flash"></div>
<div id="display"></div>
demo_insert.php
PHP Code display recently inserted record from the database.
<?php
include('db.php');
if(isSet($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
}
?>
<b><?php echo $r['msg']; ?></b>

In your wellcome controller you can add the following:
public function inserting()
{
$this->load->view('inserting');
}
public function process()
{
$content=$this->input->post('content');
if($this->db->insert('mytable', array('msg' => $content))){
echo "<b>{$content}</b>";
}
You should then use inserting.php as your view, in application/views, and the ajax url would be /process.
Didn't test it, but this should do the trick. Also, you should check this example http://runnable.com/UXczcazDrMMiAAGl/how-to-do-ajax-in-codeigniter-for-php

add and retrieve record from mysql using ajax

As shown from the diagram, I have two tables in my mysql and I would like the system to add and retrieve comment without refreshing the page.
I have three php pages involved in this function and they are 'DB.php', 'comment.php' and 'action.php'
The codes are as shown:
DB.php
<?php
$conn = mysql_connect('localhost','Practical4','1234') or die (mysql_error);
$db=mysql_select_db('Practical4', $conn) or die (mysql_error);
?>
comment.php
<----------------ajax script-------------------->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".submit_button").click(function() {
var textcontent = $("#content").val();
var dataString = 'content='+ textcontent;
if(textcontent=='')
{
alert("Enter some text..");
$("#content").focus();
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: true,
success: function(html){
$("#show").after(html);
document.getElementById('content').value='';
$("#flash").hide();
$("#content").focus();
}
});
}
return false;
});
});
</script>
<div>
<-----retrieve hotel id from hotel table-------->
<?php
$conn=mysqli_connect('localhost','Practical4','1234') or die('Not connected');
$database=mysqli_select_db($conn,'Practical4') or die('Database Not connected');
$id=$_GET['id'];
$query = "select * from hotel where name='$id'";
$data=mysqli_query($conn,$query);
while($rows=mysqli_fetch_array($data)){
$name=$rows['name'];
$price=$rows['price'];
$duetime=$rows['dueTime'];
$address=$rows['location'];
}
?>
<---------------post form------------------->
<form method="post" name="form" action="">
<h3>Add Comment for <?php echo $name;?><h3>
<input type="text" name="name" id="name" value="<?php echo $name;?>" hidden > <br>
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Post" name="submit" class="submit_button"/>
</form>
</div>
<div class="space"></div>
<div id="flash"></div>
<div id="show"></div>
action.php
<?php
include('DB.php');
$check = mysql_query("SELECT * FROM comment order by commentID desc");
if(isset($_POST['content']))
{
$content=mysql_real_escape_string(trim($_POST['content']));
$name=mysql_real_escape_string(trim($_POST['name']));
mysql_query("insert into comment(content,name) values ('$content','$name')");
$fetch= mysql_query("SELECT content FROM comment order by commentID desc where name = '$name'");
$row=mysql_fetch_array($fetch);
}
?>
<div class="showbox"> <?php echo $row['content']; ?> </div>
when I run this, the page display nothing when I insert the comment, can anyone help me to solve this? Thanks a lot!!

Some changes have been made as follows:
comment.php
<!-- ajax script -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".submit_button").click(function() {
var textcontent = $("#content").val();
var name = $("#name").val();
var dataString = 'content='+ textcontent + '&name='+name;
if(textcontent=='')
{
alert("Enter some text..");
$("#content").focus();
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: true,
success: function(html){
$("#show").after(html);
document.getElementById('content').value='';
$("#flash").hide();
$("#content").focus();
}
});
}
return false;
});
});
</script>
<div>
<!-- retrieve hotel id from hotel table -->
<?php
include('DB.php');
$id=$_GET['id'];
$query = mysql_query("select * from hotel where name='$id'");
while($rows=mysql_fetch_array($query)){
$name=$rows['name'];
$price=$rows['price'];
$duetime=$rows['dueTime'];
$address=$rows['location'];
}
?>
<!-- post form -->
<form method="post" name="form" action="">
<h3>Add Comment for <?php echo $name;?><h3>
<input type="text" name="name" id="name" value="<?php echo $name;?>" hidden > <br>
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Post" name="submit" class="submit_button"/>
</form>
</div>
<div class="space"></div>
<div id="flash"></div>
<div id="show"></div>
action.php
<?php
include('DB.php');
$check = mysql_query("SELECT * FROM comment order by commentID desc");
if(isset($_POST['content']))
{
$content=$_POST['content'];
$name=$_POST['name'];
mysql_query("insert into comment (content,name) values ('$content','$name')");
echo '<div class="showbox">'.$content.'</div>';
}
?>
Reasons why your code failed:
name not added in dataString causing name not sent in post
some mysql errors