Develop Reference

Button combination

I want to get input from the user in a type="number" text box.
the limitation is a number between 1994-1998.
I currently have two buttons. One "submit" button and a second ("button") button that goes to the next screen.
I want to make the 2 buttons one.
Which means that as soon as I click the "Move to Next page" button, the input is also checked.
And you can move to the next screen only with proper input.
would much rather do it only with HTML and less with JavaScript if possible.
If there is no option then it is also possible with JavaScript.
function check () {
console.log('Checked!');
}
<div>
between 1994 and 1998: <input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit">
Calculate the answers!
</div>
</div>
<div class="box" id="section6">
<h1>fin!</h1>
<div class="question-text">
<input style="padding: 20px;" type="button" class="btn" onclick="check();">check!!!
</div>
</div>

From what I understand you want to go to next page only if input is correct then check this out. I have created a form and placed your html inside it. Now the submit button will only work if check function return true.
function check(){
//return true, if correct
//return false, if incorrect
return true;
}
<form action='yourURLforNextPage' method="POST">
Between 1994 and 1998:
<input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit" onclick="return check();">
</form>

function check(){
let val = document.getElementById("section5input");
if((val.value!= "" && null) && (val.value> 1994 && val.value<1998) ){
//code to render to next screen
}
}

Confirmation Dialog is not showing

