Actually i want to create a page switcher, all i need for this is an input with type text where will be entered the number of the page, and i have the second input with type button and onclick value:
<input type="text" value="#number of the page#" />
<input type="button" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
I cant figure it out how to take this #number of the page# and put it in onclick dynamically using javascript... please smb help!
<input type="text" id="txtPageNumber" value="2" />
<input type="button" id="btn" value="click" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
$(document).ready(function(){
$("#btn").click(function(){
var $val = $("#txtPageNumber").val();
alert($val);
_go_page_('cf_pages_form_name1',$val);
});
});
});
Assuming number is the id of the text field.
You can get the value of the text field like this:
$('#number').val();
And pass that is the onclick event
You can use an ID on the page selector input to get the value.
function goToPage(pageNumber) {
// go to pageNumber
}
<input type="text" id="pageSelector" value="#number of the page#" />
<input type="button" onclick="goToPage($('#pageSelector').val())" />
You've tagged this with jQuery so I'm assuming you're using jQuery.
lets your input type is like this
then in jquery try something like this...
$('#pageNo').keyup(function(){
pageNo = $(this).val()
}
then pass this to your button onclick function
i will answer in "very easy to understand" without jquery:
you have to get the value of the first inputfield. this should your function do. but first the inputfield needs an id(f.g. 'number').
code in function:
var pagenumber = document.getElementById('number').value;
then you have to put the number into the url (document.href).
Related
I have a list of text-field + button that gets rendered dynamically. The user hits the button and I want to control the input field when a button is clicked.
I figure you could do something like:
<input id="1"><button onclick="doSomething(1)">Something</button>
<input id="2"><button onclick="doSomething(2)">Something</button>
<!--...-->
<input id="3"><button onclick="doSomething(3)">Something</button>
But wonder if there's a different and more sophisticated solution because the code I'm modifying passes an an anonymous function to onclick and I can't pass a unique ID like the method above.
This is very easy to achieve in vanilla Javascript (as most things). No jQuery overhead required here.
let buttons = [...document.getElementsByClassName('inputbutton')]
function doSomething(i) {
console.log(i);
}
for (const button of buttons) {
button.addEventListener('click', (e) => {
const i = e.target.previousSibling.id
doSomething(i);
})
}
<input id="1"><button class="inputbutton" type="button">Something</button>
<input id="2"><button class="inputbutton" type="button">Something</button>
<!--...-->
<input id="3"><button class="inputbutton" type="button">Something</button>
If you modify your dynamic HTML like the following and add this jQuery, you will be able to access the value of the previous input field.
var buttons = $(".inputs-and-buttons #button-after-input-field");
buttons.click(function() {
console.log($(this).prev("input").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputs-and-buttons">
<input id="1" value="1"><button id="button-after-input-field">Something</button>
<input id="2" value="2"><button id="button-after-input-field">Something</button>
<!--...-->
<input id="3" value="3"><button id="button-after-input-field">Something</button>
</div>
You can generate dynamic Id for both input field and button with index or row number or you can add custom attribute for row number as below.
You can generate dynamic related control with specific Id for textbox and button as well. e.g. txtFirstName_1, txtLastName_1, btnAdd_1. here textbox and button distinguished by its id and number after Underscore "_" .
$(function(){
// Register click on button
//here you can pass specific class name for button if all are have same functionality
$("button").click(function(e){
console.log(this);
var btnId=$(this).attr("id");
//console.log(btnId);
// Way 1
//Split btnId with "_" e.g btn_1 will splited with ["btn","1"]
var rowIndex=btnId.split("_")[1];
console.log(btnId.split("_"),rowIndex);
$("#txt_"+rowIndex).val("Upate value by btn"+rowIndex); // Or fetch value
// Way 2
// You can directly use custom attribute data-row and do your work
var rowIndex1=$(this).attr("data-row");//$(e).prop("data-row");
console.log(rowIndex1);
//$("#txt_"+rowIndex1).val("Upate value"); // Or fetch value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txt_1" data-row="1"><button id="btn_1" data-row="1">Something</button>
<input id="txt_2" data-row="2"><button id="btn_2" data-row="2">Something</button>
<input id="txt_3" data-row="3"> <button id="btn_3" data-row="3">Something</button>
here is my fiddle
I am looking at getting the values from an inpt form in html. for example I want to get the value that is entered in the Cat name: input form.
<div id="admin-form">
<form>
Cat name:<input id="admin-cat-name" type="text" name="cat-name" placeholder="10" value="10"><br>
Source: <input id="admin-source" type="text" name="source"><br>
Count: <input id="admin-count" type="text" name="count">
<button id="save-button" type="button">Save</button>
<button id="cancel-button" type="button">Cancel</button>
</form>
</div>
I am thinking along the lines of something like the below:
var form = $('form');
var form2 = $('form #admin-cat-name');
//alert(form)
console.log(form)
console.log(form2) // i think this is an array that has the value that I want?
but I just can't quite get the value from the input form. Can anyone advise how I do this? And if I am going about it the right way?
You are actually looking for .val(). Use the following code:
var form2 = $('form #admin-cat-name').val();
From the docs:
Get the current value of the first element in the set of matched elements or set the value of every matched element.
You can use this $("#admin-cat-name").val()
How can I get the value of the textbox?
<input class="num1" type="text" val=""><br>
<button class="show">Click</button>
this is my Js code:
var value = $('.num1').text();
$('.Click').click(function(){
$('<'p>').text(value);
});
when I clicked the "click" button I want to show in a paragraph the text that I'd input to the textbox.
Use .val() for form elements to retrieve or set its value. Also, care with typo when you set the paragraph text.
var value = $('.num1').val();
$('.show').on('click', function(){
$('p').text(value);
});
In your code there is an error: if you want to catch the click event you should use the class of the button. Another error in your code is about the single quotes you use to insert value into the <p>. And remember, is $('p'), not $('<p>').
The code should look like that:
$('.show').click(function(){
$('p').text(value);
});
You can use this code:
jQuery
$(function(){
$("form").on("submit", function(event){
event.preventDefault();
var text = $(".num1").val();
$("#outputText").text(text);
})
});
Your HTML should be something like that:
HTML
<form>
<input class="num1" type="text" val="">
<button class="show">Click</button>
</form>
<p id="outputText"></p>
Note that in this case is really important to stop the default event behavior using preventDefault().
If you are not using a form the previous code became something like that:
jQuery
$(function(){
$(".show").on("click", function(event){
var text = $(".num1").val();
$("#outputText").text(text);
})
});
HTML
<input class="num1" type="text" val="">
<button class="show">Click</button>
<p id="outputText">
</p>
The outputText div is a div I've created to show the text.
I've prepared jsfiddle1, jsfiddle2 you can use to see the code in action, I hope it helps ;-)
That would be
var value = $('.num1').val();
Use the val() operator on the input to get the value, and then you could use the following code:
Html:
<input class="num1" type="text">
<button class="show">Click</button>
<p class="output"></p>
Javascript:
$('button').click(function(){
$('.output').html($('.num1').val());
});
use .val() not .text()
$(".show").click(function(){
var value= $(".num1").val();
$(".para").text(value)
});
demo
$('.show').click(function () {
var value = $('.num1').val();
$('p').text(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="num1" type="text" val=""></input>
<button class="show">Click</button>
<p></p>
There are type mistakes
var value = $('.num1').val(); should be in click method.
Use val() instead of .text() to get the input value.
I want to get value of one textbox and put the same in another textbox.
my code is :
<input type="text" value="Keyword" id="one" />
<input type="text" value="Search" id="two" />
button
jquery:
var input = $("#one");
$('#btn').click(function(){
alert('dgdhjdgj');
var oneValue = $('#one').val();
alert("one value "+ oneValue);
var twoVal = $('#two').val($(input).attr('value'));
alert('two Val' + twoVal);
});
demo is here.
Issue : when I change the value of textbox #one, it does not change the value of #two.
thanks in advance.
$(input).attr('value') gets the value of the value attribute, which is the initial value, not the current value.
You had it right two lines earlier. Use val().
Try this
HTML
<input type="text" placeholder="Keyword" id="one" />
<input type="text" placeholder="Search" id="two" />
button
Script
$('#btn').click(function() {
var oneValue = $('#one').val();
$('#two').val(oneValue)
})
Fiddle
write textarea and check it. JSFIDDLE
$("#add").click(function(){
var thenVal = $("#textarea_first").val();
$("#textarea_second").val(thenVal);
});
if all that you want to change the text of second textbox, as soon as you change the text of first textbox, just use jQuery's change event.
just try this then:
$('#one').on("change",function(){
$('#two').val($(this).val());
});
I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much
$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors
You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.
Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>