We Keep Coding

Chrome Extensiom submit button inside anchor tag does not redirect

I'm building a simple chrome extension. In it, I'm trying to make the submit button in a form redirect the user to a different page after submitting the form but I can't get it to work. I have tried the following:
//First way
const button = document.querySelector('.button');
button.addEventListener('click', () => {
document.location.href = 'results.html';
});
//Second way
const form = document.querySelector('form');
form.onsubmit = redirect;
function redirect() {
location.href = 'results.html';
console.log("successfully redirected");
};
//Third way
<button onclick="window.location.href='results.html'" class="button" type="submit">Submit</button>
//Fourth way
<a href="results.html">
<button class="button" type="submit">Submit</button>
</a>
My form looks like this
<form method="POST" action="http://localhost:3000/sleep">
<label> How much did you sleep last night?
<input name="duration" type="number">
</label>
<label> How well did you sleep?
<div>
<label>
<input type="radio" name="quality" value="bad">
Bad
</label>
<label>
<input type="radio" name="quality" value="ok">
Ok
</label>
<label>
<input type="radio" name="quality" value="good">
Good
</label>
</div>
</label>
<input type="hidden" name="user_id" value="1">
<button class="button" type="submit">Submit</button>
</form>
I tried redirecting to a page using different elements other than the submit button and that somehow worked. Is there something about the submit button that doesn't allow me to redirect? I am trying to make the user experience a little better by redirecting as soon as the form submits so I would like to redirect using the submit button if that's possible. Also, I don't know if this is relevant but I am using manifest v3.

Use in this way
function clickHandler(e) {
chrome.tabs.update({url: "https://stackoverflow.com"});
window.close(); // Note: window.close(), not this.close()
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('button').addEventListener('click', clickHandler);
});

Submit form - cach after submited

I am trying to post the form from modal. To keep the current page, I target post to the iFrame.
Which trigger is triggered after posting the form? Or any other solution to close modal after post?
OnSubmit, as seen in the code, do not work.
<div class="modal-body">
<form method="post" id="modalForm" action="/Test/TestForm" target="myframe">
<input type="text" name="id" required />
<input type="text" name="name" required />
<input type="submit" value="Post" onsubmit="alert('after post - close modal!');" />
</form>
</div>

You can post form via Ajax and get the begin and end request by using the following approach:
<script>
$(document).ajaxStart(function () {
//display loading, etc.
});
$(document).ajaxComplete(function () {
//hide loading, etc.
});
</script>

AngularJS form validation: show error message for checkbox after click on submit

With AngularJS, how can I show an error message for a checkbox after a click on submit button if the checkbox isn't checked?
I tried this :
<form action="/" method="post" name="myForm" novalidate>
<label>
<input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required>
</label>
<p class="error" ng-show="myForm.$submitted && myForm.myCheckbox.$error.required">Error message</p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
But it didn't work. When I click on submit button, nothing is happening. If I remove "novalidate" on form tag or "ng-disabled" on submit button, the form is submitted even if the checkbox is not checked.
Can you help me please ?

You have ng-disabled="myForm.$invalid" in your submit button, so the submit event never is fired (because the button is disabled when the form is invalid) and thus the condition ng-show="myForm.$submitted && myForm.myCheckbox.$error.required" never is fulfilled because myForm.$submitted is false.
Edit:
As some other users here have suggested, I think your best bet would be if you change the way you are doing things right now. I can think in tow solutions (very similar), but they includes sending the request "the angular way"
Solution 1:
Handle you form submission with angular like this:
Put in your form something like this (note that I deleted the action="/" method="post" part:
<form ng-submit="onSubmit(myForm)" name="myForm" novalidate>
and remove the ng-disabled="myForm.$invalid" from your submit button. Then it would be like this <button type="submit">Submit</button>
... and in the controller
$scope.onSubmit = function(form){
if(form.$invalid){
//... do your call to backend here as you like since the call directly from the form was removed
}
}
Solution 2:
As well change form like this: <form name="myForm" novalidate>
... change your submit button like this: <button type="submit" ng-click="onSubmit(myForm)">Submit</button>
... and use the same function declared in the controller
$scope.onSubmit = function(form){
if(form.$invalid){
//... do your call to backend here as you like since the call directly from the form was removed
}
}
Otherwise you have to change your condition like this
ng-show="myForm.myCheckbox.$error.required"
but this will show the message before the form is submitted

Remove myForm.$submitted because it is never fulfilled (As Asiel Leal mentioned) and also you have put ng-disabled on submit button, so safe to use.
<form action="/" method="post" name="myForm" novalidate>
<label>
<input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required>
</label>
<p class="error" ng-show="myForm.$dirty && myForm.myCheckbox.$error.required">Error message</p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

Try this working example :
var app = angular.module('myApp',[]);
app.controller('myController',function( $scope ) {
$scope.validate = function() {
alert('submitting..');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="myController">
<form name="myForm" ng-submit="myForm.$valid && validate()" novalidate>
<input type="checkbox" name="checkb" ng-model="formData.checkb" required/>
<span ng-show="submitted == true && myForm.checkb.$error.required">Please select the checkbox to proceed.</span>
<input type="submit" value="Submit" ng-click="submitted = true"/>
</form>
</div>

Two forms one submit button

I have two forms, I want to use both forms at the same time.I know it is possible using ajax.
Form1
<form action="upload.php" method="post">
<label for="url">Enter URL:</label>
<input type="text" name="url" size="35" /><br/>
<label for="filemam">File Name:</label><br/>
<input type="text" name="filenam" size="35" />
<br/> <input type="submit" name="sut" value="Submit" />
</form>
Form2
<form method="post" action="forum2_add_:user-prvar-7890:.xhtml:admin-hash-amp:"> <div id="bb"><br/> <img src="http://scodec.xtgem.com/400px-Warning_icon.svg_.png" width="20" height="20"/> <b><font color="#696969">Avoid All Capital Letter on your thread title, special character like (') is not allowed.**</font></b><br/> <b>Thread Title:</b> <input type="text" name="tema_nazov" value="" maxlength="200"/></div> <div id="bb"><br/><b><font color="#696969"> <img src="http://scodec.xtgem.com/400px-Warning_icon.svg_.png" width="20" height="20"/> Article content should be easy to read, easy to understand,presentation clear in order to attract readers.</font></b><br/><b>Content:</b> <br/> <textarea name="text" rows="5"></textarea>
<input type="hidden" name="d_token" value="" /><input type="submit" name="submit" value="Submit" onclick="conti()" style="margin:2px"/></div></form>
</div></div>
Note:
I want to run form1 as Javascript
I want to run form2 submit button as onclick.
Anyone?

Give form 2 an id and create a js submit event handler for this form that will serialize the form data and send it to the form action, the function will be called on form 2 submit button, what we are doing is preventing the default submit action, and submitting our form through AJAX :
Add id to form 2 :
<form method="post" id="formTwo" ....
Create a submit function event handler for form two, call AJAX function without the need for onclick event on submit button in form 2 :
$("#formTwo").submit(function (e) {
e.preventDefault(); //
form = $(this);
$.ajax( {
type: "POST",
url: form.attr( 'action' ),
data: form.serialize(),
success: function( response ) {
console.log( response );
}
} );
});
Form 1 will submit in its default behavior through its own submit button.

Try this:
function conti(){
$("form").first().submit();
}

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?

Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.

type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();