How to perform an update action on the admin page with a button click?

Question

My concept is this:

I have an user, on his page there is this form:

<form action="#" method="post">
<input type="text" name="name">
<input type="text" name="lname">
<button type="submit" name="submit">Submit</button>
</form>

And on the Admin Panel there is this div:

<div id="refresh-when-user-clicks-submit">
<p id="name-input-from-user-page">Name: (input name from the form above)</p>
<p id="name-input-from-user-page">Last Name: (input lname from the form above)</p>
</div>

The form data needs to be send to the Admin Panel and the NAME and the LAST NAME needs to be updated when the user changes his info. How to best perform this action? IT NEEDS ONLY TO BE CHANGED WHEN THE USER CLICKS SUBMIT AND IT NEEDS TO UPDATE WITHOUT REFRESHING THE PAGE.

You don't have to write me the whole code but please help me to get some info about the language that is needed to perform this action. My backend is PHP. Thanks for helping out.

Hello. You can refer this- https://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh — manishk, Nov 17 '19 at 04:59
@manishk Thanks for your answer, but when I check that code its only when the form and the call are on the same page in my concept I need to receive the data in the div and it needs to be live updated without refreshing the page... You can see it like a chat application — Youri B., Nov 17 '19 at 05:12
The form and admin panel need to be on the same page. Are they on the same page, as in their code? — manishk, Nov 17 '19 at 05:43
@manishk They are not on the same page the form and the panel are on different pages so it needs to work like a chat application kinda.. — Youri B., Nov 17 '19 at 13:08

score 0 · Answer 1 · answered Nov 17 '19 at 06:00

0

let button = document.querySelector('button[name=submit]');
let name = document.querySelector('input[name=name]');
let lname = document.querySelector('input[name=lname]');

button.addEventListener('click', function() {
  document.querySelector('#name-input-from-user-page').textContent = `Name: ${name.value}`;
    document.querySelector('#lname-input-from-user-page').textContent = `Last Name: ${lname.value}`;
});

answered Nov 17 '19 at 06:00

zimmerbimmer

908
7
24

I read the last part of your question later. You can save this code as .js file and import it in your admin page. Every time your user clicks the button, you will get your page updated without refreshing the page. – zimmerbimmer Nov 17 '19 at 06:02
But this is only working when the form and the panel are on the same page? The form is on another page as the admin panel – Youri B. Nov 17 '19 at 13:06
You said 'IT NEEDS ONLY TO BE CHANGED WHEN THE USER CLICKS SUBMIT AND IT NEEDS TO UPDATE WITHOUT REFRESHING THE PAGE.' so I assumed they are in the same page. I don't know if it's a good idea to try to do what you describe in vanilla Javascript. I would consider using React partly in your project. A basic state value with hooks would solve your problem. – zimmerbimmer Nov 17 '19 at 17:32

score 0 · Accepted Answer · answered Nov 18 '19 at 01:28

0

You can use this-

Form.php -

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<script type="text/javascript">
  function clickButton(){
    var name=document.getElementById('name').value;
    var lname=document.getElementById('lname').value;
    $.ajax({
      type:"post",
      url:"ajax.php",
      data: 
      {  
        'name' :name,
        'lname' :lname
      },
      cache:false,
      success: function (html) 
      {
        $('#msg').html(html);
      }
    });
    return false;
  }
</script>

<form action="#" method="post">
  <input type="text" name="name" id="name">
  <input type="text" name="lname" id="lname">
  <input type="submit" name="" value="Submit" onclick="return clickButton();">
</form>

<p id="msg"></p>

Ajax.php -

<div id="refresh-when-user-clicks-submit">
    <p id="name-input-from-user-page">Name: <?=$_POST['name']?></p>
    <p id="name-input-from-user-page">Last Name: <?=$_POST['lname']?></p>
</div>

answered Nov 18 '19 at 01:28

manishk

526
8
26

I still think you dont understand my question. The user input needs to be send to the admin page IT MUST NOT APPEAR ON THE SAME PAGE. I hope you can help me. It needs to be like a chat application between admin.php and user.php. The session is between 2 persons. The form is on the user page and the ajax.php needs to appear on the admin page not on the user page so it needs to be send to the admin. Still thanks for the help – Youri B. Nov 18 '19 at 01:35
Ok, if you just need to display all the data on the admin page, comment out all the code inside the – manishk Nov 18 '19 at 01:43
I still dont think you get it. I have an user on 1 page and 1 admin on his page. When the user inputs his details the info needs to be send only to the admin page so the admin can view it.. also it needs to appear on the admin page without refreshing the page.. – Youri B. Nov 18 '19 at 01:49
Maybe this can help you- https://www.youtube.com/watch?v=8cIBUdXktgE&list=PLxl69kCRkiI2-dfy1dLwbXyn8MaZ8oRac . Good luck! – manishk Nov 18 '19 at 02:09

How to perform an update action on the admin page with a button click?

2 Answers2