Develop Reference

Issues with resubmitting a form using click()

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
})
})

How to get what radio button was clicked in Meteor

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...
});
}
});

Setting Default Value in Bootstrap Drop Down

I am building an app with Bootstrap. In this app, I have a control that converts a value between imperial and metric values. To accomplish this, I currently have the following:
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Pounds</li>
<li>Kilograms</li>
</ul>
</div>
<input id="theValue" type="hidden" data-start-type="kg" />
</div>
When the control theValue element is populated from the server, it will either be "lb" or "kg". I want to make it so that the selected menu option is based on the value of theValue when the page initially loads. In other words, I do not want to see the text "Action". Instead, I need to select either Pounds or Kilograms when the view loads.
How do I do this from jQuery?

Using jQuery, you would select the theValue element, access its data-start-type attribute, find the a element with the same data-type attribute, and then use its text value to set the text of the button. You'll want a unique way to identify the button for selection in jQuery, so give it an id; I used "actionButton".
$(document).ready(function(){
var data_start_type = $('#theValue').attr('data-start-type');
var $data_type_elem = $('[data-type='+data_start_type+']');
$('#actionButton').text($data_type_elem.text());
});
Here's a jsFiddle: http://jsfiddle.net/7g9k2dwx/

Adding more input fields on click inside a bootstrap input-append

im using twitter bootstrap.I need a
1.select-box + input field with autocomplete.
2.Add row button which adds an input field
3.remove row button
4.save button which submits all the values selected.
<div class="well-large">
<div class="row">
<button type="button" class="btn btn-default">Save</button></br>
<div class="input-append btn-group">
<input class="span2" id="appendedInputButton" size="16" type="text">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<?php foreach($cars as $ar){?>
<li><i class="icon-pencil"></i><?php echo $ar;?></li>
<?php }?>
</ul>
</div>
</div>
</div>
var cars = <?php echo json_encode($cars) ?>;
$("#appendedInputButton").autocomplete({
source: cars,
fillin:true
});
I had tried many ways but either one of these is not working.Can someone suggest me a way to solve this .Mainly on add row .

For One >> Does the autocomplete need to pull data dynamically, like typing into google URI bar auto searches google, or just isolate fields based on typed criteria. i.e. you type "a" and it displays only annie, annabelle, amy, then you type "n" making your field "an" and no longer displaying amy
For Two >> check these jquery methods [http://api.jquery.com/category/manipulation/dom-insertion-inside/] and pick the one that best suits you. The bind it to a button and have the jqueryStuff() function add the DOM stuff you want
<button onClick="jqueryStuff()">Add Row</button>
For Three >> Use the same thing as 2 but from [http://api.jquery.com/category/manipulation/dom-removal/]. Do you want to have check boxes then remove, or the easier way and just remove the last on the list.
<button onClick="jqueryStuff()">Remove Row</button>

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)

The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>

I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.