Develop Reference

How to change multiple same name input element in Wordpress post with jQuery?

I can change Wordpress input element with different name. As for example the following input element:
<input class="wpProQuiz_button" type="button" value="Start Quiz" name="startQuiz">
can be changed with the following jQuery code:
jQuery("input[name='startQuiz']").attr("value", "Start Mock Test");
Question:
How can I do the same for the following with same name input element in Wordpress?
<input type="button" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;">
<input type="button" name="next" value="Quiz-summary" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;">
I have use the following for the above two input element like :
jQuery("input[name='next']").attr("value", "Next");
jQuery("input[name='next']").attr("value", "Test-summary");
But it is not working. How can I do this?

use jQuery selectors:
jQuery("input[name='next']:first-child").val("zzzz");
jQuery("input[name='next']:nth-child(2)").val("qqqqq");
and take in mind "float:right" :)
more examples here: https://api.jquery.com/category/selectors/child-filter-selectors/

Styling submit buttons -- Rails app

I have been trying to put a font awesome or glyphicon (or even an image) inside a submit button. This quickly falls apart, and I need to implement another option. I have seen a few ways of doing this, but I don't know which is the "right" or better way.
The three contenders I've seen are:
divs
links
buttons
Which is the best way to get an image / icon inside a "submit" button?
Wouldn't all three need a JS component?

This is how bootstrap add glyphicon to button object:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Bootstrap button with glyphicon

The button option does not need JS. I have tested it and you can see a working example using Font Awesome here https://jsfiddle.net/mikhailjan/sf9s28et/5/ or just see the code below:
<form action="add_person.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" class="button">
<i class="fa fa-user-plus"></i> Add Person
</button>
</form>
Jonathan Anctil is correct, the button needs to have type="submit" for the form to work normally.

Bootstrap typeahead in a popover

I am trying to implement bootstrap's typeahead but I am trying to have the input bar appear on a popover when a button is click.
Pretty much have a typeahead functionality inside a popover.
<div id="popover-button-container">
<button id="popover-button" type="button" class="btn btn-default"
data-toggle="popover"
data-placement="left">${entries.size() - 4} more</button>
<div id="popover-content" class="hide">
<input class="typeahead" type="text" placeholder="Search by Artist Name" />
</div>
</div>
Adding the JS:
<script>
$("#popover-button").popover({
html:true,
content: function(){
return $('#popover-content').html();
}
})</script>
The typeahead doesnt seem to work in the popover however. If I remove the class=hide part, the unhidden input works but not the one in the popover.
Wondering if anyone has ran into this?
Any help would be great!

did you try this?
// Constructs the suggestion engine
// Typehead codes here
$('#myPopover').on('show.bs.popover', function () {
// Initialize your typehead script
typehead.initilize();
// Followed by your Typehead codes here...
})

Tooltip issue in angularjs

I want dynamic text tool tip for input box and i have used bootstrap 3.1.1 here with angularjs 1.2.16
but i am getting value as undefined through ng-model of input box.
HTML
<div class="input-group">
<input type="text" class="form-control input-sm" ng-model="searchColumnOfDatagridQuery1" placeholder="Search {{columnData[0].text.toLowerCase()}} here" tooltip="Search {{columnData[0].text.toLowerCase()}} here" tooltip-trigger="mouseenter" tooltip-placement="bottom" tooltip-append-to-body="true">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="button" ng-click="searchColumnOfDatagrid(searchColumnOfDatagridQuery1,1)"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
JSFiddle
I have update my code here
Can any one tell me why i am not getting ng-model value here and how to resolve this issue?
How to get ng-model value of text-box because on click of button i am getting undefined value?

$.parent.Whatevermodel property you have is the solution. Please check following plunkr, it is working for me.
http://plnkr.co/edit/cnm0pGYXBHda4I5hpYYi?p=preview
Upvote and accept it as answer if it helps:)

I've found workaround for this here
you can change value of your ng-model attribute from searchColumnOfDatagridQuery1 to: $parent.searchColumnOfDatagridQuery1 and it should works just fine.

Wrapped input in a button, respond on button click

What I am trying to achieve is consistent behavior. When we click the input field the color picker shows up. I would like the same behavior when I am clicking the button that wraps it.
<button class="btn btn-small my-btn">
Color <input type="color" value="#33aabb">
</button>
JSFiddle.

Just defer to the input's .click()
http://jsfiddle.net/J73dK/1/

This should work:
<button class="btn btn-small my-btn" onclick="this.querySelector('input').click()">
Color <input type="color" value="#33aabb">
</button>
http://jsfiddle.net/C2wj2/