Prepend text to input value on form submit - javascript

What would be the best way to prepend text to an input value on form submit? I’m presuming Javascript?
I have an input on a form where the user will add a numeric value, but on submit I want the value to be prepended with the test 'Invoice Number ';

Don't know if it's the best way, but I would do something like this (untested):
<script>
function PerpendText(name) {
var val = document.getElementsByName(name)[0];
val.value = "Invoice Number:" + val.value;
}
</script>
<form onsubmit="PerpendText('num')">
Enter invoice number: <input type="text" name="num">
<input type="submit">
</form>
Here's a JSFiddle.

Related

How can I bring input field texts to address bar?

If I type some texts in the input field, how can I bring those texts to address bar ?
for eg : I type abcd to input field, I need address bar like www.google.com/abcd
Try this:
function updateAddressBar() {
const inputValue = document.getElementById("inputField").value;
window.history.replaceState({}, '', `?value=${inputValue}`);
}
<form>
<input type="text" id="inputField" oninput="updateAddressBar()">
</form>
The oninput event is used to call the updateAddressBar function whenever the value of the input field changes. The function uses document.getElementById to get the value from the input field, and then window.history.replaceState to update the URL with the new value from the input field.
This can work:
<body>
<p>Typing something...</p>
<input type="text" id="Input1" onkeyup="displayResult()"><!--onkeypress can not function backspace-->
<br>
<button id="Hite">
Hite
</button>
<script>
function displayResult()
{
var text = "www.google.com";
var Input1Value = document.getElementById("Input1").value;
document.getElementById("Hite").innerHTML = text +"\\"+ Input1Value + "\\";
}
</script>
I using onkeyup event so when the value of the input changes, it will function to set the text. Also, the reason why I do not using onkeypress is: onkeypress can not function when you press backspace.
Then, if you want to get the address, you can use document.getElementById("Hite").innerHTML to get it (As you did not required to get it)

User input to build URL

I have a bit of experience with HTML but am very new to JavaScript. In essence, I would like for a user input to be part of a URL. For example, we could have something simple such as:
<script>
function get_cityname() {
var cityname = document.getElementById("cn").value;
alert(cityname);
}
</script>
<form>
Enter city name:
<input type = "text" size = "12" id = "cn">
<input type = "submit" onclick = "get_cityname();">
</form>
This will create a textbox where a user inputs their text (city name) and then click the 'submit' button next to it, and an alert should pop up based on the information they provided, just to make sure this works. However, this code only would seem to work (because of the 'onclick' command) to work for one user input. Therefore, I have 2 questions:
How could the above variable be included in a URL string? If it were something simple as:
URLstring = "https://sampleurl" + cityname + "moretext.html"
How could this be expanded if I want to include two or possibly even n number of inputs? For example, if I create more user prompt boxes and want to have the user also be able to input their zipcode, or state abbreviation, for example:
URLstring = "https://sampleurl" + cityname + "moretext" + zipcode + "moretext" + "stateabbreviation.html"
You could do something along these lines (it would be the same for one or more fields):
// Ensures the DOM (html) is loaded before trying to use the elements
window.addEventListener('DOMContentLoaded', function() {
var cnInput = document.getElementById("cn"),
zipInput = document.getElementById("zip"),
form = document.getElementById("myForm");
form.addEventListener('submit', getUrl); // On submit btn click, or pressing Enter
function getUrl(e) {
var cityname = cnInput.value,
zipcode = zipInput.value,
url = "https://sample.com/" + cityname + "/" + zipcode + ".html";
alert(url);
e.preventDefault(); // Prevent the form from redirecting?
}
});
<form id="myForm">
<label>Enter city name: <input type="text" size="12" id="cn"></label>
<label>Enter zip code: <input type="text" size="12" id="zip"></label>
<input type="submit">
</form>
First specify an action attribute for your form. This is where your form will be submitted. Then set your form's method attribute to GET. Finally, add as many fields as you like (I am assuming you are after a GET query such as https:url.com?key1=val1&key2=val2...):
<form method="GET" action="https://sampleurl">
Enter city name:
<input type="text" size="12" id="cn">
Enter zip code:
<input type="text" pattern="[0-9]{5}"
<input type="submit" ">
</form>

