I was just checking my newest website creation today & was making sure the form was ok & for some reason the onfocus of the street address is not working, the onblur works fine and all the other text inputs work with the onfocus & onblur. I have looked at the code for 30 minutes and for the life of my cannot figure out what is wrong. I need a fresh pair of eyes to check and see what I did wrong. Below is the code, the Street Address is the one that wont work. (onfocus)
<h2>Contact Form</h2>
<label for="name"></label><input type="text" name="name" size="26" value="Name" style="color: #775594;" onblur="if(this.value==''){this.value='Name'}" onfocus="if(this.value=='Name'){this.value=''}" /><br />
<label for="email"></label><input type="text" name="email" size="26" value="Email" style="color: #775594;" onblur="if(this.value==''){this.value='Email'}" onfocus="if(this.value=='Email'){this.value=''}" /><br />
<label for="phone"></label><input type="text" name="phone" maxlength="13" size="26" value="Phone" style="color: #775594;" onblur="if(this.value==''){this.value='Phone'}" onfocus="if(this.value=='Phone'){this.value=''}" /><br />
<label for="street"></label><input type="text" name="street" size="26" value="Street Address" style="color: #775594;" onblur="if(this.value==''){this.value='Street Address'}" onfocus="if(this.value=='Street Adress'){this.value=''}" /><br />
<label for="city"></label><input type="text" name="city" size="10" value="City" style="color: #775594;" onblur="if(this.value==''){this.value='City'}" onfocus="if(this.value=='City'){this.value=''}" />
<label for="zip"></label><input type="text" name="zip" maxlength="5" size="10" value="Zip Code" style="color: #775594;" onblur="if(this.value==''){this.value='Zip Code'}" onfocus="if(this.value=='Zip Code'){this.value=''}" /><br />
<p class="center"><input type="submit" value="Send" /></p>
</fieldset></form>
I see a typo:
onfocus="if(this.value=='Street Adress')
Address is missing a d.
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>
hey here is the code whenever my site is converted into the mobile view then mailto function is not working? can anyone suggest to me a solution to how he is works in mobile-view?
<form id="myForm" action="mailto:syedali6097#gmail.com" method="post" enctype="text/plain">
<h2>Win</h2>
<input name="name" type="text" placeholder="Enter Name">
<br><br>
<input name="subject" type="text" placeholder=" Subject">
<br><br>
<!-- <label>Email:-</label> -->
<input name="email" type="text" placeholder="Enter Email">
<br><br>
<input name="number" type="number" placeholder=" Enter Phone Number">
<br><br>
<p class="text-center">Fave Vape Flavour:-</p>
<textarea type="text" name="Description" size="50" rows="5" placeholder="Type Message"></textarea>
<br><br>
<input type="submit" value="Send" onclick="myFunction()">
<input type="reset" value="Reset">
</form>
I'm using this code to call controller with action.
I want to send data from input tag inside asp-route-data.
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="korisnik" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="lozinka" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin" asp-controller="Members" asp-route-username=a sp-route-password="" asp-action="LoginUser">
So, asp-route-username should be the value from input korisnik.
Is it possible?
If I understood your question correctly (of which I'm not so sure) I think the answer to your problem is it use <form> tag. Then instead of appling the asp-route attributes on <button> tag, apply them on <form> tag:
<form asp-controller="Members" asp-action="LoginUser" asp-route-username="a" asp-route-password="">
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="korisnik" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="lozinka" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin"></button>
</form>
Be sure to check out the official ASP.NET Core documentation on how to work with forms.
If you pass username and password using asp-route-{value}, it will show these information in the url which is not recommended.
If you just want to pass the two input values from view to controller, you need to modify name attribute of input to match the action parameters.For example:
View:
<form method="post" asp-controller="Members" asp-action="LoginUser">
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="username" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="password" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin"></button>
</form>
Action:
[HttpPost]
public async Task<IActionResult> LoginUser(string username,string password)
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 am having trouble figuring out how to set the form to submit a string to an affiliate but also redirecting the user to my own hosted thank you page. I am using the GET method to submit the string.
this is a very dumbed down version of my form
<form action="http://xxxxx.com/api/post.ashx" method="get">
<div>
<label ><span>First Name <font style="color: red;">*</font></span></label>
<input type="text" name="First" value="" maxlength="128" class="form-text required" />
</div>
<div >
<label ><span>Last Name <font style="color: red;">*</font></span></label>
<input type="text" name="Last" value="" size="60" maxlength="128" class="form-text required" />
</div>
<div >
<label ><span>Phone Number <font style="color: red;">*</font></span></label>
<input class="form-text" type="text" maxlength="14" name="phone1" id="phone1" value="">
</div>
</div>
<input class="form-submit" type="submit" id="edit-submit" name="op" value="Submit" />
</div></form>
If I understand your problem right, iframe is a kinda solution here.