Develop Reference

how do i make a submit button link to another page but i have required attribute

Hello so I have a problem with submit button leading to another page.
I figured it out how to make it go to another page but it doesn't recognize the required attribute.
Does anyone have any ideas ?
Html
<input type="submit" form="product_form" id="searchsubmit" onclick="myFunction()">
<form action="welcome.php" method="post" id="product_form">
<label>SKU</label> <input type="text" name="sku" class="sku" required>
</form>
JS
function myFunction() {
window.location.href = "index.html";
}

How to change text in html with either JS, PHP or HTML on load?

I'm doing this sort of a dictionary which by now works but I have few more things to edit which I have problems with.
It is a simple page with basic editing. The only more complicated stuff is the search and functioning of the button which is done.
I have 4 different languages, Italian, French, German with Italian as default and English.
I also have a simple "Dizionario IBS" (Italian) welcome like thingy but I want that everytime I change languages (Language change is basically a filter, it switches the search result that comes up after you write inside the search bar) the "Dizionario IBS" switches text to more appropriate like if I were to click on "English" Button which filter search results to english the "Dizionario IBS" would become "IBS Dictionary".
I have tried to change it with JS, PHP and HTML, looked up codes and such here but none of them worked.
I'm very basic in programming so I barely know these languages, I'm sorry if I seem too inexperienced.
I also tried to change the type of the text I want changed, like I made it into a input type = text readonly and <h1>like this</h1> and tried to see if that would make things work.
Any suggestions?
<div id='header'>
<img id='img' src='logo.jpg'>
<div id='header-testo'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="English" />
<input type="hidden" name="linguaa" value="en" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Fran&#231ais" />
<input type="hidden" name="linguaa" value="fr" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Deutsch" />
<input type="hidden" name="linguaa" value="de" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Italiano" />
<input type="hidden" name="linguaa" value="it" />
</form>
</div>
</div>
<div id='body'>
<h1 id="titolo">Dizionario IBS</h1>
<br>
<br>
<br>
<br>
<form action="" method="post">
<input type="text" id="searchBar" name="search" placeholder="" value="" maxlength="50" autocomplete="off" autofocus />
<input type="submit" id="searchBtn" value="Vai!" />
<input type="hidden" name="linguaa" />
</form>
</div>
The hidden input is the one that filters the search bar via language, dunno if it's relevant but just saying.
The whole thing works, but I want that every time I click and filter language, the "titolo" text changes to the said language as well.
JS code suggested by a user:
<div id='body'>
<h1 id="titolo"></h1>
<script>
var heading = document.getElementById('titolo');
function languagechange(id) {
if (id == '') {
heading.textContent = 'Dizionario IBS';
} else if (id == 'english') {
heading.textContent = 'IBS Dictionary';
} else if (id == 'french') {
heading.textContent = 'IBS Dictionnaire';
} else if (id == 'italian') {
heading.textContent = 'Dizionario IBS';
} else if (id == 'german') {
heading.textContent = 'IBS W\u00F6rterbuch';
}
}
</script>
<br>
<br> <br> <br>
<form action="" method="post">
<input type="text" id="searchBar" name="search" placeholder="" value="" maxlength="50" autocomplete="off" autofocus /><input type="submit" id="searchBtn" value="Vai" />
<input type ="hidden" name="linguaa" />
</form>
</div>
I moved the JS below the title becuase If i remember correctly putting it above didn't show anything. Also the first "if" was to try to set italian as default to always show when loading the page, didn't work however.

There are few things that you need to amend which I have mentioned steps wise below:
1) Firstly, change all your input type from type="submit" to type="button" ONLY under the id='header' forms. Otherwise every time you click the button it submits the form. Or if you want the form to function then prevent it from submitting. As I do not see any need for the language buttons to have a form, I suggest to change the type to button
2) Many elements in your markup has the same id value. This is bad. id attribute should be unique to each element in a DOM.
3) Coming to your solution, add a onclick event to your button like so & pass the unique id of the clicked button using this.id.
<form action="" method="get">
<input type="button" id="english" name="lingua" value="English" onclick="languagechange(this.id);" />
<input type="hidden" name="linguaa" value="en" />
</form>
Then in your JavaScript declare the languagechange() function like so & compare the id passed earlier to determine the language & change the text accordingly
var heading = document.getElementById('titolo');
function languagechange(id) {
if(id == 'english') {
heading.textContent = "English text";
} else if(id == 'french') {
heading.textContent = "French text";
}
}

