I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.
You should do the getcitybyzip and getstatebyzip in the form onSubmit.
Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?
Related
I have the following form
<form action="" method="post">
<fieldset>
<legend>Booking Details</legend>
<div>
<label for="name">Name:</label>
<input id="name" name="name" value="" required pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname" aria-required="true" aria-describedby="name-format">
<span id="name-format" class="help">Format: firstname lastname</span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="" required aria-required="true">
</div>
<div>
<label for="website">Website:</label>
<input type="url" id="website" name="website" value="">
</div>
<div>
<label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
<input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4">
</div>
<div class="submit">
<input type="submit" value="Submit" onclick="alert('martharfarkar')">
</div>
</fieldset>
</form>
JS Fiddle FROM EXAMPLE
I want to send an email using a webservice on the onclick event of a button, but noticed that the event is triggered regardless the form validation, so the question is, is there a way to trigger the onclick event only if the form is valid without using javascript? perhaps HTML5 has something new to offer
I think the problem is that you are attaching an action to the button click not the form submit. So, two things are happening here:
You are atually using javascript in onclick="alert('whatever')"
You are binding this script to the button click not the form submit
Your validation is working fine for the submit action. Consider use the action parameter in form not the onclick param in the input button.
EDIT:
To be more precise the <input type="submit" value="Submit"> default click action is submitting the form.
Hope it helps!
When I need some extra validation I change submit input to an element 'a' with an 'id' that I can check on a jquery click function. So I validate and I fire a submit manually. Example: $('#formId').submit ().
The best possible way is to bind the action to onsubmit event of the form rather than onclick event of button as user onepopcorn mentioned. It can be done by using
<form action="" method="post" onsubmit=alert('whatever')>
instead of using onclick for the submit button.
I have a very simple form:
<form>
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="button" value="Insert your datas" onclick="insert()">
</form>
If third input (id:"btn") had type="submit", notify/verify would work well.
I don't need to submit this form (because I have to launch an insert() function on button onclick),
so I deleted the submit type of my button and unfortunately no notifications appear on my page now.
I may add an handler (like this: $(".elem-demo").notify("Hello Box")) as notify docs suggest, but that is a custom notification, good, but I want to take advantage of verify.js data-validate..no extra-code required for a simple validation like "required" or "number".
How can I fix that?
I wish I was clear of my issue and thanks to answer me.
You can keep the button type submit and can override the default form submission behavior on submit button click via event.preventDefault()
<form id="my-form" onSubmit="myFunction(event)">
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="submit" value="Insert your datas" onclick="insert()">
</form>
This your function which will be called on form submission.Access the form via its id and call validate to check form for errors.
Calling validate will trigger validation on every element in the form. It accepts a callback function callback(success) which will be called after validation.
function myFunction(e){
e.preventDefault();
$("#my-form").validate(callbackFunction);
// call your other function
}
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
How is it possible to have multiple forms on a page with each one being able to submit itself.
When i have it set up like this, the first forms submits, but the 2nd does not work. Any suggestions on how to make it work? (I will have many forms like this on 1 page)
thanks
<form action="/order-form2.php" method="post">
<input type="hidden" name="phoneType" value="iPhone 2g - 4GB//ATT">
<input type="hidden" name="price" value="75">
<div class="prodSize">4 GB</div>
</form>
<form action="/order-form2.php">
<input type="hidden" name="phone" value="iPhone 2g - 8GB//ATT">
<input type="hidden" name="price" value="25">
<div class="prodSize">8 GB</div>
</form>
use this for 2nd form it will work. as default method is set to get if it has no method.
<form action="/order-form2.php" method="post">
first form is set method to post, second has not, if you're catching with POST then it's empty, set the method to post or catch with GET, if it's not set method, default is GET
Please use the following
<form name='form1' id='form1' method='POST' action='/order-form1.php'>
<a href="#" onclick='return document.forms.form1.submit();'>4 GB</a>
</form>
Note the id and name attributes assigned to form, use that in javascript
Is that possible? Google searches are leading me nowhere.
My Sample form:
<form action="search.asp" method="post" name="form1">
User ID <input type="text" size="15" name="userid"><p>
Last Name <input type="text" size="15" name="lastname"><p>
School <input type="text" size="15" name="school"><p>
District <input type="text" size="15" name="district"><p>
Email <input type="text" size="20" name="email"><p>
<input type="submit" value=" Go Search! ">
</form>
This needs to work from any input box on the form. I tried onkeyUP but wouldn't work or I probably wrote it wrong. I am no javascript expert. Any ideas?
I don't know why you'd do this, but in Firefox, you would write:
<form action="search.asp" method="post" name="form1" onkeydown="if(event.keyCode == 32) this.submit(); return false;">
Check here to see how to retrieve other browsers' key codes.
Again, this is how you would do it, but I think it's a bad idea.
The whole form to submit whenever a space is detected by may be a little messy, but what's interesting is to do it for a specific input. I used it in a field where user gives some tags. Each tag must de only one word,and so the space character can be used as an event to store the given tag and wait for the next.
<input type="text" id="tagtextbox" onKeyUp="if(event.keyCode == 32) myfunction();" />