We Keep Coding

redirect event with javascript

I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?

Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location

How to replace <button> with enter key?

So basically I have a page where users can post a status, users are able to comment on these status's by typing in the textbox and clicking on the 'Reply' button. However I much rather remove the button so users can just press the enter key to post a reply. Any help would be greatly appreciated!
<div id="status_'.$statusid.'" class="panel panel-default">
<form>
<div class="input-group">
<input type="text" id="replytext_'.$statusid.'" onkeyup="statusMax(this,250)" class="form-control" placeholder="Add a comment.." autocomplete="off">
</div>
<button id="replyBtn_'.$statusid.'" onclick="replyToStatus('.$statusid.',\''.$url.'\',\'replytext_'.$statusid.'\',this)">Reply</button>
</form>
</div>

You can submit a form by pressing enter when a form element is active. See the following snippet that just hooks into the form via it's onSubmit event handler.
function handleSubmit() {
alert('Do your thing...');
}
<form id="commentForm" onSubmit="handleSubmit(); return false;">
<div class="input-group">
<input type="text" id="replytext_" class="form-control" placeholder="Add a comment.." autocomplete="off">
</div>
</form>

jQuery form Validation does not include value of submit button

I'm using jquery form validation from http://www.runningcoder.org/jqueryvalidation/
demo.html
<form id="form-signup_v1" name="form-signup_v1" method="get" class="validation-form-container">
<div class="field">
<label for="signup_v1-username">First Name</label>
<div class="ui left labeled input">
<input id="first_name" name="first_name" type="text">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
<input name="ok" id="ok" type="submit" class="ui blue submit button" value="Ok">
<input name="cancel" id="cancel" type="submit" class="ui blue submit button" value="Cancel">
</form>
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
}
}
});
</script>
I'm use form validation in the url not include the value of submit button
demo.html?first_name=John
I try to remove jquery form validation in the url include the value of submit button
demo.html?first_name=John&ok=OK
I want to check submit button when click from query string but when i use validation the url alway not include query string of button like the figure 1

If you want that the query doesn't include the button name just remove the name attribute from <input type = "button" name="ok">. Also assign a value to the button. By default the submit action forms the query string from the name value pairs in the form.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="get">
<input name="first_name" type="text" />
<input type="submit" value="button">
</form>

Angular.js / Using ng-submit with form

I have an HTML page with form block
<div>
<form>
<div class="row">
...
<input required> a </input>
...
<div>
<div class="row">
...
<input required> b </input>
...
<div>
<div>
<button ng-click="expand()"> Expand </button>
<button type="submit" ng-submit="create()"> Start </button>
</div>
</form>
</div>
When I click on start, and a or b are empties, message is shown: "Please fill out this field" (which it is the desire behavior) . But when I fill out this field, and click again, create() is not submitted and I get the following error: An invalid form control with name='' is not focusable.
I try also in this way:
<div>
<form ng-submit="create()">
<div class="row">
...
</div>
<div>
<button ng-click="expand()"> Expand </button>
<button type="submit"> Start </button>
</div>
</form>
</div>
But then even if I click on Expand, create() is executed instead of expand().
I also try yo change ng-submit to ng-click, but then it doesn't validate that the fields is fill out.
My purpose is that create() will NOT be executed if one of the fields is empty, and proper message will be shown.

Try this:
<div>
<form ng-submit="submit()">
<div class="row">
<input required type="text" ng-model="text" name="text_a">A</input>
</div>
<div class="row">
<input required type="text" ng-model="text" name="text_b">B</input>
</div>
<div>
<button ng-click="expand()"> Expand </button>
<input type="submit" id="submit" value="Create" />
</div>
</form>
</div>

The simple way to do form validation is like this:
Give your form a name attribute
<form name="myForm">
Add the required attribute to your inputs.
Disable your button with
<button ng-disable="myForm.$invalid" ng-click="create()">Submit</button>
If one of your inputs is invalid you can likewise display a message with a span or div that has the ng-show="myForm.$invalid" attribute.
I'm not clear on exactly what you are doing with the data from the inputs.

Convert / Change Div element with Form element

I'm using panelbar, hence form tag is disturbing it's open/close animation
I found that form tag is creating issue, so I want div tag to convert to form tag when I click submit button.
Eg:
<div class="myForm">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income"/>
</div>
<input type="submit" value="Submit" />
</div>
Convert to:
<form name="input" id="" action="html_form_action.php" method="post">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income"/>
</div>
<input type="submit" value="Submit" />
</form>
So all I want is change the div with class ".myForm" to Form element
and closing div with closing form tag.
Is there any way to do this?

Use Javascript + jQuery:
$('.myForm').children().unwrap().wrapAll("<form name='input' id='' action='html_form_action.php' method='post'></form>");
This removes the wrapping div ".myForm" with the unwrap method. Then wraps it's children with the wrapAll method.

You can done this work simply using Jquery -
$(document).ready(function(){
$('form').html($('.myForm').html());
});
But if you want to do this, this is not correct because you use assign id of some element. So after append whole HTML into <form> you should remove .myForm.
Try This
For remove div with class .myForm after append innerhtml into form, you can simply use .remove.
$(document).ready(function(){
$('form').html($('.myForm').html());
$('.myForm').remove();
});
Try This

If you do like html5, you can check out html5 "form Attribute", which allows you to use the form elements wherever you like, and you don't need to wrap the contents inside form tags.
Check this out
<form name="input" id="myform" action="html_form_action.php" method="post"></form>
<div class="myForm">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit" form="myform" />
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income" form="myform" />
</div>
<input type="submit" value="Submit" form="myform" />
</div>