Pass Info to form input when link is clicked - javascript

I have some html that looks as so:
<h3 class="basic left-top-border-radius">Basic<br /> 500<span>$25</span></h3>
<a class="signup colorbox" href="#text-signup-form">More Info</a>
When More Info is clicked a lightbox pops up with a simple info request form. Here is my problem. I would like when the link is clicked to have the text of the h3 header passed to a form input field that is hidden so I know which plan they clicked on for more info.
The input looks like so:
<input type="text" class="cat_textbox" id="CAT_Custom_440761" name="CAT_Custom_440761" maxlength="1024" />
How would I do this using jQuery? (I thought of using jQuery .text() method but I read that does not work with forms and I do not know how to pass the h3 text anyway.
NOTE There are multiple h3 elements on the page.

You can do the following with this code.
$('.signup').click(function(){
var planTitle = $('h3').text();
$('#CAT_Custom_440761').val(planTitle);
});
As you click on the button it will search for the h3 tag (would be better to attach an ID to the h3 tags) grab the text of that element and insert it into the value of the input field.
If you aren't able to attach an ID to the h3 tag you can search for the prev instance of h3 and take the text from that.
$('.signup').click(function(){
var planTitle = $(this).prev('h3').text();
$('#CAT_Custom_440761').val(planTitle);
});

You can try this:
$('a').click( function() {
var text = $(this).parent().find('h3').text();
$(this).parent().find('.cat_textbox').val(text);
})

perhaps you can use this code
<form action="test1.asp" id="testform">
<input type="hidden" id="test3" value="">
<input type="BUTTON" id="submit" onclick="modify_value()"/>
</form>
<script type="text/javascript">
function modify_value()
{
var hidden_field = document.getElementById('test3');
hidden_field.value = 'testvalue';
document.getElementById("testform").submit();
}
</script>

Related

Get value from div to textbox

Is there a way to get the value from a div element to textbox?
My script codes
$(document).ready(function() {
barcode.setHandler(function(barcode) {
$('#result').html(barcode);
});
barcode.init();
I show the result with the following code
<div id="result"></div>
I fail to get the div value into the textBox.
<input type="text" id="result">
To achieve expected result, use below option
Avoid using same id for multiple elements , instead of that use class or two different ids or use one as class and for other use as id
$(document).ready(function() {
console.log( $('#result').text())
$('.result').val( $('#result').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">1222</div>
<input type="text" class="result">
code sample - https://codepen.io/nagasai/pen/yjomXp
Ids need to be unique on a given page; your input and div both have the same id. To insert from the div to the input, first get the text inside the div, then apply that to the input using .val().
const foo = $('#foo').text();
$('#bar').val(foo);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
This is inside the div
</div>
<input type="text" id="bar"></input>

Why isn't jQuery append method working when passing parent class to add a child input?

I want to append a duplicate of an input box in a parent box. Here is my HTML structure:
<div class="reading-group input-group">
<input type="text" placeholder="Enter Reading link" id="link">
</div>
+ Add another link
And here is my jQuery code:
function addPlaceholder(parentClass){
var placeHolder = $(parentClass).children().eq(0);
$(parentClass).append(placeHolder);
console.log(placeHolder);
}
$('.add-reading-btn').click(function(){
addPlaceholder('.reading-group');
});
Here is the jsfiddle link: https://jsfiddle.net/abhishekraj007/kexe6gxn/
What am I doing wrong?
Your code is taking the existing <input> element and moving it from the <div> and back into the <div>, so it looks like nothing is happening. If you .clone() the element and then .append() it, a new element will be added.
Here is a working example:
function addPlaceholder(parentClass) {
var placeHolder = $(parentClass).children().eq(0).clone();
$(parentClass).append(placeHolder);
console.log(placeHolder);
}
$('.add-reading-btn').click(function() {
addPlaceholder('.reading-group');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reading-group input-group">
<input type="text" placeholder="Enter Reading link" id="link">
</div>
+ Add another link
If you want to add focus to your <input> element on load, you can do so by adding this line to the bottom of your code:
$('#link').focus();
If you want to add focus to the new element on creation, as well as give it an empty value rather than copying the prior element's value, add this line to the end of your addPlaceholder() function:
$(placeHolder).val("").focus();
you can just add the .clone() method of jquery to create a clone of the textbox like below . You were only referring to the same element not the cloned html before.
$(document).ready(function(){
function addPlaceholder(parentClass){
var placeHolder = $(parentClass).children().eq(0).clone();
$(parentClass).append(placeHolder);
//console.log(placeHolder);
}
$('.add-reading-btn').click(function(){
addPlaceholder('.reading-group');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reading-group input-group">
<input type="text" placeholder="Enter Reading link" id="link">
</div>
+ Add another link
Here is a working fiddle
https://jsfiddle.net/kexe6gxn/2/

Getting the last element of a form jquery

I am a beginner in programming and am stuck in a problem. I want to find the last child (element) of parent (form). Then I want to insert an input element after the last child but it should be inside the form not after the form (outside). The form might contain input elements as well as select elements. How to accomplish it? I have tried the following ways but they don't work unfortunately.
var lastRepeatingGroup = $('.form-to-be-submitted:last'); // this one gives me the whole form meaning if I add something it will added at the end of the form
var lastRepeatingGroup = $('.form-to-be-submitted input:last'); //this gives me the last input element
var lastRepeatingGroup = $('.form-to-be-submitted input select').last(); //this does nothing, I think its an error
$newSection = $('<input type="button" value="newbutton" name="mybutton"/>');
newSection.insertAfter(lastRepeatingGroup); // when I use this statement it adds after the form not inside the form
So you just need some guidance on CSS Selectors and Jquery methods.
First lets look at:
The form might contain input elements as well as select elements.
So in CSS to do an or you need to use a comma:
input,select
if you are looking for direct descendants you need to use a >
form > input, form > select
These are then wrapped in jquery:
$('form > input, form > select')
Which yields all items, so we use last() to grab the last element:
var $last = $('form > input, form > select').last();
(if you don't need the > just remove it).
This was pretty close:
var lastRepeatingGroup = $('.form-to-be-submitted input select').last();
but it's looking for a select element in a input element in that class. Just needs a little adjustment:
var lastRepeatingGroup = $('.form-to-be-submitted input, .form-to-be-submitted select')
.last();
If you want to insert the element at the end of a specific element, you don't need to find the last item. Just use jquery's append
Except:
Consider the following HTML:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Test</p>" );
Each inner element gets this new content:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
This should work:
$('.form-to-be-submitted').children().last()
.children() will select all the children in your form and .last() filters that further to only select the last child.
And to insert content after that element, just use .after() like:
$('.form-to-be-submitted').children().last().after('<input>')
Example:
$('.form-to-be-submitted').children().last().after('<input type="radio">')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-to-be-submitted">
<input type="text">
<input type="radio">
<input type="checkbox">
<select>
<option></option>
</select>
</form>
JQuery not needed. To insert a new element just before the end of the form, simply use .appendChild().
var frm = document.getElementById("theForm"); // Get reference to form
// Create a new element and configure it
var newElement = document.createElement("input");
newElement.id = "txtUser";
// Simply append it to the form.
frm.appendChild(newElement);
console.log(frm.elements[frm.elements.length-1]); // Get last element in form
<form id="theForm">
<input type="text">
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<button type="button">Click Me</button>
</form>

How to Input and Output Javascript?

Ok Guys I need help in this case and please help if you can :(
I have following div created with text-type input
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input"/>
</form>
</div>
</div>
I have also created above .footer .mainBody
<div class="mainBody">
<script src="Scripts/main.js">
var h = document.getElementById('input').value;
document.write(h);
</script>
</div>
And I have included Javascript in it
I want to work it this way: when I input text in input tag to appear in .mainBody div.
And also do I need button to submit input or it can be done with key press for Ex. "Enter"?
Guys onkeyup="writeThis()" isn't working it just reloads page :(
To execute some events on keyevents, you need to write the onkeyup or onkeydown or any other key function in the element. And in that attribute you can add the function's name which would respond to the event. I will write my function's name as writethis() which will write the value to the div.
You then need to use this:
<input type="text" id="input" onkeyup="writethis()" />
And the function would be:
function writethis() { // the function
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h; // the input
}
This way, you will get the input written on a keypress!
You can also try and use some keyevents such as:
if(event.keyCode == 13) { // enter key event
/* key code for enter is 13
* do what so ever you want */
}
Ok, try this as your JS script content in html head section:
function writeOnBody() {
var inputText = document.getElementById('input').value;
var mainBodyEl = document.getElementById('mainBody');
mainBodyEl.innerHTML = inputText;
}
your HTML code:
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
</form>
</div>
</div>
<div id='mainBody' class="mainBody"></div>
I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/JAF89/
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;
avoid using getElementsByClassName instead give you div a id and use getElementById..
rest is in my opinion the best solution..
and yes you can also you a button also all you have to do is call you function on onclick event like this
<button onclick="functionZ()">click me</button>
and define that functionZ in your java script
What we are doing here is..
Adding a button and a click event upon it..such that when that button will be clicked it will call a function for us..
Make sure to add your scripts in lasts part of your page as page loads from top to bottom so its good practice to add scripts just near to end of body

Get the value of an input field within multiple divs when clicking a submit button

How would I go about correctly writing this so that the var input is the value of the content input field within the .overlay div when the submit button is pressed? Keep in mind that there's several .overlay divs, so it needs to be that separate div.
I know how to make it work assuming only 1 div exists, but this isn't the case. My jQuery is as follows:
$('.button').click(function() {
var input = $(this).parents('.overlay')$(input[name=content]).val();
});
My HTML structure (assume this div is duplicated several times on the page):
<div class="overlay">
<input name="content" value="value">
<input type="submit" class="button" value="submit">
</div>
$('.button').click(function() {
var input = $(this).parent().find("input[name='content']").val();
});
should work.
Or, if you can rely on that exact structure:
$('.button').click(function() {
var input = $(this).prev().val();
});
like this
$('.button').click(function() {
var input_val = $(this).parent().find('input:first').val();
alert(input_val)
});
here is ia working demo

Categories

Resources