$(document).ready(function() { $("#titolo").val('Put anything you want');});
try with jquery
onload, this command will change the text in the element 'titolo' with whatever you want.

Maybe this will help you https://angular-translate.github.io/docs/#/guide
If u use angular translate your html will look like this
<div id='body'>
<h1 id="titolo">{{'IBS' | translate}}</h1>
And then u just set up a file for each language with the translation.
Italiano would be
# suppress inspection "UnusedProperty" for whole file
IBS=Dizionario IBS
English would be
# suppress inspection "UnusedProperty" for whole file
IBS= IBS Directory
Afterwards you just need to write a function which selects which file is used if you press the button
U really should take a look at the doc

add onsubmit attribute to form and submit it

I have two buttons on page:
<div class="bottons">
<button class="wiz_button wizard_prev_step" type="button" style="margin-top: 27px;
display: none"><span><span>Previous</span></span></button>
<form id="orderForm" method="POST">
<input type="hidden" name="Signed_Order_B64" value="">
<input type="hidden" name="email" size="50" maxlength="50" value="">
<input type="hidden" name="Language" value="rus">
<input type="hidden" name="firstname" value="">
<input type="hidden" name="surname" value="">
<input type="hidden" name="appendix" value="">
<button class="wiz_button wizard_next_step disabled long" type="button" style="margin-top: 27px;">
<span><span>Next</span></span></button>
</form>
</div>
This buttons from my custom wizard. Also, I have a click event handler for Next button:
$('.wizard_next_step').click(function () {
// load next step and other stuff
})
I want when user locate on the last step the post form:
if (currentStep === '3') {
// here I want set onsubmit function for the form *
}
How can I do this?
Thanks.
PS. The solution must works in IE 7 and above.

Just do:
$('#orderForm').submit()

Your are using jQuery. so simply use
if (currentStep === '3') {
// here I want set onsubmit function for the form and submit it *
$('#orderForm').submit();
}

Since the button is in the form, and within the attached listener this will reference the button, you can assign to the onsubmit property using:
this.form.onsubmit = someFn;
and submit the form using:
this.form.submit();

Copy value of one form into the hidden field of a second form

I have a page with multiple forms, however all forms need to take the value of a radio button in the products form. Below is a simplified version of my forms which are all on the same page.
<form name="products" method="post" action="" />
<input id="prod_name" name="prod_name" type="radio" value="Product 1" checked />
<input id="prod_name" name="prod_name" type="radio" value="Product 2" />
</form>
<form name="delivery_method1" method="post" action="" />
<input type="hidden" id="item_name" name="item_name" value=""/>
<input type="image" name="submit" value="submit">
</form>
<form name="delivery_method2" method="post" action="" />
<input type="hidden" id="item_name" name="item_name" value=""/>
<input type="image" name="submit" value="submit">
</form>
I understand I should be able to copy the value of "prod_name" into the hidden field of "item_name" using JavaScript however I have tried a number of solutions but they haven't worked.
I have very little JavaScript knowledge so I would appreciate if someone could provide me with a full function and details of how the function is actioned from within the form.

ID attributes should be unique. If you don't need them, remove these. If you're using id=... for styling purposes, replace all occurences of id= by class=, and replace the sharp (#) in the CSS by a dot.
When a form is submitted, only elements with a name attribute are sent.
This should work:
....
<script>
function fill(value) {
var forms = document.forms;
for (var i = 0; i < forms.length; i++) {
if (forms[i].item_name) forms[i].item_name.value = value;
}
}
</script>
</head>
<body>
...
<form name="products" method="post" action="">
<input onchange="fill(this.value)" name="prod_name" type="radio" value="Product 1" checked />
<input onchange="fill(this.value)" name="prod_name" type="radio" value="Product 2" />
</form>
...
All form elements are accessible through their name at the form element. All forms are accessible (by name or by their index in the document) through the document.forms object.
When the radio selection changes, function fill() is called, passing this.value as an argument. From the context of the radio input elements, this.value points to the value of the radio element.
Then, we loop through all forms in the document. If item_name is an element in the form, the value is updated.

Change value of input and submit form in JavaScript

I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}

You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.

document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">

Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};

No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.

You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}

My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.

I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />

You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>

This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>