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

Submit div content as textarea with hidden fields

Got a form and I need to submit the content of five divs. I read many solutions and I figured I could use hidden fields, but I don't know how. Javascript or jquery would be great
<form name="module" id="module" method="post" action="" title="postthis">
<div name="mytext" id="mytext">Here's something I want to pass</div>
<div name="mytext2" id="mytext2">Again, I want this div to act as a text area</div>
<div name="mytext3" id="mytext3">Another text</div>
<div name="mytext4" id="mytext4">Yet another</div>
<div name="mytext5" id="mytext5">Last one</div>
<input name="mytext" type="hidden" id="mytext" value="mytext" />
<input name="mytext2" type="hidden" id="mytext2" value="mytext3" />
<input name="mytext3" type="hidden" id="mytext3" value="mytext4" />
<input name="mytext4" type="hidden" id="mytext4" value="mytext5" />
<input name="mytext5" type="hidden" id="mytext5" value="mytext6" />
<input name="insert" type="submit" class="btn btn-primary" id="insert" value="Save my fields" onClick="return validate_login(module);" />
</form>

Please see below code snippet. to help you achieve your goals. This solution is broken into two parts, the HTML markup and the Javascript code. data-input is used to connect corresponding hidden fields ids. These is then submitted to the server for processing.
function augmentValues(divClass = "mytext") {
const divs = document.getElementsByClassName(divClass);
Array.from(divs).forEach(divElem => {
const inputId = divElem.getAttribute("data-input");
const hiddenInput = document.getElementById(`${inputId}`)
hiddenInput.value = divElem.textContent
})
}
function handleSubmit(event) {
event.preventDefault()
augmentValues();
const formData = new FormData(event.target);
const formValues = Object.fromEntries(formData.entries())
// Validate inputs
// Submit form
console.log(formValues)
event.target.submit()
}
<form name="module" id="module" method="post" action="" title="postthis" onsubmit="handleSubmit(event)">
<div class="mytext" data-input="mytext">Here's something I want to pass</div>
<div class="mytext" data-input="mytext2">Again, I want this div to act as a text area</div>
<input name="mytext" type="hidden" id="mytext" value="" />
<input name="mytext2" type="hidden" id="mytext2" value="" />
<button name="insert" type="submit" class="btn btn-primary">
Save my fields
</button>
</form>

Can't simulate click on submit button via javascript

I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!

How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});

set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call

If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();

That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()

How to show a login form when clicked on sign-in link

i want to show a login form when a click is done on a link . i want to make default behaviour of div "hide ".. how can i do that ? may form is by default showing on page., please help me . it will b grate ful for you .
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
javascript:
$(document).ready (function() {
$('.signin').click(function() {
$('.form').show();
return false;
});
});

Add style to the "form" to hide it.
<div style="display:none;" class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>

Set display property of form class to none as shown belo in using css.
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
css:
.form{
display:none;
}
javascript:
$(document).ready (function()
{
$('.signin').click(function()
{
$('.form').show();
$('.signin').hide();
});
});

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>