We Keep Coding

How to not redirect people on submit (Mailchimp Custom Form)?

I made a custom form with mailchimp, with custom css and custom JavaScript for errors. But, when you click on submit, the form redirects you to a thank you page or to a error page, and I don't like that.
In my JavaScript code, I already have the error' messages set onclick.
This is my html (I only put the input codes):
<form action="----/subscribe/post-?u=----;id=----" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="text" value="" name="FNAME" class="required form-input" placeholder="Nome..." id="mce-FNAME">
<div id="obbligo-nome" class="obbligo" style="color:red">Required</div>
<input type="email" value="" name="EMAIL" class="required email form-input" placeholder="Email..." id="mce-EMAIL">
<div id="obbligo-email" class="obbligo" style="color:red">Required</div>
<input type="radio" value="Acconsento al trattamento dei miei dati personali." name="CONSENSO" id="mce-CONSENSO-0">
<div id="obbligo-consenso" class="obbligo" style="color:red">Required</div>
<input type="submit" value="ACCEDI" name="subscribe" id="mc-embedded-subscribe" class="button">
So, I set my vars and my onclick, and everything works fine.
var username=document.getElementById("mce-FNAME");
var email=document.getElementById("mce-EMAIL");
var consenso=document.getElementById("mce-CONSENSO-0");
var login=document.getElementById("mc-embedded-subscribe");
login.onclick=function() {
if (username.value.length==0){
document.getElementById("obbligo-nome").style.display = "block";
}
if (email.value.length==0){
document.getElementById("obbligo-email").style.display = "block";
}
if (consenso.checked==false){
document.getElementById("obbligo-consenso").style.display = "block";
}
}
The only problem is that it redirects by submitting to a mailchimp's thank you page or to the errors page (I don't want this, I'd like to show everything on my website page into the form).
I know that this redirect is caused by the "form action" in the html, but how can I block this? Thank you so much.
PS: I saw other questions about this, but I didn't understand so much, I'm new to javascript and I don't know jQuery.

You can use Axios for Ajax requests.
Then you dont need the "form" tag and can send data without reloading or redirecting the page

Javascript function on submit externally?

I'm looking to create a Chrome extension for a new tab page. I've written the page and have it working only I'm having a problem with moving my Javascript from inline to external.
Current index.html is looking like this:
<script>
function process()
{
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
}
</script>
<div class="container">
<form onSubmit="return process();">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
I've tried a few different methods of moving this into an external file but I'm not great with Javascript. I'd imagine I would need to use an event listener of some kind. I've tried placing this in search.js:
var form = document.getElementById("search");
form.addEventListener("submit", function() {
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
});
With this amended html:
<form id="search">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
But to no avail. Can anyone help?

