I am having issues with a form in IE9 and IE8.
I have put the code into JS Fiddle (http://jsfiddle.net/EV3N5/) and it comes up with the error '< / FORM >' in red.
<FORM NAME="myform" ACTION="" METHOD="GET">
<p>Window Width
<br />
<input name="inputWidth" />
</p>
<p>Window Height
<br />
<input name="inputHeight" />
</p>
<p>Glass Thickness
<br />
<input name="inputGlass" />
</p>
<p>Sash Density
<br />
<input name="inputDensity" />
</p>
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)">
</FORM>
Could someone go over it and point out my stupid mistake?
Thank you.
The red form is because the input tag is not closed:
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)">
To
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)"/>
As to why it is not working in IE, you need to be more specific about what is not working.
Related
I am importing a form written in GoogleApps Script into an iframe on a page built with Squarespace but for the life of me cannot prevent the form from submitting. I am using:
window.addEventListener( 'load', preventFormSubmit );
as suggested in GAS documentation but this does not seem to be triggering the preventFormSubmit function. Instead, when the submit button is clicked the form submits and goes to a blank google page. Also the alerts in the preventFormSubmit function (now commented out) never display which suggests that the form is never called.
I have spent days on this, cannot find an answer anywhere and can no longer see the woods for the trees. Any clues as to what I am doing wrong?
Squarespace is a website builder which enables one to embed code, in this case as an iframe.
My code:
js.html:
<script>
function preventFormSubmit() {
//alert( "prevent form submit triggered" );
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
//alert( "forms prevented from submitting: " = forms.length );
}
window.addEventListener( "ready", preventFormSubmit );
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler( showSuccess )
.withFailureHandler( showError )
.processForm_1( formObject );
}
</script>
html:
<!DOCTYPE html >
<head>
<base target="_top" >
<?!= include('css'); ?>
<?!= include('js'); ?>
</head>
<body>
<div id="formDiv" class="card" >
<h2 id="title" >Alternative Booking form</h2>
<form id="alternative-booking-form-1" onsubmit="handleFormSubmit(this)" >
<fieldset>
<legend>About You</legend>
<p>Please tell us a bit about yourself.
</p>
<input type="text" id="firstName" name="firstName" form="alternative-booking-form-1"
placeholder="your first name" value="" required
/><br />
<input type="text" id="lastName" name="lastName" form="alternative-booking-form-1"
placeholder="your last name" value="" required
/><br />
<input type="text" id="title" name="title" form="alternative-booking-form-1"
placeholder="your title, eg: mr, mrs, ms etc" value="" /><br>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>We will only use your contact details in case we need to contact you with regard to
this booking, unless you consent
to further communications, as offered later in this booking process.</p>
<input type="email" id="email" name="email" form="alternative-booking-form-1"
placeholder="your email address" value=""
required /><br />
<input type="tel" id="phone" name="phone" form="alternative-booking-form-1"
placeholder="phone" value="" required /><br />
</fieldset>
<fieldset>
<input type="hidden" id="form" name="form" form="alternative-booking-form-1" value="1" />
<br />
<input type="submit" id="submit" name="submit" form="alternative-booking-form-1"
class="red" value="Next →" />
<br />
<br />
</fieldset>
</form>
</div>
<div id="output" name="output" ></div>
</body>
<!DOCTYPE html >
<head>
<base target="_top" >
<?!= include('css'); ?>
<?!= include('js'); ?>
</head>
<body>
<div id="formDiv" class="card" >
<h2 id="title" >Alternative Booking form</h2>
<form id="alternative-booking-form-1" >
<fieldset>
<legend>About You</legend>
<p>Please tell us a bit about yourself.
</p>
<input type="text" id="firstName" name="firstName" form="alternative-booking-form-1"
placeholder="your first name" value="" required
/><br />
<input type="text" id="lastName" name="lastName" form="alternative-booking-form-1"
placeholder="your last name" value="" required
/><br />
<input type="text" id="title" name="title" form="alternative-booking-form-1"
placeholder="your title, eg: mr, mrs, ms etc" value="" /><br>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>We will only use your contact details in case we need to contact you with regard to
this booking, unless you consent
to further communications, as offered later in this booking process.</p>
<input type="email" id="email" name="email" form="alternative-booking-form-1"
placeholder="your email address" value=""
required /><br />
<input type="tel" id="phone" name="phone" form="alternative-booking-form-1"
placeholder="phone" value="" required /><br />
</fieldset>
<fieldset>
<input type="hidden" id="form" name="form" form="alternative-booking-form-1" value="1" />
<br />
<input type="button" id="submit" name="submit" form="alternative-booking-form-1"
class="red" value="Next →" />
<br />
<br />
</fieldset>
</form>
</div>
<div id="output" name="output" ></div>
<script>
window.onload = function() {
document.getElementById("alternative-booking-form-1").addEventListener( "ready", handleFormSubmit );
}
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler( showSuccess )
.withFailureHandler( showError )
.processForm_1( formObject );
}
</script>
</body>
I'm trying to get the 'contact' form on my page in the middle of the webpage.
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Uw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Uw e-mail:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Uw vraag:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Verstuur bericht" />
</ul>
</form>
use css:
#contact_form {width:400px;display:block;margin:0 auto;}
contact_form {position:absolute; top:50px;left:10px;width:500px;display:block;margin:0 auto;}
I can code forms with one ControlGroup but I'm having trouble with multiple ControlGroups. According to the example code, NgControlGroup should be used inside <div> elements and NgForm should be used in the <form> element. So here's my markup:
<form ng-form="main" (ng-submit)="handleSubmit()">
<div ng-control-group="group1" >
<input ng-control="c1"><br /><br />
<input ng-control="c2"><br /><br />
</div>
<div ng-control-group="group2">
<input ng-control="c3"><br /><br />
<input ng-control="c4"><br /><br />
</div>
<input type="submit" value="Submit">
</form>
Here's the code for the component's constructor:
constructor() {
this.group1 = new ControlGroup({
"c1": new Control("first"),
"c2": new Control("second")});
this.group2 = new ControlGroup({
"c3": new Control("third"),
"c4": new Control("fourth")});
this.main = new ControlGroup({
"g1": this.group1, "g2": this.group2});
}
I don't get any errors when I launch the component, but the controls don't take their initial values ("first", "second", and so on). That means the HTML elements aren't being properly bound to the Controls. Any thoughts? Are there any good examples that use NgForm and NgControlGroup?
I figured out what was wrong. The NgModelForm directive should be used instead of NgModel. Also, the <input> elements should mention the proper names of the ControlGroups. Here's the result:
<form [ng-form-model]="main" (ng-submit)="handleSubmit()">
<div ng-control-group="g1" >
<input ng-control="c1"><br /><br />
<input ng-control="c2"><br /><br />
</div>
<div ng-control-group="g2">
<input ng-control="c3"><br /><br />
<input ng-control="c4"><br /><br />
</div>
<input type="submit" value="Submit">
</form>
I have a form like this:
<form rel="search" action="/archives">
<input name="keyword" type="text" value="search..." />
<input type="submit" value=submit" name="submit" />
</form>
When a User click on submit...I want sent parameters by URL...
exact this URL: http://examole.com/archives/keyword
Or any alternative way...
.
Is it possible?
Edit
I try change above code to this:
<form rel="search" action="/archives" method="get">
<input name="keyword" type="text" value="search..." />
<input type="submit" value="submit" />
</form>
The result:
http://127.0.0.1/archives?keyword=search...
How can I change The URL to this:
http://127.0.0.1/archives/search...
Yes, you can. Just use method="get"
<form method="get" rel="search" action="/archives">
<input name="keyword" type="text" value="search..." />
<input type="submit" value=submit" name="submit" />
</form>
I just created html 5 form with attribute "required".
Why it still appear popup "Please fill out this field" in left top of my browser(Firefox), not under the field when it submitted although all field filled.
here my code :
<form method="get" id="form_reg_mem">
<input type="hidden" name="s" value="member"/>
<input type="hidden" name="a" value="4"/>
<h5>member Informatio</h5>
<hr/><br/>
<p>
<label>Email</label>
<input id="mem_email" class="easyui-validatebox filter_email" type="email" name="mem_email" required style="width: 200px" maxlength="45" />
</p>
<p>
<label>First Name</label>
<input id="mem_fname" class="easyui-validatebox filter_alphanumeric" type="text" name="mem_fname" required style="width: 200px" maxlength="45"/>
</p>
<p>
<label>Last Name</label>
<input id="mem_lname" class="easyui-validatebox filter_alphanumeric" type="text" name="mem_lname" required style="width: 200px" maxlength="45" />
</p>
<p>
<label>Address</label>
<textarea id="mem_addr" class="easyui-validatebox filter_alphanumeric" name="mem_addr" style="width: 400px" maxlength="128"></textarea>
</p>
<p>
<label>Phone</label>
<input id="mem_phone" class="easyui-validatebox filter_numeric" type="text" name="mem_phone" style="width: 150px" maxlength="32" required/>
<p>
<label>Member Class</label>
<input id="mem_class" name="mem_class" url="/mobmarket/json/class.json" valueField="id" textField="text">
</input>
</p>
<p>
<input class="button" value="Register" type="submit"/>
</p>
</form>
Thx
Finally i know what my trouble.
It because i use the "easy ui combo box element" as a required field
Dont add required attribut if you use it
You must use this code to make it required
$("some selector").combobox({
required:true
});
The attribute should be
required="required"
The answer provided by mbuurman is correct. Adding required="required" atribute to the input and select tags it worked ok for me. Tested on Chrome (30.0) and Firefox (24.0).