I feel really silly for having to ask this head desk but I've got no idea why this code isn't working it really simple sigh
I'm getting the following JavaScript error when I select from either of the drop downs and the form doesn't submit.
Uncaught TypeError: Property 'submit' of object # is not a function
<form action="categories/view/52" method="post" accept-charset="utf-8" id="myform" name="myform">
<select name="sort" ID="sort_type" onchange='document.forms["myform"].submit();'>
<option value="label">Sort</option>
<option value="price-low-high">Price: Low - High</option>
<option value="price-high-low" selected="selected">Price: High - Low</option>
<option value="name-a-z">Name A - Z</option>
<option value="name-z-a">Name Z - A</option>
<option value="date-added-new">Date Added - New</option>
<option value="date-added-old">Date Added - Old</option>
</select>
<select name="limit" ID="sort_type" onchange='document.forms["myform"].submit();'>
<option value="items_3" selected="selected">3</option>
<option value="items_50">50</option>
<option value="items_100">100</option>
<option value="items_all">all</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
Since you have:
<input type="submit" name="submit" value="submit" />
The submit function has been clobbered with that HTMLElementNode.
The simple solution is to rename it, or remove the name.
<input type="submit" value="submit" />
If you can't rename it (because you have server side code that depends on that value being submitted and you can't change the server side code) then you can:
document.createElement('form').submit.call(document.forms["myform"]);
The reason for the error when trying to call form.submit() is that your submit button is called "submit". This means that the "submit" property of your Form object is now a reference to the submit button, overriding the "submit" method of the form's prototype.
Renaming the submit button would allow you to call the submit() method without error.
<input type="submit" name="submitEle" value="submit" />
Should work
Related
I currently have a drop down that has multiple values in it (i.e. 50, 100, 200, etc..) which when selected and a button clicked reloads the page and filters a data table to shows however many results were selected.
<form action="#" method="post" class="form-inline" name="normal" id="SearchResultsForm">
<select name="limitNumberOfResults" id="limitNumberOfResultsPerPage"
class="single">
<option value="10">10</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="submit" class="button" value="Show" name="submitbutton"/>
</form>
I'd like to convert this from a drop down over to a list of links. How would I go about doing this?
I was trying to use something like the following.
<a href="#" onclick="SearchResultsForm.submit();return false;">
10
</a>
<a href="#" onclick="SearchResultsForm.submit();return false;">
20
</a>
However, I'm not sure how to get the results per page value to be recognized.
Thank you!
If you click 10 go to same page with ?limitNumberOfResults=10 then get that value write your code to get result.
10
$per_page = $_REQUEST['limitNumberOfResults'];
Jakir Hossain's answer works (and doesn't require JavaScript) but may require reworking the links to include current state.
Another possibility is for you to use a hidden field and update it when the links are clicked; it does require JavaScript, but you don't have to know about any other parameters that are passed to the server.
<input type="hidden" name="limitNumberOfResults" value="20" />
10
20
var form = document.getElementById('SearchResultsForm');
// Using event delegation to register clicks on the links
form.addEventListener('click', function(e){
if (e.target.tagName === 'A' && e.target.classList.contains('set-result-count') ) {
e.preventDefault();
form.elements.limitNumberOfResults.value = e.target.getAttribute('data-result-count');
}
});
you can use <select onchange='this.form.submit();'></select> in select tag so that when options are changed form gets submitted and you get the results per page value
If you have a form consisting of a multi-select of say 50 options followed by a text-box, holding the ctrl key is the way we normal select multiples, but sometimes your 32 clicks in and well things happen... Now you've selected one or none. So, what I want to know is if it is possible to create a checkbox that when checked all clicks within a specific select field are treated as if ctrl is being held down when left click occurs.
<form action="" method="post">
<input type="checkbox" name="marker" value="1"> Click here to select multiple<br>
<select multiple style="width:50%" name="employees[]">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
|
|
|
v
50 more here
</select> <br>
Your message here:<br>
<textarea name="msg" style="width:50%"></textarea><br>
<input name="submit" type="submit" value="submit" />
</form>
With JQuery you can easily manipulate <select>, see .val() function. With it you can know what are selected and you can add what you want to the selection.
This is a possible script solution.
Based on this solution
$('option').mousedown(function(e) {
if ($('#marker').is(":checked")) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
}
});
I'm having issues using Image-picker http://rvera.github.io/image-picker/
Basically i have managed to display the images I want, but i would like to wrap it all in an html form calling another php script and providing that php script the value from the selected image
<form action="dosomething.php" method="get" >
<select id="selectImage" class="image-picker">
<option data-img-src="files/1.jpg" input type="text" name="img" value="1">1</option>
<option data-img-src="files/2.jpg" input type="text" name="img" value="2">2</option>
<option data-img-src="files/3.jpg" input type="text" name="img" value="3">3</option>
</select>
<input type="submit" value="Submit">
</form>
When i click on the form submit action, i get pointed to dosomething.php but my values are never passed through get
Could anyone give me some insight?
Thanks in advance
You need to name your select tag.
eg.
<select id="selectImage" class="image-picker" name="image">
then try to retrieve with $_GET['image'];
HTML5 validation not working On OnChange select box form Submit .
If i have use submit button validation work ,
but i need onChange form submit and html% validation
<form action="do.php" method="post">
<select id="myselect" name="myselect" onchange="this.form.submit()" required="">
<option value="">
select
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
<option value="4">
Four
</option>
</select> <select id="myselect2" name="myselect2" onchange="this.form.submit()" required="">
<option value="">
select
</option>
<option value="5">
five
</option>
<option value="6">
six
</option>
<option value="7">
seven
</option>
</select>
</form>
this was condition On change form submit with out validate other select box .
please help .
HTML5 validation applies only when the form is submitted using HTML constructs. If it is submitted with a script, no HTML5 validation takes place. Thus, you need to code your own validation in JavaScript.
Reference: HTML5 LC, 4.10.22.3 Form submission algorithm, where item 4 list the conditions for performing validation, including the requirement that the “submitted from submit() method flag” is not set.
You may use this 'hack' http://jsfiddle.net/MGhA7/.
You specify <select required="required"> so value can not be empty, and then add <option value="" selected disabled>empty</option> so default value is empty and can not be selected again.
EDIT: a little more explanation.
This way, form can not be submitted because "selected" value is actually "" (empty), which is not allowed by "required" attribute; and when user changes selection, the default value can not be selected again because of "disabled" attribute.
i am trying to submit values of form.
but all values other than a <select> field is not submitted because i think its inside div element as shown in code below
<form action="next.php" method="post">
<input>....
<input>....
<input>....
<select name="asdf"> <!--This field submitted successfully -->
<option value="wtevr"> </option>
<option value="wtevr2"> </option>..........
</select>
<div>
<select name="asdf2"> <!--problem is here submitting this field -->
<option value="wtevr11"> </option>
<option value="wtevr22"> </option>..........
</select>
</div>
</form>
I used div because this is part of my ajax code through which i update the values in select field.
Is there any alternative solution to submit this select field form?
MY approach:
I think that there is a solution if i use a hidden input field in this form whose value get equal to value of select field before submitted the form.
<input type="hidden" value="<!--comes from JavaScript code -->">
I am new to JavaScript so any help is appreciated..
You could use:
<select name="asdf2" id="asdf2" onchange="setField();">
<option value="this">this</option>
<option value="that">that</option>
</select>
<input type="hidden" id="hiddenField" value="nothingYet">
<script type="text/JavaScript" language="JavaScript">
function setField() {
toWhat = document.getElementById("asdf2").value
document.getElementById("hiddenField").value = toWhat;
}
</script>
In any case. If all you're doing is submitting the form, there really is no reason for that value to be ignored. How are you retrieving the values?
Use a 'name' tag in your inputs, then they'll be submitted.
like this:
<form action="next.php" method="post">
<input name="foo" value="var"/>
</form>
The <select> tag has a property called [form=""].
With that you can assign it to a form element.
As the form gets submitted, the select element is included.
<form name="myform">
<input type="text" name =...>
<select name="selectelement" form="myform">
<input type="submit">
</form>