We Keep Coding

JavaScript Submit and Button

1.A user is guided through a sequence of web pages, entering details which are then stored in hidden fields until all the user information is finally sent to the server.
Each button on each webpage should be:
<input type=button>
<input type=submit>
2.A user has to enter some information on a web page. After successful validation, the information is sent to a servlet or CGI script.
The button on the webpage should be:
<input type=button>
<input type=submit>
There are two scenarios to ask you the difference between ‘submit’ and ‘button’. Can you tell me the best choice for above scenarios and why?

From MDN,
"Note: While input tags of type "button" are still perfectly valid HTML, the newer button tag is now the favored way to create buttons, which has some advantages. It supports the "menu" type, which lets the button serve as the trigger for a popup menu, and given that a button's label text is inserted between the opening and closing tags, you can include HTML in the label, even images."
input type='button', input type='submit', and input type='reset' all create a button on the page. Types submit and reset perform special operations on their form. Type button typically calls some JavaScript to do perform the action.

If you want your button to do something (a function with JavaScript or something like that) without the form being submitted use type="button".
If you want your button to submit the form then use type="submit".
Here is some more info on input types
https://www.w3schools.com/html/html_form_input_types.asp

Basically, that's your homework, and it's not cool, but the general idea here is that storing all the info on the client side and only sending it to the server at the end is:
Error-prone.
Unsecure
The user cannot resume the process from a different browser/computer.

How to disable submit in AngularJS in following scenario?

I am having some trouble with disabling Submit button in a HTML form in AngularJS.
Scenario:
I am selecting a certain process from a HTML Select Box ie. Drop
Down List
Once I select some entry from that, the lower portion is
automatically populated with the required form which again has a set
of inputs
Once you fill in these value, you can either Submit or Cancel the request
Condition:
There is a process in the list where I need to upload 1 or more files along with other input parameters. To do this, I am using a two step approach where I first Choose a File using a button and then I use another button to Upload the file. Clicking on this button makes a REST call and the file is sent to the required target.
I am using ng-file-upload directive from https://github.com/danialfarid/ng-file-upload to accomplish this.
Problem:
I was initially using ng-disabledto disable submit button on the condition that All mandatory input elements are filled and all input validations are passed. Now the problem occurs when I am in the use cases which need files to be uploaded. When I choose a file and upload it, HTML treats that element as empty as the file is already sent to its target and hence fails the validation All mandatory input elements are filled! If I remove this validation, my form expectedly get submitted even if Mandatory fields are empty.
So what can I do in this case to disable my submit button?

Create a boolean variable as what #ShashankVivek said.
if file uploaded $scope.uploaded = true.
so your button should look like this
<button data-ng-disabled="!form.valid && !uploaded">Submit</button>

Automatically submit a form with hidden fields and images when an image is selected in rails

My plan is creating a form with hidden fields and displayed images. I want to submit this form and send all "hidden" data with selected image automatically when the image is selected / clicked. The form should be without a submit button. The project is written in rails. How can I implement it?

This ought to be the ticket:
image_submit_tag("image.png")
Any hidden tags will automatically be sent with the rest of the form, you don't need to do anything special there.

HTML/CSS FORM: Data submitted though required field not valid or entered

This is my first time using HTML/CSS to create a form:
While trying to switch from google form to html form for the sake of having an upload button, I've found this very useful answer: Upload file/stackover
Then I looked at improving the design, so I'v found this:
CSS HTML Form Designs Template; (I've used Form Style 10).
So after trying and trying I've managed to do this:
JSFIDDLE
the Thanks.html file is missing (as on the original example post)
I'm almost done except few thing to sort out, if anyone can help me out that will be great:
I'd like all the required values to be checked upon submission
I've tried to add required Name: <input type="text" name="name" required /> nevertheless it sends the form data to the spreadsheet then display error message in the 1st required field (basically I'd like nothing to be sent until everything is ok in the form) (I read few things about onclick/onsubmit and type="button or submit"
but couldn't sort it out)
in the Thanks file, I've removed everything and wrote only:
<div>
<p><blink>Thank you <?= name ?>, your application has been received.</blink></p>
</div>
How can I center this message under the form, increase size and change colour to red please
I've tried to add the inner-wrap (grey colour around fields) as the template (Form Style 10) by adding: <inner-wrap> instead, but it doesn't work (any idea?)
Thanks you for your help

The reason why it doesn't do what you want is because the button still submits and you have no preventDefault event on submit because they assume you handle it on the backend. But will still display error messages to let the user know something is wrong.
There are several ways you can attack this problem:
you could use a 3rd party plugin like jquery validate
you can handle it to not submit until you check all the fields and then call
form.submit() (via this method you have the final one on the bottom not be input with type='submit' and handle click event and call a validate form method then submit if everything is alright)
on the backend you can check the fields to make sure they're all filled out and not even save to whereever
as for your text-centering: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
Edit:
For form validation, import the jQuery Validate at the top of your page either with the CDN/local js file and then call:
$("#commentForm").validate();

File Upload - Remove Value From Input Box

I have a file input element like this:
<input name="fileupload[]" id="fileupload" type="file" multiple="" />
A user browses for their files and selects them, the files then appear in a list.
Now say a user wants to not add a particular file they hit a cancel button and it is deleted. That works but how do I remove the value from the fileupload input so that when they do upload the file that is meant to be deleted isn't added?

You could use javascript to place a hidden input with each separate file instead of holding them in an array initially, then attach an event handler onSubmit which could collect all the separate files and upload them.
When you need to delete a file from the 'queue' you could just use your javascript to remove the hidden input the same way you are removing it from the list.
If you'd like some code examples, please post some of your code to get us started - it is hard to post code for you if there is no indication of such things like which server side language you are using to handle the files and what javascript you are using to handle the client side code.

You cannot set the value(or clear the value) of a file-input, but you can replace the input with a new input, the effect would be the same.