Develop Reference

How to send a pre-defined text of a <form> element into action page, without having the user to type

As you know, the <input type="text" name = "input_field"> element creates a space for the user to type in an HTML form. But in this case, I know what the user is going to enter.
For instance, the user wants to send 'hello' to the action page. It isn't a particular piece of information like his/her name, email id, etc. It will be the same for everyone. Then why not just create a button like this:
<input type="submit" value="click to send 'hello'">
When the user will click on the button, 'hello' will be sent to the action page specified in the action attribute of the <form> element.
How do I do it? Also, I need to mention that I am not much experienced in HTML or JS, so I would appreciate a beginner-like solution.
I apologize if this question already exists somewhere.
Thanks in advance!

You can include predefined information when submitting a form by using a type="hidden" field:
<input type="hidden" name="input_field" value="hello">
That doesn't appear visibly on the page, but is submitted just like any other field when you submit the form.

As far as I understand your problem, you want to create a form where few fields will have predefined information
I would suggest not to hide the input according to the UI/UX perspective but instead, you can show those fields as read-only.
In this way, the user will have an idea of predefined values
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="number" disabled readonly id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

Pass a javascript variable to another page when form is submitted. with just html and Javascript

Good day, I am trying to pass a java script variable along with 2 user inputs. I am unable to get the code to work the email and name go to HighScore.php just fine, but I keep getting zero for the hidden field. highscore1 is the name of the variable. I don't know J Query, so I need a HTML java-script solution. Thank you for looking.
<form method="post" name="form" action="HighScore.php">
<input type="text" placeholder="Enter Name" name="username">
<input type="text" placeholder="Enter Email" name="email">
<input type="hidden" name="highscore1" id="hidden_score" value= highscore1>
<input type="submit" name="add" value=Enter>
</form>

I think in your case, you should first use javascript to get/set hidden_score input, you can use it anywhere in your html page, as long as you ensure that input is fully rendered, you can simply add it inside of $(function() { /*you can put your code here*/ }) for jQuery version, and document.addEventListener('DOMContentLoaded', function(event) { /*you can put your code here*/ })for javascript version
<script>
document.getElementById("hidden_score").value = "Set value here";
</script>
And then, in your HighScore.php, you can use this for getting that value depend on form method: $_POST['hidden_score'] for post and $_GET['hidden_score'] for get

function setHighScore()
{
document.getElementById("hidden_score").value = "Set value here";
}
now you can call the above function on any event that meets your requirement

Submit form with Javascript then handle with PHP

Not sure how I did this last time or else I wouldnt asking here but here is what I'm trying to do.
I have the usual basic form with a javascript function that will submit the form. Question is that after the form is submitted, I have an if statement in PHP that echos a that the form has been submitted. Any help would be greatly appreciated.
//PHP
if($_POST['submitDelete']){
echo "welcome, You form has been submitted";
}
//HTML
<form id="form_id" action="" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" TYPE="submit">
</form>
<button type="button" onclick="myFunction()">Submit</button>
//JAVASCRIPT
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
I can't seem to trigger the if statement in PHP. I also tried using the form name in the if statement and that didnt work either.

A form element must be told where to submit its data to when the submit event takes place. This is accomplished by setting the action attribute value for the form. Leaving that attribute empty does not implicitly set the form to post back to the current page. So, if you want to have a single page form/form processor, you need the action to be set to the current page file name:
<form action="currentPageFileName.php" method="post">
Next, there's no reason a single page can't have multiple forms on it. In that case you would need multiple submit buttons, each tied to a specific form. For this reason, you can't just drop a submit button anywhere on the page that you like unless you add the form attribute to the button to tie it back to the form it is supposed to trigger the submit for. Also, if you simply place the submit button within the form element it "belongs" to, you don't have to worry about this.
Also, you have some invalid HTML with:
<input type="hidden" name="submitDelete" TYPE="submit">
An element may not have the same attribute repeated within it (the case that you type the attribute in makes no difference since HTML is not case-sensitive). So, that code would wind up simply creating a submit button.
Lastly, if all you want to do with your submit button is cause its related form to be submitted, there is no need for JavaScript at all. That is what submit buttons do by default.
So, in the end, you can get rid of the JavaScript in your code completely and change your HTML to this:
<form id="form_id" action="currentFileName.php" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" value="true">
</form>
<button type="submit" form="form_id">Submit</button>

Is "name" attribute mandatory in <input>, <textarea> and <button> elements?

Is "name" attribute mandatory in <input>, <textarea> and <button> elements? Or maybe we can use id or class instead?

If these tags are inside a form tag and you are subbmitting that
form to a server, then name is required,
If you are just using them for client-side purposes and don't want to send them to server, then it is optional.

Name is not a required attribute. A small quote from the HTML spec:
The name content attribute gives the name of the form control, as used
in form submission and in the form element's elements object. If the
attribute is specified, its value must not be the empty string.
Notice the "if" in the quote, indicating that it is not required, from a standards perspective.
However, if the input is used with the browsers standard form submission, you won't be able to retrieve the value of the input on the server-side, if you don't have a name to refer to.
If you only need to retrieve the value on the client using JavaScript, then you can use an id, a class, or any other means to select the given input - in that case you can leave the name out if desired.

name is what gets sent to php scripts for processing so for example $_POST['Telephone'] when used as <input name="Telephone" type="text">. Not required unless being used for processing really.

No its not, but generally you would want it.
Try this
<?php
foreach($_GET AS $key=>$val)
{
echo "name '$key' has value '$val'<br>";
}
?>
<form>
<input type="text" name="abc">
<input type="text" id="a">
<input type="text" class="b">
<input type="text">
<input type="submit">
</form>

append div value into url, along with user input from text field using Get submitting method javascript

i'm trying to add value of a div into the URL, then submit the form using GET so i can retrieve the data from the URL to display on my result page. But i'm not sure how to do that.
For example:
Code:
<form action="Receipt.html" method="GET">
<input type= "text" id="Name" name="txtName"/>
<div id="total">30</div>
<input type="submit" value="Purchase" class="submit"/>
</form>
I need to pass the value of "total" along with Name to the URL when user hit submit button.
I hope that make sense. Thank you very much!

With use of jquery we can do this. Try this one...
Html:
<form action="Receipt.html" method="GET">
<input type= "text" id="Name" name="txtName"/>
<div id="total">30</div>
<input type= "hidden" id="txttotal" name="txttotal"/>
<input type="submit" value="Purchase" class="submit"/>
</form>
Javascript: in document ready function
$('#txttotal').val() = $('#total').text();
In next page you can get txttotal

You can get your url from form by using:
var url = $("form").attr("action");
// add value
url+= "?divValue=" + $("#total").html();
// then you use jquery/ajax get as you planed.

if your value in div is fixed or changes once so you can directly place in action, like
<form action="Receipt.html?total=30" method="GET">
Also, using ajax will be a better option if value changes with some changes in form.