I have never worked in jquery before. This is my first time. I need it for some confirmation dialog. I have write this to test it first before applying in my project. I have written this code. I want dialog box only if specified radio button is selected.
Main Problem: Show Confirmation Dialog if Specified Option in radio button is selected.
Jquery code:
(function($){
$.fn.checkLeave = function() {
return this.each(function(){
if($("input[name='second']").is(':checked')) {
alert("Second Radio Button is CLicked");
$.confirm({
text: "Are you sure to submit the form",
title: "Confirmation required",
confirm: function(button) {
$("form").submit();
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-default",
cancelButtonClass: "btn-danger",
dialogClass: "modal-dialog modal-lg"
});
}
});
};
})( jQuery );
and HTML is:
<form action="dialogJquery.html" method="post">
<input type="text" name="username" placeholder="Username">
<input type="radio" id="first">
<input type="radio" name="second" checked="">
<input type="submit" value="Submit" id="submit" name="confirm"
onclick="$(this).checkLeave();"></button>
</form>
The above code shows the alert defined before dialog. but after that dialog is not shown. This is from where i am using Jquery Dialog Plugin. But through debugging when debugger reaches $.confirm and i click on step over then dialog is shown but when i resume script it again disappers.

The basic problem is that the form is being submitted because your code is doing nothing to stop it from being submitted. Accordingly, the dialog is being shown only for the duration of time it takes for the browser to submit the form and go to the specified page (dialogJquery.html).
Once someone who is a better programmer looks at this, they can likely come up with a better solution, but following is what I came up with that seems to work. I have added some IDs to elements and such--you should be able to follow that without further explanation. One thing I found is that if any of the elements has a name or ID of "submit" then the .submit() function will not work on the form.
In general, I handle the submit event for the form and preventDefault so that it doesn't submit. The confirm button sets submitConfirm to true and submits the form.
HTML
<form id="myForm" action="dialogJquery.html" method="post">
<input type="text" name="username" placeholder="Username">
<input type="radio" id="first">
<input type="radio" name="second" checked>
<input type="submit" value="Submit" id="btnSubmit" name="confirm">
</form>
Javascript
(function($) {
var submitConfirm = false;
$("#myForm").submit(function(event) {
if (!submitConfirm) {
event.preventDefault();
if ($("input[name='second']").is(':checked')) {
$.confirm({
text: "Are you sure to submit the form",
title: "Confirmation required",
confirm: function(button) {
submitConfirm = true;
$("#myForm").submit();
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-default",
cancelButtonClass: "btn-danger",
dialogClass: "modal-dialog modal-lg"
});
}
}
});
})(jQuery);

submit form loaded on the bootstrap popover

I have dynamically created rows, on each rows i have a add button when user click on the add button then dynamically created form will be loaded on the bootstrap propover.
FIDDLE DEMO
my problem is :
why this code is NOT getting call?
Basically i am Submitting this form From bootstrap popover ?
...............
...............
console.log($("#"+formidd));// NOTE: i have accurate form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
...............
...............
Any help will be highly appreciated.Please help me...
Form looks like this:(I want to validate It & submit it when user press ENTER)
My html data look like this:
<div id="project-div-id">
<ul style="padding: 0px 0 2px;margin-left: 0px;">
<li><span class="slilink"> tour </span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="160subproj" id="160subproj" style="display:none;">
<input type="text" value="1st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> personal</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj" style="display:none;">
<input type="text" value="2st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> business</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="162subproj" id="162subproj" style="display:none;">
<input type="text" value="3rd form">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
</div>
This is my FULL jquery code:
<script type="text/javascript">
$(document).ready(function() { var formidd='';
$('.add_btn').popover({
html: true,
title: function () {
formidd=$(this).parent().find('.projform_id').html();
return $(this).parent().find('.sub_proj_head').html();
},
content: function() {
return $(this).parent().find('.sub_proj_content').html();
}
});
$('.add_btn').click(function(e) {
console.log($("#"+formidd));//i have loaded form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
$('.add_btn').not(this).popover('hide');
e.stopPropagation();
});
$(document).click(function(e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.add_btn').popover('hide');
}
});
});
</script>

I think I see what you're trying to do. The enter button will not work by default unless you have an <input type='submit' /> somewhere in the form.
Some hackery you can try is to place a submit button right after your input, give it a classname like "invisible", and set that class to remove all borders, margins, padding, etc... Warning, setting display:none will not work because some browsers effectively remove the element.
For example: jsfiddle
EDIT: I only got tour to work in the fiddle, but the idea is the same. There has to be a submit input inside the form.

jQuery: trigger click or focus input field

I have a page with multiple divs that all look like the example below.
Each div contains a field, a hidden field and a button.
How can I achieve that by click on the button the (visible) input field gets triggered ?
I need to trigger either a click or focus as both fire the same function.
Each button in question has the class="triggerBtn" and the corresponding input field has the class="inputField".
Example div:
<div>
<input type="text" class="inputField" id="field1" name="field1" />
<input type="hidden" name="field1" />
<button type="button" class="btn btn-primary triggerBtn">Find</button>
</div>

I guess you want:
$(".triggerBtn").click(function () {
$(this).closest('div').find('.inputField').focus();
});

add
Onclick="function()" see here
if you need to trigger it manually using jquery you can to this by
$("#field1").trigger("click");
see also here

$(".triggerBtn").on("click",function(e){
$(this).closest("div").find(".inputField").click();
//or $(this).closest("div").find(".inputField").focus();
});

$(".triggerBtn").parent().children("input[type:text]").first().focus()

Updated Jsfiddle: http://jsfiddle.net/ZmL4y/3/
$(document).on("click",".triggerBtn", function() {
var inputField = $(this).closest('div').find('.inputField');
if($(inputField).is(":visible"))
{
$(inputField ).focus();
}
});

How can I make it automatically input particular keyword into text field when a user click a button?

I have a HTML form. I'd like to add a button, with which a particular keyword will be automatically input into certain input field(Just like Twitter's reply)
Then it also jump to certain link.
How can I implement that with jQuery or Javascript?
HTML(Form part)
<a name="comment_part"></a>
<form accept-charset="UTF-8" action="/users/John/comments" class="new_comment" data-remote="true" enctype="multipart/form-data" id="new_comment" method="post">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="vvwHbqyiDXv0Sv5NrbPP5kfdwhovbHkkOUm2/2uJdNs=" />
<input class="chat_input" id="body_input" name="comment[body]" type="text" />
<button type="submit" class="btn">Submit</button>
</form>
HTML(Button part)
keyword = "#John "
(here, I want to show a button. If a user click on it, `#John ` will be automatically input into the input field above `input class="chat_box" id="body_input"` then jump to a link `<a name="comment_part"></a>`)
How can I archive this with jQuery or Javascript?

Create a button and assign it a unique id attribute:
<button type="button" id="username" value="#{#keyword}">Populate the chat box</button>
Then, in jQuery, listen for a click on that button; when it's clicked, pass the value attribute and assign it to input.chat_input#body_input:
$(document).ready(function(e) {
$('button#username').click(function () {
e.preventDefault();
$(".chat_input#body_input").val($(this).attr('value'));
});
});
EDIT:
If instead you want the button click to jump to a name link, you can use Rails' button_to helper:
<%= button_to "Populate the chat box", "#name", :id => :username, :value => #keyword %>

Depending on where that keyword is coming from, just attach it to your button as a data attribute...
<button class='yourbutton' data-keyword="#john">YOUR BUTTON</button>
Then the Jquery, goes inside your document ready code...
$('.yourbutton').click(function(e){
e.preventDefault();
$('#body_input').val($(this).data('keyword'));
$('html, body').animate({scrollTop: $('a[name="comment_part"]').offset().top -100 }, 'slow');
});