I have a JSON file and I want to change its properties through an HTML form:
<h1>product detail</h1>
<form>
Name:<br>
<input id="prod-name" type="text" name="name" readonly><br>
Number:<br>
<input id="prod-number" type="text" name="number" readonly>
<br>
<textarea id="prod-desc" name="description" cols="100" rows="10" readonly>description</textarea>
<br>
<textarea id="prod-img" name="images" cols="100" rows="10" readonly>images</textarea>
<br>
</form>
<button id="save-changes">SAVE</button>
I already retrieved the data from a JSON file with jQuery and AJAX but now I need to save it IN A FILE (not local storage)
$('#save-changes').on('click', function () {
json[index].name = $("#prod-name").val();
json[index].number = $("#prod-number").val();
json[index].description = $("#prod-desc").val();
});
So basically i want to change name, number and description in my JSON file
Ok so based on your comments:
I think there are two ways to go about it. One is editing a javascript object and sending it back to the server. The second (which I find more simple) is to simply send back the form as it is edited. Both would require the item has some sort of unique id which is not editable, so that you can keep track of what it is you are actually updating in the server database.
so just make the form functional (simplified example):
<form name="yourForm" method="POST" action="pageHandlingUpdateRequestOnServer">
<input name="db-item-id" type=hidden>
<input name="prod-name" type="text">
<input name="prod-number" type="integer">
<input name="prod-desc" type="textarea">
<input type="submit" value="Submit">
</form>
this form will fire a POST request to the address on action. That address should know how to handle a POST request, taking it, and updating your server database with it.
I don't know what you are using server-side. I also don't know what type of DB you run. if it's php look into PDO statements, and $_POST access. it's too long to answer here. But these two terms should lead you there with some effort and you'll learn a bunch of stuff during the process.
Some useful links:
< form > format
php $_POST
php form handling
php pdo statement
Related
Folks
I am in need to construct a simple < a> tag. or another such mechanism such as < form> etc
There is a third party tool that does not takes arguments in the url.
But suppose at a certain endpoint "https://example.com/ticket" there is a form that performs a search on given tickets Number. I can head over there and manually type a ticket ID and submit the form and result is retrieved.
This tool has one input and one button
<input id="query" name="query" autocomplete="off" type="text">
<button> name="button" type="submit" class="btn"></button>
On my page I have list of tickets assign to certain users, and I am trying to construct an href link that will take the user to "https://example.com/ticket" in new window and reload the page with provide ticket ID in post method
something like following
TICKET-123
one of the option I tried is
<form action="https://example.com/ticket" method="post">
<input id="query" name="query" autocomplete="off" type="text" hidden>
<button> name="button" type="submit" class="btn" value="TICKET-123"></button>
</form>
Argument in the usr such as https://example.com/ticket?id=TICKET-123 would've been sweet, but form link does not work. what am I missing
Could you try something like this for the form sending a user to search.php
<form action="search" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
where search.php would contain the following
<?php
$ticketnumber = $_GET["ticketnumber"];
header("Location: https://example.com/ticket/$ticketnumber");
die();
?>
This would work if you just need to send users to an external site. As long as the pattern is like this. You then wouldn't need to reload the page if you can send the user to the URL correctly in the first instance.
Your question is a little vague but I think this approach could work because users then must input their ticket number instead of getting the inner text from the <a> tag. Let me know if you're looking at a different approach and please clarify how.
Also, if you didn't want to process this via PHP (I'd recommend it though because users can't see how it's done) you could go with the same form and the following
<form action="example.com/ticket/" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
Or you could use window.location.replace("https://example.com/ticket/#"); and place the ticket number where # is.
Say, I have a simple form:
ie. Just for example, although will be a lot larger.
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
I would like to make it so every time a user 'submits' the form, rather then post it with php. I would like to use vanilla javascript to take the form contents that were inserted by the user, and store all content in a javascript variable with the naming convention similar to:
var = submission1
var = submission2
var = submission3
..and it would have all user submitted form field contents. Later down the line I could grab the form field contents via variable. I want to accomplish this with pure vanilla js. No php nor js libraries, and I don't want to alter the mark-up either.
I am limited by pre-existing constraints and need to keep the structure the same for this project. I am generating forms using PHP and populating the page as needed from them.
I have a customer information form
<form action="index.php" method="POST" id="cust-form">
<input type="text" name="cust-name"></input>
<input type="submit" value="submit" name="submit">
</input>
Below that I have a search form
<form action="index.php" method="POST" id="form">
<input type="text" name="search-tags"></input>
<input type="submit" value="submit" name="Search">
</input>
And a variable amount of forms can appear on the rest of the page, normally just a variable process button to pass to a php backend.
I keep running into issues passing the customer data into a post format so it can be processed by the php back-end. I have tried with javascript
var form = document.getElementById('form');
var data = $('#cust-form').serialize();
data.split('&');
var cust_name = document.createElement("input");
cust_name.setAttribute("type", "hidden");
cust_name.setAttribute("name", "cust-name");
cust_name.setAttribute("value", data[0]);
form.appendChild(cust_name);
But that wont appear in the POST request that I receive. What would be the best way to get that request through without having to do a major overhaul to the code structure?
Are you able to add the hidden "cust-name" input to the html, or is this something that you are unable to modify?
According to MDN (https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) using setAttribute to set the value works inconsitently. You should try this instead:
cust_name.value = data[0];
I'm new to jquery
I'm working on a form data html,
now i need to reset the data on click on the reset button and also need to transfer the form data to email on click on submit button.
Can anyone help me in solving this??
Before Posting the question I have gone through the link which Pierre C. has updated and my question is different from that question and even how to add /can we add "type" attribute in anchor tag.??
here is the html:
<form id="form" method="post">
<fieldset>
<label>
<input type="text" value="Name">
</label>
<label>
<input type="text" value="Email">
</label>
<label>
<input type="text" value="Phone">
</label>
<label>
<textarea>Message</textarea>
</label>
<div class="btns">
Clear
Send
</div>
</fieldset>
</form>
To clear all the data within a form, all you have to do is add an
<input type="reset" name="reset" value="Reset"></input>
However, reset buttons are annoying and no one ever uses them, so I suggest you just leave that. With regards to sending the form, the way I would do it is write this app in ASP.NET MVC and just put the mail logic in the controller, or create an API for your app, then create an Ajax POST on the button click using the form data as API parameters.
Hi I'm trying to login a user to Box.com from a webpage. I accomplished the first part with a simple HTML form submit:
<form action="https://www.box.com/api/oauth2/authorize" type="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name="response_type" value="code">
<input type="text" name="client_id" value="[REMOVED]">
<input type="text" name="state" value="vexhax97td8xf_SomeTemporaryValueForTesting">
<input type="submit">
</form>
This works fine, and I get the authorization code from the query parameters using javascript. I then try the same thing to get the access code (the auth-code is set by javascript on page load):
<form action="https://app.box.com/api/oauth2/token" type="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name="grant_type" value="authorization_code">
<input id="auth-code" type="text" name="code" value="">
<input type="text" name="client_id" value="[REMOVED]">
<input type="text" name="client_secret" value="[REMOVED]">
<input type="submit">
</form>
But I get an "Invalid grant_type parameter or parameter missing" error. Plus this wouldn't be a good user experience to show the response json anyway. I've tried it without the enctype="application/x-www-form-urlencoded" and get the same error.
The Box tutorial does it with curl which obviously isn't an option on a webpage. How do I get the access token without hitting the "Invalid..." error and is there a way to do this via javascript behind the scenes?
For the authorization-code to access-token exchange, "redirect_uri" parameter is missing. But this is not the real problem.
The exchange is supposed to take place on the server-side and you are doing it on the client-side (browser). Maybe you could do the exchange by AJAX call to correctly handle JSON reply but only if box.com allows CORS (which I doubt).
This way you would also expose your client_id and client_secret on your web page (so why do you hesitate posting it on the stackoverflow?).