I am trying to make it so that when the user clicks the Submit button, they are redirected to another page. Addittionally, if they try submitting without entering their first name, last name, or email, it will return an error saying "This is a required field". For some reason, neither of this are working. Nothing happens when submit is clicked. I am sure it is something simple but I have never worked with these scripts before so I don't know what I am looking for.
Here is the code:
<form method="post" enctype="multipart/form-data">
<button><input type="submit" value="Submit" onclick="submit();"/></button><br>
<label for="fname">First Name:</label>
<input type="text" required/><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function submit() {
window.location= "http://stackoverflow.com"
}
</script>
Any help would be greatly appreciated!
Try this:
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
</script>
Quick way as it looks like your not using ajax.
Remove the onclick from the submit button (require tag is being ignored because of this) along with the JavaScript and return a 302 redirect with the url from the server if it's successful.
Related
I am trying to automate the login of a web page using vanilla JavaScript.
This is the form on the web page:
<form id="tbb_logon_form" class="login_form" method="post" action="https://www.btopenzone.com:8443/tbbLogon" name="login_form">
<fieldset class="username-field">
<label for="email" id="lbl-email">BT ID</label>
<input type="text" id="username" name="username" class="required" tabindex="3" value="username" placeholder="This is usually your email address">
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" id="password" name="password" class="required" value="password" tabindex="4">
</fieldset>
<input type="submit" value="Login" id="lgnbtn" tabindex="5" id="loginbtn" onclick="var s=s_gi('btiopenzone'); s.linkTrackVars='eVar19,prop50'; s.eVar19='OZ|Home Hub|Landing Page|Account selected:BT Broadband'; s.prop50='OZ|Home Hub|Landing Page|Account selected:BT Broadband'; s.tl(this,'o','OZ|Home Hub|Landing Page|Account selected:BT Broadband');">
<input name="xhtmlLogon" type="hidden" value="https://www.btopenzone.com:8443/tbbLogon">
</form>
The things have tried are:
document.getElementById("lgnbtn").submit();
document.getElementById("lgnbtn").click();
but neither are automating the click of the login button.
Please help me.
You can submit your form using:
document.forms[0].submit();
or
document.forms["login_form"].submit();
I am trying to remove the option to upload a file upon the selection of the No radio button but when I click No it doesn't go away. I have no idea what I'm doing when it comes to JavaScript. How do I make it go away (or come back).
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No" "removeElement();">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function removeElement(){
var parent = document.getId(file);
parent.removeChild(file);
}
</script>
Any help would be greatly appreciated!
You can't just put removeElement(); in the middle of the html tag.
I'm assuming you want to hide the file tag? You'll first want to remove the required.
You will need to add an event listener on your No.
In jQuery this looks like this
$('#no').change(
function() {
if ($(this).is(':checked') && $(this).val() == 'no') {
$(this).hide(); //Change this for the id of the element you want
}
else {
$(this).show(); //Change this for the id of the element you want
}
});
Partly inspired by this source
If you're looking for pure JavaScript, here's what my solution would look like :
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" />
<label for="No">No</label><br>
<p><input type="file" size="30" id="fileUpload"></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function handleChange(remove) {
var element = document.getElementById('fileUpload');
if (remove)
element.style.display = 'none';
else
element.style.display = 'block';
}
</script>
(Not tested)
for hide:
document.querySelectorAll('input[type=file]').style.display = 'none';
for show:
document.querySelectorAll('input[type=file]').style.display = 'block'; //or ''
I have a hidden element (submit form) if the user selects No to the radio button and I am wondering if there is a way to make it so the element is not required when it is hidden but then to required when it is not. Any ideas?
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" />
<label for="No">No</label><br>
<p><input type="file" size="30" id="fileUpload" ></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function handleChange(remove) {
var element = document.getElementById('fileUpload');
if (remove)
element.style.display = 'none';
else
element.style.display = 'block';
}
</script>
Disabling the element will cause the required tag to be ignored.
element.disabled = true;
The form which I want to submit is of the following format
<form class=loginForm name="LoginForm" onSubmit="return loginSubmit();"
method="post">
<fieldset>
<ol>
<li><span class="instruction">Please login with your User Name and Password.</span></li>
<li><a tabIndex=2 target="_blank"
href="/portal/site/login/en-gb/help.html"
class="assistance redArrow">Need help with logging in?</a>
</li>
<li><label for="username">User Name</label> <input tabIndex=3
class="authInput" type="text" id="username" name="username"
autocomplete="off" class="authInput" /></li>
<li><label for="password">Password</label> <input tabIndex=4
type="password" id="password" name="password" autocomplete="off"
class="authInput" /></li>
<li class="persist"><label for="secureComputer"> <input type="checkbox"
value="1" tabIndex="5" name="rememberMe" id="secureComputer"
/><span style="padding-left:10px;">I am on a secure computer.</span>
<br><span style="margin-left: 23px; font-size: 10px;">(Only check if this computer is secure and is only used by you.)</span>
</label></li>
</ol>
<a tabIndex=6
href="/IDM/pwdservice?a=fp"
class="assistance redArrow">Forgotten your Password?</a><br>
<input tabIndex=7 type="submit"
value="Login"
class="redBtn"/><br>
</fieldset>
</form>
<form name="Login" onsubmit="" action="/IDM/UI/Login" method="post" style="display:none">
<input type="hidden" name="IDToken1" value="">
<input type="hidden" name="IDToken2" value="">
<input type="hidden" name="IDButton" value="Log In">
<input type="hidden" name="gotoOnFail" value="">
<input type="hidden" name="encoded" value="true">
<input type="hidden" name="service" value="">
<input type="hidden" name="stepUp" value="N">
<input type="hidden" name="currLang" value="en">
<input type="hidden" name="gx_charset" value="UTF-8">
<input type="hidden" name="rememberMe" value="N">
I am trying to proceed in the same ways as mentioned here. Here is how I am proceeding:
URL server = new URL(url);
HttpsURLConnection urlConn = (HttpsURLConnection) server.openConnection();
urlConn.setRequestMethod("POST");
urlConn.setDoOutput(true);
urlConn.setDoInput(true);
urlConn.setUseCaches(false);
DataOutputStream printout = new DataOutputStream (urlConn.getOutputStream());
if (parameters != null)
printout.writeBytes (parameters);
printout.flush();
printout.close();
where parameters is of the form name1=value1&name2=value2.....&username=uname&password=pwd
However the problem is that I want to add param name and its value for the Login (tabindex=7) ,as shown in the above mentioned link, input as well but I do not have a name only its value?
Is there another way to submit such form to login into a website? There is loginSubmit function on the HTML page, is there a way to use that for urlConn.
How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!