On below script, the form uses the required attribute for a checkbox, yet it is possible to send it without checking the box. According to w3cschool, all current browser support this attribute.
Why doesn't it work ?
<html>
<body>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script>
function onTosSubmit(token) {
document.getElementById("tos").submit();
}
</script>
<noscript><?php echo 'enable JS'; ?></noscript>
<form id='tos' action="" method="POST">
<input type="checkbox" name="toscheckbox" id="toscheckbox" required/>
<label for="toscheckbox">I agree with terms of use</label>
<button
class="g-recaptcha"
data-sitekey="My Google reCaptcha API key"
data-callback="onTosSubmit">
Button text
</button>
</form>
</body>
</html>
Removing the button attributes allows proper operation, but they are required for recaptcha.
Related
I need to test POST endpoint that returns html with autosubmit form(js script submits it after small delay). Current behaviour is that after sendPost nothing happens, wait does not help too, but I can retrieve full html with grabResponse method. Is there any way I can either make Codeception process returned html so that form will be submitted automatically or render html manually? In the end I will need to check that returned html form was submitted, that I was redirected to the correct url and then I will need to check some elements on the page I was redirected to.
Returned html example
<html xmlns="http://www.w3.org/1999/xhtml">
<body onLoad="autoSubmit(300)">
<form id="redirectForm" name="form" action="/redirect-url" method="post">
<input type="hidden" name="input1" value="value">
<input type="hidden" name="input2" value="value">
<input type="hidden" name="input3" value="value">
<noscript>
<center>
<h3>Please click the Continue button if you are not automatically redirected.</h3>
<input type="submit" value="Continue">
</center>
</noscript>
</form>
<script type="text/javascript">
function autoSubmit(timeout) {
setTimeout(function () {
form.submit();
}, timeout);
}
</script>
</body>
</html>
What I want to do
$data = $this->prepareData(I);
$I->haveHttpHeader('Content-Type', 'application/x-www-form-urlencoded', true);
$I->sendPost($url, $data); // returns html with form
// some magic happens here
$I->canSeeCurrentUrlMatches('my-url');
$I->canSeeElement('element indicating that form values were valid');
In bootstrap, active class is used to get selected radio button value. When a radio button is clicked, active class is added to label of that button. After submitting the form value of radio button with active label is sent for further processing.
However when the active class is added from jquery and form is submitted, it doesn't post/get value of that button. To make this work I have to simulate the click on radio button with active class.
Am I doing something wrong ?
Is there any other way to achieve this ?
<?php
$value = 1;
?>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script>
function showOption() {
$(document).ready(function () {
$('#option_grp input[value=<?php echo "$value"?>]').parent('label').addClass('active').click();
});
}
</script>
</head>
<body onload="showOption()">
<div class="container">
<form method="post" action="getValue.php">
<div id="option_grp" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="pr_type" value="1">Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="pr_type" value="2">Option 2
</label>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</body>
</html>
getValue.php
$pr_type=$_POST['pr_type'];
echo "pr_type : ".$pr_type;
In order for a radio button value to be sent to the server during a POST request, it must be marked as "checked". You can do this more than one way.
For example:
You can simulate a user clicking on the radio button which will cause the radio button to be selected.
You can mark the radio button checked by setting the "checked" attribute to "checked". See this answer for reference.
Either way should work, but the second method would be preferable. Once the radio button is checked, it can be styled however you like. Use can use the Bootstrap class 'active' or any other that you like, but the styling will have no bearing on what is sent back to the server.
I have a form that I need to submit automatically... (the fields are already filled and its complicated to explain why but it IS necessary to do it this way)..
I know how to autosubmit the form using Javascript but the only problem I have is that there is more than 1 submit button.. and I need 1 in particular to be submitted...
thanks in advance
EDIT2(source):
<I put the javascript in the head... />
<FORM ACTION="PDF.php" name="form" METHOD="post">
<A whole bunch of inputs />
<INPUT TYPE="submit" name="form-save" VALUE="Save Changes" >
<INPUT TYPE="submit" name="form-submit" VALUE="Submit" >
<input type="submit" name="print" id="print" value="Download PDF" />
</form>
instead of going for a click event on a submit button, you can call submit of a form object from javascript.
Example :
<head>
<title>Auto Submit Form</title>
<script type="text/javascript">
window.onload = function () {
var form = document.getElementById("PDFGenerationForm");
form.submit();
};
function OnFormSubmit() {
alert("Submitting form.");
}
</script>
<body>
<form id="PDFGenerationForm" action="" method="post" onsubmit="OnFormSubmit">
<!--Any input tags go in here-->
</form>
This editor won't let me paste the whole HTML in here. So, it is in fragments.
$("#yourbuttonid").click();
EDIT:
<form>
...
<input type="submit" id="myFirstsubmit" />
<input type="submit" id="mysubmit" />
</form>
<script type="text/javascript">
$(document).ready(function(){$("#mysubmit").click();});
</script>
If you really want to click a specific button, add this script to the end of your page:
<script type="text/javascript">
// press the button
var myButton = document.getElementById("idOfTheButtonToClick");
myButton.click();
</script>
This assumes your button has an ID.
1) Here is a working auto-submit method: when page is loaded, the form will be immediately autosubmited (the values can be set with php variables too.)
<form action="page.php" name="FORM_NAME" method="post">
<input type="text" name="example1" value="YOUR_VALUE" />
<input type="submit" />
</form>
<SCRIPT TYPE="text/JavaScript">document.forms["FORM_NAME"].submit();</SCRIPT>
or use for any form on that page:
document.forms[0].submit();
2) you can use button-click (called after 1 second):
<SCRIPT TYPE="text/JavaScript">setInterval(function () {document.getElementById("myButtonId").click();}, 1000);</SCRIPT>
I need jquery to check if my posted filename (up_image) is empty or not.
if it's empty i need a div tag to be shown and come with some kind of alert message.
if not, just do the
$("#submit").submit();
<form action="/profile/" method="post" enctype="multipart/form-data" id="submit">
<p>
<label for="up_image">image:</label>
<input type="file" name="up_image" id="up_image" />
</p>
Upload
</form>
$(function() {
$("#post_submit").click(function() {
var fil = $("#up_image");
if($.trim(fil.val()).length == 0) {
alert("Choose a file!");
fil.focus();
return false;
}
$("#submit").submit();
});
});
1: use a standard submit button to submit your form rather than a javascript-dependent link, for accessibility reasons, and to prevent brokenness if someone tries to right-click-open-in-new-window or other similar action on the link. If you want it to look like a link, you can still use a button, just apply some CSS to make it no longer look like a button.
2: use the form.onsubmit event to do validation rather than relying on a submit button click (forms can also be submitted by pressing enter, which may not always generate a button click)
<form id="uploadform" method="post" action="/profile/" enctype="multipart/form-data">
<p>
<label for="up_image">image:</label>
<input id="up_image" type="file" name="up_image" />
</p>
<p>
<input type="submit" value="Upload" />
</p>
</form>
<script type="text/javascript">
$('#uploadform').submit(function(e) {
if ($('#up_image').val()=='') {
alert('Please choose a file to upload.');
e.preventDefault();
}
});
</script>
For some reason it's not changing the action of the forum. I have some code to change the action of a form when a button is clicked:
function changeForm(event){
alert("Before: "+jQuery("#franchiseform").attr("action"));
jQuery("#franchiseform").attr("action", "franchisepreview.php");
alert("After: "+jQuery("#franchiseform").attr("action"));
jQuery("#franchiseform").submit();
}
The binding:
jQuery("input.preview").bind("click", changeForm);
The form:
<form method="post" enctype="multipart/form-data" action="franchiseinsert.php" class="insert-new" id="franchiseform">
The buttons:
<input type="button" value="Preview" id="preview" name="preview" id="preview" class="preview" /><input type="submit" value="Insert" />
First off, you need to clean up the
<input type="button" value="Preview" id="preview" name="preview" id="preview" class="preview" />
to:
<input type="button" value="Preview" id="preview" name="preview" />
as an input should not have multiple id attributes and you should not use classes and id's with the same name. This could be one reason why you're having problems. Then I used the following code and the action url was actually changing:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#preview").bind("click", changeForm);
function changeForm(event){
alert("Before: "+ $("#franchiseform").attr("action"));
$("#franchiseform").attr("action", "franchisepreview.php");
alert("After: "+ $("#franchiseform").attr("action"));
$("#franchiseform").submit();
}
});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="franchiseinsert.php" class="insert-new" id="franchiseform">
<input type="button" value="Preview" id="preview" name="preview" />
<input type="submit" value="Insert" />
</form>
</body>
</html>
Unless you stripped out too much, it looks like you need to put your "after" call into a function called "changeForm", which is what you are binding to the click event.
otherwise, keep chaining:
jQuery("input.preview").bind("click", function(){
jQuery("#franchiseform").attr("action", "franchisepreview.php"));
jQuery("#franchiseform").submit();
});
It turns out that this is a Firefox / Mac specific bug. It works on other platforms and browsers, but not this specific computer for some reason. It could be an extension conflict or something else, I'll simply use another browser.