I feel its strange error !
I am developing WordPress widget for My site.In my widget i have the Highslide Popup
form.While submitting form i want to call the particular function.the function is included in header,But it says function is not found.
My form
<form method="post" name="contact_vendor_contact_frm"
onsubmit="return contact_vendor_contact_frm(this);">
.....
</form>
contact_vendor_contact_frm functions included in header contact_vendor.js.You
can see this in page source
Working place Here.My page
Help me!
In your code name attribute of form is equal to function name and it overwrite your function. If you write:
console.log(contact_vendor_contact_frm); // this would be point to form element not to your function
User Firebug and check if this returns function
typeof contact_vendor_contact_frm;
If not, then check what the returned value is, to solve the problem.
Related
I have a web app written in angularjs that I want to send respective values from individual pages to a server via a GET request but I'm having it done automatically when the page loads.
A snippet of my code is below:
<script language="javascript">
function loaded(){
document.getElementById("dataSubmit").submit();
}
</script>
<form id="dataSubmit" action="http://127.0.0.1" method="get" target="submission.frame">
<input name="data" type="hidden" value={{myData}}>
<input type="submit" id="subbut" value="submit">
<iframe name="submission.frame" hidden></iframe>
</form>
<script>
window.onload = loaded();
</script>
My code above automatically sends the input data named "data" with value {{myData}} which, depends on what page the user is on, to the ip 127.0.0.1 and a script runs at that end and writes the data to a text file.
The problem is that when I try to pass the Angularjs expression {{myData}}, instead of passing the data fetched automatically when the page is loaded, it sends a string literal "{{myData}}" and writes that to the file at the other end.
However, when I click the 'submit' button that I've added to the form, the data sends perfectly and the value that I wanted is written to the file.
I tried using an onload function so that the submission only occurs after the page has loaded so the expression has had time to evaluate but still no luck.
For those wondering, my iframe tag makes it so that the submission form is invisible so when the submission occurs it does not redirect the user to the IP that the data is being sent to.
To clarify the problem, the angular expression {{myData}} is not being evaluated when the form is submitted upon page load, but when the submit button is clicked, {{myData}} evaluates and the value is sent. I need the value of {{myData}} to be submitted in the form when the page loads.
Any help would be greatly appreciated.
What you are facing is a pretty normal behavior, of course the page is finished loading but Angular didn't have time to evaluate the template interpolations.
To be honest I'm not sure what you are trying to achieve with that automated form submition, you can just use the $http service to send the data to whatever end-point you want. This way you know exactly when you have the data attached to the variables.
Tho if for some REALLY weird reason you still want to do the normal javascript form submition you need to create a directive in which you will include the $window service and add scome code looking like:
var autoSubmit = function () {
$scope.$watch("myDataVariable", function (newVal) {
if (newVal) {form.submit()}
})
}
$window.bind("onload", autoSubmit);
The code is not tested, it's a sample of how I would do it ... well I won't do something like that but you know what I mean.
Situation
I have a form
<form action="." method="POST" id="my_form">
<!-- Form stuff here -->
</form>
<p onclick="confirmUpdate();">Update</p>
The confirmUpdate() function generates a confirmation message and the following input tag:
<input type="submit" name="my_name" value="Yes. Update the data.">
using the following JavaScript:
inputYes.type = 'submit';
inputYes.name = 'my_name';
inputYes.value = 'Yes. Update the data.';
inputYes.form = 'my_form';
The page is created as intended, but the input element has no form="my_form" on it.
Condition
The HTML generated with Javascript has to be shown as a nice "HTML pop-up" (not an alert box) to ask the user if the info is correct before submitting.
Questions
Why isn't it working?
The JavaScript generated HTML doesn't appear on the Page Source. Will it be able to submit the data from the form?
Thank you in advance.
You should use setAttribute instead:
inputYes.setAttribute('form', 'my_form');
If the goal is to get your input button to work, then inside your method confirmUpdate(), make the following additions/changes:
Updated fiddle here: http://jsfiddle.net/B7QAc/4/
//add this
var theform = document.getElementById('my_form');
//change this
document.body.appendChild(screenDiv);
//to this
theform.appendChild(screenDiv);
While the previous answers were correct, I found a better solution for my problem. I had to update the question in order to make it more clear. The HTML generated with Javascript was intended to show as a nice "pop-up" to ask the user if the info is correct before submitting.
Therefore, the <input> tag has to be outside of the <form> and reference its id="my_form" via a form="my_form attribute.
Here is the updated JSFiddle for it.
While inputYes.form = 'my_form'; doesn't add the form attribute, inputYes.setAttribute('form', 'my_form'); does the job.
Notice though that it only works at the end of the script, only after it is appended to the HTML Document. It would not work otherwise (at least in this script).
Even though I lack the technical knowledge to explain it better, those are my observations.
This would be the accepted answer. I will promptly accept any other answer that is more complete than this one.
Please explain the piece of code below, emphasize on ./login and onsubmit keywords..
<form action="./login" onsubmit ="return validatedata()" method="post">
This is a form tag of HTML language. It says following things:
content of this form (such as Text Box or Radio Button or Combo Box or other HTML component values) send to ./login url. It is better use HttpServletRequest.getContextPath() for set relative path rather of absolute path.
onsubmit ="return validatedata()" part says: When user click on submit button(with any label) before submit form to ./login url, execute validatedata function in Java Script functions, if this function not existed , user get a java script error(or other script languages).
method="post" part says: this form send with POST method . please see http://www.cs.tut.fi/~jkorpela/forms/methods.html for more information.
for more information related to form tag see : http://www.w3schools.com/tags/tag_form.asp
This declares an HTML <form> element. When submitting the form it will call the javascript function validatedata(). If the function return true the form will be submitted and if it return false, it won't. The './login' is the destination of the form data. So there is probably a page handling the url http://<your_site>/<where_you_currently_are>/login. It also depends on the technology you use. I don't know if you use a framework such as Struts or if you only use JSPs as is.
I am having trouble validating a long form that is loaded via AJAX after the document is loaded. Using the standard validation syntax, the validator looks for my form in the document before it exists and therefore gives me an error:
$(document).ready(function(){
$("#mainForm").validate();
});
firebug responds with:
nothing selected, can't validate, returning nothing
I tried putting the $("mainForm").validate(); in a function then calling the function with the onSubmit event from the form but no luck:
function validate() {
$("mainForm").validate();
};
----------
<form id="mainForm" onSubmit="validate();">
...
</form>
Thoughts?
Some additional info for #Chris:
I have a page that is dynamically creating a form based on many different modules. The user picks the module(s) that apply to them then the form updates with that information to fill in. So when the user clicks on a link to load a module the loadSection(); function is called. This is what the loadSection(); function looks like:
function loadSection(id, div, size, frame) {
var url = "loadSection.php?id=" + id + "&size=" + size + "$frame=" + frame;
$.get(url,
function(data){
$(div).append(data);
});
}
If I put the `$(#mainForm).validate();' in the callback of this function, it has the potential to get called every time a new module is inserted. Which may be good, or may be bad, I'm not sure how the validation will take to be called multiple times on the same form, even if the fields of the form have changed.
Thoughts?
You've likely got the problem right. If the form doesn't exist in the DOM at document.ready(), then nothing will be bound.
Since you're using JQuery, I presume the form is added using the jquery $.ajax (or similar) function. The most straightforward solution would be just to add $("#mainForm").validate(); to the callback function of the AJAX request. If you're not using JQUery ajax, please post the code that's adding the form, and we can help you out further.
you have to specify the class definition to element as required for it to validate that particular element in the form. But I guess you are not having it anywhere so its showing like that.
for example if you want to validate the email:
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
Simple mistake in selector "mainform" is not a valid selector. Add "#" prefix if it is an ID
EDIT: Also notice you have another validate call inline , remove that one
So i've been at this for hours and havn't figure it out and I know there is an easy solution so I figured I would ask here. I am trying to pass the value of a text area into a link as part of a twitter share button. I think the problem is with global scopes I am able to get the variable from within my external javascript but not from my main php file. For example.
Here is the html:
<div id="share_twitter">
Friends Twitter Username (optional) <input type="text" name="friends_twitter" value="#" />
<script type="text/javascript">
window.document.write('');
</script>
Then I have the Javascript in extenral.js which is suppose to get the value of "friends_twitter" and send it back to the main page which will allow me to make a dynamic link to that persons twitter.
I tried this var friends_twitter_input = $("input[name=friends_twitter]"); but got undefined if i do window.friends_twitter_input = $("input[name=friends_twitter]"); it works a bit better but still not as intended.
I also wrote code to detect key change which works but only if it's placed inside of external.js
I may be going about this all wrong but I can't seem to get it staight. Anyhelp would be great.
Update
I'm getting the error "friends_twitter_input is not defined" in firebug but not sure why
inside custom.js
$(document).ready(function(){
var friends_twitter_input = $("input[name=friends_twitter]").val();
$(".twitter-share-button").click(function() {
var friends_twitter_input = $('input[name=friends_twitter]').val();
});
}
inside index.php
<script type="text/javascript">
window.document.write('');
</script>
I think i need to not write the share link until the input has a value or define the value as null.
Thanks for all the help.
Not quite sure about the structure of all your code but a few things that may help.
To get the value from the input button this is the code you need.
var friends_twitter_input = $("input[name=friends_twitter]").val();
Also make sure that the code that tries to read the value of the input text is executed after the input text is in place.
To execute your javascript after the page load use this:
$(document).ready(function() {
//All your javascript here.
});
To hook up to the oncahnge event of the input text do this (inside the ready handler)
$("input[name=friends_twitter]").onchange(function() {
var friends_twitter_input = $(this).val();
});
Please note that the code in the onchange event is just for demo purposes you should probably want to use onblur or better hook up in the onclick event of the submit button.