I've run into something interesting and I'm a bit stumped with this.
Basically I have a form:
<form>
<div class="formWrapper">
<span>Refine your search</span>
<input type="text">
<select>
<option>English</option>
<option>French</option>
<option>Dutch</option>
</select>
<button class="submitButton" type="submit" data-ajaxurl="http://localhost/_myFile.html" data-ajaxtarget="#myFile_search" >Search</button>
</div>
</form>
and some bootstrap pagination links:
<div class="bootstrap_pagination">
<ul>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li class="plain">
›
</li>
<li class="plain">
»
</li>
</ul>
</div>
Somewhere on the page I have a hidden field as well, storing the data-number of the pagination link I clicked on, the default value is 1: <input type="hidden" name="number" value="1">
And this is the function that takes care of the clicked pagination link:
function clicked_bootstrap_pagination(clickedLink, event){
event.preventDefault();
$this = $(clickedLink);
var pageNumberValue = $this.data("number");//get number
var $hiddenField = $("#drivers_initial form input[name='number']");//hidden field
$hiddenField.val(pageNumberValue);//update value of hidden field
$('form .formWrapper button.submitButton').click();//resubmits the form
}
When I click on a pagination link, the function runs it updates the data-number in the hidden input field and resubmit the form, pretty simple.
OK, so here is the problem: when the submit button is clicked on - my search button in the form - I also want to run another function, resetHiddenFieldNumber(),
but the problem is, as you've probably already gathered, that that function will also run when the pagination link is clicked on because of this line$('form .formWrapper button.submitButton').click();//resubmits the form, and I don't want that, I just want to be able to run resetHiddenFieldNumber() only when I click the submit button
I tried a couple of things, among those, an onclick attribute in the submit button:
<button class="submitButton" type="submit" data-ajaxurl="http://localhost/_myFile.html" data-ajaxtarget="#myFile_search" onclick="resetHiddenFieldNumber()">Search</button>
but, with this approach, as said and expected the function runs also when the the pagination link is clicked on because in clicked_bootstrap_pagination() I'm resubmitting the form.
I've hoped that I could somehow distinguish between the pagination link and the button after this line executed $('form .formWrapper button.submitButton').click();//resubmits the form but of course I can't.
The problem is the fact that, from what I understand, the line that resubmits the form effectively forces a click on the submit button even if you don't actually click on it.
I tried to use submit() but the whole page reloads and that's not desirable.
Does anybody have an idea how I could run a function only when I click on the submit button?
I hope it's all clear.
If you want just to pass some data to http://localhost/_myFile.html you don't always need to use from-submit way. You can just have on-click event for submitting the data to the server without any page reload.
<div class="formWrapper">
<span>Refine your search</span>
<input type="text">
<select id="language-selection">
<option>English</option>
<option>French</option>
<option>Dutch</option>
</select>
<button class="not-submit-button" id="send-request-button" type="button" data-ajaxtarget="#myFile_search" >Search</button>
</div>
and then do following event handler
//js code
$('#send-request-button').click(function(){
//on button click
var data = $('#language-selection').val();
//collect value of the select
//send request
$.get('http://localhost/_myFile.html', data, function(response){
//refresh you UI
})
})
Related
im trying to do submit with enter in the form tag, but its not working
here is my code
document.querySelector('#button').addEventListener('submit',(e)=>{
e.preventDefault()
console.log('it works')
})
<ul>
<li>
<div>
<form>
<input></input>
<button type="submit" id='button'></button>
</form>
</div>
</li>
</ul>
Submit events fire on form elements, not button elements.
You're listening for the event in the wrong place.
I have a dropdown value out of forms and a table wih many rows to submit data.
What I'd like to do is during submit of each row submit also the getting value from the drop down list.
My table it's look like My code for dropdrown list is
<div class="panel-heading">
<label for="cat">Select a Category</label>
<select class="form-control" id='category' name="category" data-live-search="true" style="max-width:40%;" >
<?=$html?>
</select>
</div>
And the part for table rows is
<form id="sync-cat" action="controllers/product-add.php" target="_blank">
<input type="hidden" name="product" value="<?=$product['id']?>">
<button type="submit" class="btn btn-info btn-md">Sync Products</button>
</form>
I've tried with javascript copying selected value in hidden input but that run only for the first row. Also I've tried a hidden input above the dropdown list copying the select option but I didn't find a way to get value when I use submit button "Sync Products"
They should share the same form in HTML so that when the form is posted all available information is present in the form. Regardless your dropdown should also be in it's own form (if you don't put them in the same form) to be valid.
If you wanted to continue as is ignoring the proper things to consider above you could do it with something like this. This solution will make things a bit more complicated. I would recommend taking the above advice.
var form = document.getElementById('sync-cat')
form.addEventListener('submit', function(e) {
var valueFromDropDown = document.getElementById('category').value;
// Post the rest of the form
});
Follow the rest of this guide to complete the JavaScript post
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>electronics</li>
<li>movies</li>
<li class="divider"></li>
<li>All</li>
</ul>
</div>
<form method="POST" name="form" action="#">
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" id="query" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
</div>
</div>
</div>
</div>
ISSUE
Everytime I press Go button; I redirect to same page; which I want however by drop down acts funky; like it doesn't replace the 'filter' button with appropriate choosen filter inside dropdown-menu when after the form gets submitted. Here's the code for that. However before I press go button it works as expected. What could be happening?
<script>
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
</script>
JS FIDDLE: https://jsfiddle.net/0e37tvyx/
There is nothing wrong in this. Your fiddle code works fine for all UI change operations. But because your form supports POST method, all your form parameters are submitted as POST request. You have three possible options (may be more than that too) to preserve the state of last chosen filters:
Use ajax request instead of form submit with entire page refresh. In this way you will have to add content from server response in your page; that is search results.
If your content is generating dynamically. I mean to say you are using PHP / JSP / ASP / Any Other Templating Library, you can use that, to update the HTML code based upon the search request, i.e. search_param request param.
The other way is use cookies. When user changes the option in front end preserve the filter option search_param in cookies. And on ready state of document; read those saved cookies if exists or fallback to default option all if not already stored in cookies.
Check out the fiddle for cookie based implementation. Not that I have added cookies plugin of jQuery.
https://jsfiddle.net/ksbora/3w6k171f/2
Note: Cookies has size limitations too and cross site origination restrictions. So, be careful which option you choose.
I am completely new to Meteor and I'm trying to build a simple app. I currently have a form with 4 radio options and a submit button. When users click the submit button and I want to know which radio option they selected. I have no idea how to get started though. Can anyone help me? Below is my html and javascript code, respectively:
<form class="form-horizontal well mystery-form">
<fieldset class="col-md-offset-1">
<h2>{{question}}</h2>
<br>
<div class="form-group">
<div class="col-md-10 mystery-form">
{{#each answers}}
<div class="radio">
<label>
<input type="radio" name="mysteryForm" checked=""
style="margin-bottom: 0; margin-top: 0;">
{{answer}}
</label>
</div>
{{/each}}
<br>
<button type="reset" class="btn btn-default">Back</button>
<!-- Hide this when the answer is correct -->
<button type="submit" class="btn btn-primary">Check Answer</button>
<!-- Show only if the answer is correct -->
<button class="btn btn-primary">Next</button>
</div>
</div>
</fieldset>
</form>
JS:
Template.mystery.events({
"submit .mystery-form": function(event) {
// no idea what to do here
}
});
Semantics
You'll probably want to remove the whole wrapping .radio element. It's unnecessary. Try using as few elements as possible. It performs better and makes debugging easier.
Retrieving the checked input
The event object passed to an event-map callback has a property target. In your case that is .mystery-form. So you can use a simple jQuery selector to find the checked element:
$('input[name="mysteryForm"]:checked', event.target)
This will get you the checked value with the name mysteryForm. This was quiet straight forward. The problem is retrieving the value. Doing that would get sort of messy. So I'd just pass it to the element as a data- attribute:
<input type="radio" name="mysteryForm" checked="" style="margin-bottom: 0; margin-top: 0;" data-answer="{{ answer }}" >
Now you can simply do this:
$('input[name="mysteryForm"]:checked', event.target).data('answer')
First, you may want to prevent the normal form submission and avoid a page reload. As you are building a single page application you will want to do the form submission logic by yourself. Also, reloading the page by form submission does not make any sense in such application.
Secondly, you have to actually gather the data, and then do what you want with these data.
Put it all together and you get something like this:
Template.mystery.events({
"submit .mystery-form": function(event, template) {
//1. prevent default behavior (form submission)
event.preventDefault();
//2. get your data
//either by name (HTML name attribute)
var inputValue = template.mysteryForm.value;
//or by id (HTML id attribute)
var inputValue = template.find('#myId').value;
//3. Do whatever you want (method call for example?)
Meteor.call('myMethod', inputValue, function(error, result) {
//wait for the call result...
});
}
});
I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.