Develop Reference

I want to make editable element as input form field [duplicate]

This question already has answers here:
Using HTML5, how do I use contenteditable fields in a form submission?
(4 answers)
Closed 6 months ago.
My code
<form action="" method="post">
<div name="name" contentEditable="true">You Favorite Movie</div>
<p name="Comment" contentEditable="true">Your Comment</p>
<button>Submit</button>
<form>

As far as I know, only <input> tags are sent in the form data. However, ou could use invisible <input> tags which have data copied into them, like this:
<form action="" method="post">
<div id="name" contentEditable="true" onchange="copyToHidden('name', 'nameInput')">You Favorite Movie</div>
<input type="hidden" name="name" id="nameInput">
<p id="comment" contentEditable="true">Your Comment</p>
<input type="hidden" name="Comment" id="commentInput" onchange="copyToHidden('comment', 'commentInput')">
<button>Submit</button>
<form>
then have this JavaScript somewhere in a script tag
function copyToHidden(elementId, inputId) {
document.getElementById(inputId).value = document.getElementById(elementId).textContent;
}

submitting a page to API- PUT [duplicate]

This question already has answers here:
Using PUT method in HTML form
(10 answers)
Closed 7 years ago.
Sorry I have been a backend developer and my question may look dump; my apologies; I want to have a from and submit to an API endpoint which uses PUT method and based on that if the result is 200 or 400 I want to redirect to different pages; so what I have done so far:
<form class="form-signin" method="PUT" action="MY_API">
<h2 class="form-signin-heading">Please sign in</h2>
<input class="form-control" type="text" required name="email" placeholder="Email address">
<input class="form-control" type="password" required name="password" placeholder="Password">
<input class="form-control" type="text" required name="name" placeholder="name">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
But after submitting it goes to the url from action as GET data, why is that?!
When I submit the page to the API endpoint I want to check the HTTP status code and based on that redirect to different pages.
Also, it is worth mentioning I'm open to any solution which is the fastest(in terms of implementation) and easiest one either pure javascript, JQuery,...
Thanks

The HTML form spec only allows GET and POST, any unknown methods go through GET. What you're going to need to do is create an XMLHttpRequest through javascript programmatically, and set it to PUT with a request body.

Hitting enter in form calling wrong button [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 8 years ago.
HTML:
<form target="" method="post">
<input name="username" type="text" />
<input name="password" type="password" />
<button>Cancel</button>
<input type="submit" />
</form>
Fiddle: http://jsfiddle.net/n9Lpcqyr/
Problem: When I hit enter, both buttons get triggered. Tested with this jQuery:
$('button').click(function(){
alert('help');
});
$("form").submit(function(){
alert('hey');
});
Because the first <button> is mapped to .remove() the dialog, the form no longer exists to be submitted. I know I can bind the enter key to the inputs with js, but I'm looking for an HTML-only solution. I tried tabindex with no luck. What else can I do?

You could move the cancel button outside of the form, like so (and use CSS to style):
<form target="" method="post">
<input name="username" type="text" />
<input name="password" type="password" />
<input type="submit" />
</form>
<button>Cancel</button>

Issue submitting a textarea by pressing enter [duplicate]

This question already has answers here:
Submitting data from textarea by hitting "Enter"
(5 answers)
Closed 8 years ago.
I'm sorry to make this question, as others have done it already. But mostly don't have a good explanation, or always are mixed with more complex chats functions. I want a simple code. The only thing i want is to make my textarea value submit and get inserted to my db using ENTER key. Please don't redirect me to another question, as i know they must be others with starter skills that wants to learn. Just adjust the code to the simple form i have added. Thanks.
Code:
<?php
if(isset($_POST['submit'])) {
$comment = $_POST['textarea'];
$db->query("INSERT INTO blog(textarea) VALUES('$comment')");
}
?>
<form id="form1">
<div>
Comment:
</div>
<div>
<textarea name="textarea" form="form1" maxlength="200" id="textarea" placeholder="Make your comment..."></textarea>
<input style="visibility:hidden" type="submit" form="form1" name="submit" id="submit" value="Submit">
</div>
</form>

You can do this quite simply by adding a keypress event handler to the textarea:
<form id="form1">
<div>
Comment:
</div>
<div>
<textarea onkeypress="if(event.which==13)document.getElementById('form1').submit();"
placeholder="Make your comment..."
name="textarea" form="form1" maxlength="200" id="textarea"></textarea>
<input style="visibility:hidden" type="submit" form="form1" name="submitForm" id="submitForm" value="Submit">
</div>
</form>
That checks if the pressed key has keycode 13 (which is the keycode for the enter key), and submits the form if it does.

Can I use something other than an input type="submit" to send a form?

This is my html code for my little form. The way my 'submit button is styled it can only be an <a>. Can I still submit this form to an email? How can I make this send to the email assigned to it? jQuery or Javascript?
For example can I use this:
<a class="btn send" href="#send">Send</a>
versus input type="submit"?
<form action="mailto:me#myemail.com">
<input name="name" type="text" value="" placeholder="Name" required/><br>
<input name="email" type="email" value="" placeholder="you#yourmail.com" required/><br>
<textarea class="message" maxlength="200" placeholder="We can answer your questions." required><?php echo $_POST[message]; ?></textarea><br>
<a class="btn send" href="#send"><img src="img/send.png" /></a>
</form>

You can use JavaScript to dynamically submit the form:
$(".btn.send").click(function() {
$(this).closest("form").submit();
return false;
});
Or since you use image, how about simple <input type="image">:
<input type="image" src="img/send.png">

You can use
<button type=submit>Submit Me!</button>
Also "image" buttons submit forms.
Now, that said, you cannot directly initiate an email transaction from an HTML form. The best you can do is cause the user's mailer to be shown, but you have precious little control over how/if that works.

Even better...
$('#AnyElement').click(function() {
$('#formID').submit();
});