How to get hidden array value from output to PHP

I got an output array code,
<output class="gst" id="op" name="Gst[]">0.00</output>
i got an input hidden array code,
<input type="hidden" id="gst2" name="Gst2[]">
I got a function to show the amount of gst for each output
function myFunction() {
debugger
var ele = document.querySelectorAll('input.input');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
$(input).parents("tr").find(".gst").text((input.value * 0.07).toFixed(2));
});
document.getElementById('result').textContent = sum.toFixed(2);
}
my problem is, how do i get the hidden array gst2 value in PHP?
You can't get de hidden field value in PHP without wrapping it in a form and do a POST / GET request. You could do something like this:
<form method="POST">
<input type="hidden" id="gst2" name="Gst2[]">
<input type="submit" value="Submit">
</form>
After you submit the form $_POST['Gst2'] will be set and you can use that variable. You could do the same with method="GET".
EDIT:
You can find multiple solutions in this post:
https://stackoverflow.com/a/50412517/2075596
Just use input tag using same id and name.

no able to get the value of textbox

<form id="myRegisterationForm">
<label>Name</label>
<input type="text" id="nameTextbox" />
<input type="submit" value="Submit" />
</form>
And the js is
var myform = document.getElementById('myRegisterationForm');
var name = document.getElementById('nameTextbox');
function onSubmit(e) {
console.log(name.value);
e.preventDefault();
}
myform.addEventListener('submit', onSubmit, false);
But somehow the value shows undefined for the text inside name textbox.... even when i enter something and press submit..why?
var r = document.getElementById('nameTextbox').value;
//added .value
Use this to store the value of the text box in variable r.I have renamed the variable to r.
The value property sets or returns the value of the value attribute of a text field.
document.getElementById("nameTextbox").value;
The getElementById method needs a pair of round brackets. In between these round brackets you type the ID you're trying to access. The ID needs to be surrounded by quote marks, single or double. Textboxes have a VALUE attribute. You can get at this value by adding it after the round brackets
var myform = document.getElementById('myRegisterationForm');
function onSubmit(e) {
var name = document.getElementById('nameTextbox');
alert(name.value);
e.preventDefault();
}
myform.addEventListener('submit', onSubmit, false);
<form id="myRegisterationForm">
<label>Name</label>
<input type="text" id="nameTextbox" />
<input type="submit" value="Submit" />
</form>

Multiply parameter and textBox value in JavaScript

I have an input text box that is in a form, and I'm trying to retrieve the value and multiply it to the parameter.
It doesn't run and I'm not sure if there's a syntax error or if my retrieval of textbox value is incorrect.
<script>
function product(parameter1) {
a=parseInt(document.myForm.myTextBox.value);
return parameter1*a;
};
</script>
HTML:
<form name='myForm'>
Insert your number: <input id='myTextBox' value=''><br>
</form>
<input type='button' value='CLICK HERE' onclick='product()'>
You miss an argument in the onclick trigger, it should be ="product(10)", where 10 is your paremeter1 argument.
I believe you would have to have a name on the input tag to access it the way you do, so an easier and probably faster way to access your input would be document.getElementById('myTextBox')
It is better to execute your product() function on form submit, rather than on button click event, since some users might want to just hit enter in the text field instead of the button, but then you would have to move it within the form boundaries and make it be type="submit"
MODIFIED CODE:
js:
<script>
function product(parameter1) {
a = parseInt(document.getElementById('myTextBox').value, 10);
var result = parameter1*a;
// alert(result);
return result;
};
</script>
html:
<form name='myForm' onsubmit="product(10); return false;">
Insert your number: <input id='myTextBox' value=''><br>
<input type='submit' value='CLICK HERE'>
</form>
You were calling method without argument. If you only want to retrieve value, below is the code. I dont know how ur going to use it
Insert your number:
<input type='button' value='CLICK HERE' onclick='product()'>
<script>
function product()
{
parameter1=10;
a=parseInt(document.myForm.myTextBox.value);
return parameter1*a;
}
</script>

Categories