You are attaching the 'submit' event to the text input element.
You should instead attach it to the form, as it's the form what gets submitted, not only that particular input. (You already do it correctly on your current index.html document).
You can do this adding an id to the form element:
<form id="your-form-id">
and then attaching the event to it like you're already doing:
var form = document.getElementById("your-form-id");
form.addEventListener("submit", function() { ...
Also, note that unless you've changed your html while moving the JS code to an external file, on the 'submit' event callback you're trying to get the search string from an element with id="url" while your text input element has id="goog", so you won't be able to retrieve it.
EDIT:
The issue seems to be that the form submit gets executed and you're redirected to the same page with a new blank input before your code can be run.
You can avoid this calling preventDefault() on the event when receiving it so the form is not submitted and your code is run, instead of returning false at the end.
form.addEventListener("submit", function(event) {
event.preventDefault();
... your code ...

I've noticed that it's possible without any Javascript. I can make a form with a method of GET and pass the contents of the form into the GET request like below:
<form method="GET" action="https://google.co.uk/search">
<input type="text" name="q" class="form-control" placeholder="Google Search">
<input type="Submit" style="display:none">
</form>
The above solution is correct but using this avoids any Javascript whatsoever.

Executing javascript present in the value field of inputs - JavaScript

I have a form in html:
<form name="foo" action="http://localhost:3000/my_url" method="POST">
<input type="text" name="username" value="alert('hello')" >
</form>
I need to get that JavaScript in the value field for the input to execute, but only through the form's submit. The reason is that page is a template so I don't control it (can't have
<script>
var input = document.getElementsByName("username");
</script>
or any other <script>tag added to the page. I'm trying to prove that's possible an attack to take place over malformed <input> fields, specially using templates.
How can I have that Javascript to execute on the form submission? Remember I'm not allowed to modify the page content except for that piece.
Since I'm doing a POST that form, I can set the <input> field (and only the <input> field) to whatever I want.
I could do
username=<script>alert('hello')<script>
<input type="text" name="username" value="<script>alert('hello')<script>" >
or
username=window.onload = function() { alert('hello') }
<input type="text" name="username" value="window.onload = function() { alert('hello') }" >
I have thought about doing a
username=document.forms['myform'].onsubmit() = function() { alert('hello') }
<input type="text" name="username" value="document.forms['myform'].onsubmit() = function() { alert('hello') }" >
All of those are valid. However I need to get the Javascript in the tag to execute. How can I do that? The security flaw is how the` tag can be exploited if not properly sanitized. As per #guest271314 "requirement include adding tag ..."

When you use a template engine to render html content the server normally sanitize and escape it to prevent passive injection of cross site scripts or XSS for short.
Such attack can be easily achieved on a server that does not enforce the previously mentioned security measures by posting malformed content that will happily be rendered later by the template engine.
For example a form that sends user input
<form name="foo" action="http://localhost:3000/my_url" method="POST">
<input type="text" name="username" value="" >
</form>
If the user sends something like "><script>alert('foo')</script> and later you display this input in another form
<form name="bar" action="http://localhost:3000/my_other_url" method="POST">
<input type="text" name="username" value="#template_engine_render(posted_username_value)#" >
</form>
The resulting output will be
<form name="bar" action="http://localhost:3000/my_other_url" method="POST">
<input type="text" name="username" value="">
<script>alert('foo')</script>
</form>
Because the "> caracters close the input tag and you will end up executing arbitrary user javascript code in your page.
This is why "Never trust user input" is one of the most basic security rules of the web.

Try utilizing Function
Note, submission of form at stacksnippets appear blocked; substituted click event for submit event; i.e.g., click on input at stacksnippets for value of input to be called as parameter to Function.
document.forms["foo"].onclick = function(e) {
Function(this.children[0].value)()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="foo" action="" method="POST">
<input type="text" name="username" value="alert('hello')" >
</form>

Submit a Form without redirecting

I want to submit a form without redirecting page. Form is submitted to third party so i can't make changes in php.
What I want to do is:-
Submit for without visiting third party page.
After successful submit show alert.
Current I am using hidden iframe and form target to hidden iframe but I am not satisfied. Is there is any better way to do this using javascript or jquery.
My Form:-
<form target="iframe" action="http://www.example.com" type="post" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
My Iframe:-
<iframe style="display:none" id="iframe"></iframe>

You need to use Ajax for that kind of request.
Please look at some tutorials, this for example http://www.w3bees.com/2013/08/submit-form-without-page-refresh-with.html

Change the iframes id attribute to name:
<iframe style="display:none" name="iframe"></iframe>

You can use jquery here
<form action="http://www.example.com" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
and after in jquery you write like
// bind to the form's submit event
$('#myform').submit(function() {
alert("ok");
return true;
});

Consider using a PHP proxy.
Copy the script from here to anywhere you like on your own server.
Modify line 11 so that it points to the URL you are posting to at the moment.
// Destination URL: Where this proxy leads to.
$destinationURL = 'http://www.otherdomain.com/backend.php';
Then in your ajax script, change the URL to your proxy.php script.

How can I call a new page and add in the value of a form variable

I would like to link to a new page in the format:
/topic/create&qty=4
Right now I have the value (which is the number 4) stored in an field in a form. I tried to put everything in the form with a post but then realized this isn't what I want to do. I just need clicking on a button to go to link to a new page and send the input field value. The reason I want just a link is that later on I will have posts from that form and they will be handled completely differently.
Is this possible? All I know is that
<form action="/adminTopics" method="post">
isn't what I need.

you can not use POST to send data via url, but you can use GET like this: /topic/create?qty=4
EDIT: Clarification
Writing red in the text field and pressing submit on this form...
<form action="/handler.php" method="GET">
<input type="text" name="color" />
<input type="submit" />
</form>
will produce identical results on the server side to clicking this link
<a href='/handler.php?color=red'>rum</a>

If the url is
/topic/create?qty=4
and it has to be posted, then you can use
<form action="/topic/create" method="post">
<input type="hidden" name="qty" value="4" />
</form>
Send
or
<script>
window.onload=function() {
document.forms[0].submit();
}
</script>
If you do NOT need POST, then just call the URL which is the same as a GET
<input id="qty" type="hidden" name="qty" value="4" />
<a href="/topic/create"
onclick="location=this.href+'?qty='+document.getElementById('qty').value;
return false">Go</a>