I’m making a website settings page (I guess) where the user of the website can edit the page values that are seen on the public page of a website. (This is restricted to logged-in users only)
I have a form (shown below) that when clicked, executes AJAX and ‘posts’ the update content page.
I guess my question here is how can I change the code below so it changes which text body to take from based on the button pressed.
Even simpler, How can I make a page-wide click event that applies to all buttons, of which I can tell which button is pressed?
I know there is only 1 text field and 1 button below, but there are going to be more in the future, hence why I need this fuctionality.
My e.js
file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<title>Manage the website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitButton").click(function(){
$.ajax({
url: 'update',
type: 'POST',
data: {
toUpdate: 'homepage',
text: document.getElementById('textField').value // Select a text field based on the button
},
});
});
});
</script>
</head>
<header>
<!-- Put partial includes here -->
</header>
<div class="topPage">
<h1>Hello, <%= firstName %>!</h1>
<p1>
Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>
<div class="homepage">
<div class="information">
<h1>
Homepage variables
</h1>
<p1>
Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
</p1>
<hr>
</div>
<div class="form">
<label>
Change the 'body' of 'homepage'
</label>
<form action="nothing" method="post">
<input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
<button type="button" class="submit" id="submitButton">Submit Changes</button>
</form>
</div>
</div>
<script>
</script>
</html>
Thanks in advance!
2
Answers
select the input tags in the form and track the change event:
You can do it like this: