I am using a jquery template to dynamically generate multiple elements on the same page. Each element looks like this
<div id ="DynamicValueAssignedHere">
<div class="something">Hello world</div>
<div class="formdiv">
<form name="inpForm">
<input type="text" name="FirstName" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
I would like to use Jquery to process the form on submit. I would also like to revert the form values to their previous values if something should go wrong. My question is
How can I get the value of input box using Jquery? For example, I can get the value of the div with class "something" by doing
var something = $(#DynamicValueAssignedHere).children(".something").html();
In a similar fashion, I want to be able to retrieve the value of the textbox. Right now, I tried
var text = $(#DynamicValueAssignedHere).children(".formdiv").findnext('input[name="FirstName"]').val();
but it doesn't seem to be working
You have to use value attribute to get its value
<input type="text" name="FirstName" value="First Name" />
try -
var text = $('#DynamicValueAssignedHere').find('input[name="FirstName"]').val();
It can be much simpler than what you are doing.
HTML:
<input id="myField" type="text" name="email"/>
JavaScript:
// getting the value
var email = $("#myField").val();
// setting the value
$("#myField").val( "new value here" );
An alternative approach, without searching for the field html:
var $form = $('#' + DynamicValueAssignedHere).find('form');
var formData = $form.serializeArray();
var myFieldName = 'FirstName';
var myFieldFilter = function (field) {
return field.name == myFieldName;
}
var value = formData.filter(myFieldFilter)[0].value;
$("form").submit(function(event) {
var firstfield_value = event.currentTarget[0].value;
var secondfield_value = event.currentTarget[1].value;
alert(firstfield_value);
alert(secondfield_value);
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" >
<input type="text" name="field1" value="value1">
<input type="text" name="field2" value="value2">
</form>
if you know the id of the inputs you only need to use this:
var value = $("#inputID").val();
var textValue = $("input[type=text]").val()
this will get all values of all text boxes. You can use methods like children, firstchild, etc to hone in. Like by form
$('form[name=form1] input[type=text]')
Easier to use IDs for targeting elements but if it's purely dynamic you can get all input values then loop through then with JS.
You can try these lines:
$("#DynamicValueAssignedHere .formdiv form").contents().find("input[name='FirstName']").prevObject[1].value
You can get any input field value by
$('input[fieldAttribute=value]').val()
here is an example
displayValue = () => {
// you can get the value by name attribute like this
console.log('value of firstname : ' + $('input[name=firstName]').val());
// if there is the id as lastname
console.log('value of lastname by id : ' + $('#lastName').val());
// get value of carType from placeholder
console.log('value of carType from placeholder ' + $('input[placeholder=carType]').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formdiv">
<form name="inpForm">
<input type="text" name="firstName" placeholder='first name'/>
<input type="text" name="lastName" id='lastName' placeholder='last name'/>
<input type="text" placeholder="carType" />
<input type="button" value="display value" onclick='displayValue()'/>
</form>
</div>
Related
What I am trying to accomplish: When a user inputs dates, number of adults ect it would dynamically add the info via javascript to the URL within the url variables. This is what I have so far: ( I am a Noob but trying to make it work )
<script type="text/javascript">
$(function () {
$('#submit').click(function() {
$('#button').click(function(e) {
var checkInDate = document.getElementById('checkInDate').value;
var checkInMonthYear = document.getElementById('checkInMonthYear').value;
var checkOutDate = document.getElementById('checkOutDate').value;
var checkOutMonthYear = document.getElementById('checkOutMonthYear').value;
var numberOfAdults = document.getElementById('numberOfAdults').value;
var rateCode = document.getElementById('rateCode').value
window.location.replace("http://www.Link.com/redirect?path=hd&brandCode=cv&localeCode=en®ionCode=1&hotelCode=DISCV&checkInDate=27&checkInMonthYear=002016&checkOutDate=28&checkOutMonthYear=002016&numberOfAdults=2&rateCode=11223");
window.location = url;
});
});
Ok, so first things first: You probably don't need to do this at all. If you create a form and add a name attribute to each input, then the submission automatically creates the URL for you. Fixed value fields can be set to type="hidden".
For this to work you need to use the "GET" method.
<form action="http://www.Link.com/redirect" method="GET">
<input type="hidden" name="path" value="hd"><br>
<input type="hidden" name="brandCode" value="cv"><br>
<input type="hidden" name="localeCode" value="en"><br>
<input type="hidden" name="regionCode" value="1"><br>
<input type="hidden" name="hotelCode" value="DISCV"><br>
<input type="text" name="checkInDate"><br>
<input type="text" name="checkInMonthYear"><br>
<input type="text" name="checkOutDate"><br>
<input type="text" name="checkOutMonthYear"><br>
<input type="text" name="numberOfAdults"><br>
<input type="text" name="rateCode"><br>
<input type="submit">
</form>
Clicking "Submit" changes the URL to the desired one.
If this does not suit your needs, you can replace parameters in the URL by following the advice in this SO answer: Answer Link
This is much better than trying to re-implement URL manipulation on your own.
I am a newbie to javascript, I am making a simple script which will show appended link with the data entered in input field, Basically it should get the data from input field and generate link with data being submitted in input field.
Similar to the example below
Input: tony#mail.com ...> after clicking Send button
processing....
Output link: www.domain.com/route.php?email=tony#mail.com
I found this code similar to mine but it wont works like i am looking for.
<p>Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
<a href="#"
onclick="this.href = ('http://' + document.getElementById('foosite').value + 'www.domain.com/route.php?email=')"
target="_blank">send</a>
Is that possible in javascript to make a script like this which will generate output without reloading the page?
You have the getelement in the wrong place. It should be like this if you want to do it that way.
<input type="text" name="foo" id="foosite1" value="" />
send
<input type="text" name="foo" id="foosite2" value="" />
send
http://jsfiddle.net/bowenac/J2Mc5/3/
Split your JS logic from your HTML
HTML
<p>Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
</p>
send
<div id="url_value"></div>
JS
var a = document.getElementById('link')
a.onclick = function(e){
e.preventDefault();
var value = document.getElementById('foosite').value;
var route = "http://www.domain.com/route.php?email=" + value + ', ';
var data = "http://www.domain.com/data.php?email=" + value + ', ';
var form = "http://www.domain.com/form.php?email=" + value;
document.getElementById('url_value').innerHTML = route + data + form
}
DEMO
You can add form to your html code and send data to server using form submit, in this case you can change the action of the form before submit to custom link.
<form name="form1" action="" onSubmit="onsubmit(this)">
<p>
Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
<input type="submit" value="send" />
</p>
</form>
<script>
function onsubmit(form)
{
//change the action of the form to your link.
form.submit();
}
</script>
I have a simple form, with one issue.
In explorer, if nothing is inserted, the placeholder is passed as input of the field.
Here is JSbin: http://jsbin.com/EvohEkO/1/
I would like to make a simple comparision, when form is submitted, to check if the value of the field is equal to "First name", and if yes make the value empty ""
Just this i need.
Someone can help me please?
<form onsubmit="return checkform()">
<input name="test" placeholder="placeholdertext" id="test" />
<input type="submit" value="submitbutton"/>
</form>
in js
you should import jquery latest version this is the link: http://code.jquery.com/jquery-1.10.2.min.js
function checkform(){
var fieldvalue = $.trim($('#test').val());
if(!fieldvalue || fieldvalue=="placeholdertext"){
alert('there is no input');
return false;
}else{
alert('enjoy your form!');
return true;
}
}
This is somewhat easier..
$(document).ready(function(){
$("#form").submit(function(){
$('#form input:text, textarea').each(function() {
if($(this).val()==$(this).attr('placeholder'))
$(this).val(" ");
});
});
});
Just put your field value in hidden type input like this :-
<input id="hdnfield" name="hdnfield" value="<Your Field Value>" />
To check the value of a form field use the val() function on the input element
var input_value = jQuery('Input Element Selector').val();
As I looked to your form, the elements do not have any id attribute, I recommend that you add one to each of them, also change the submit input to button the you have more control on the javascript. so your form will look like :
<form id="form" action="form.php" method="post">
<input id="fname" type="text" placeholder="First name" name="fname"><br>
<label for="fname" id="fnamelabel"></label>
<input id="lname"type="text" placeholder="Last name" name="lname"><br>
<textarea id="message" placeholder="Contact us!" cols="30" rows="5" name="message"></textarea><br>
<br>
<input type="button" value="Submit">
</form>
so your jQuery will look like:
jQuery(document).ready(function(){
jQuery('input[type="button"]').click(function(){
var fname = jQuery('#fname').val();
var lname = jQuery('#lname').val();
var message = jQuery('#message').val();
...... Do whatever you need & then change the input values
...... if all validation has passed the use jQuery('#form').submit(); to submit the form otherwise reset the form:
jQuery('#fname').val("");
jQuery('#lname').val("");
jQuery('#message').val("");
});
});
here is a working version:
jsfiddle working link
You can do it like the following!
<form>
<input type="text" id="first_name" name="first_name"/>
<input type="submit" id="submit" value="submit"/>
</form>
<script type="type/javascript"/>
jQuery.noConflict();
(function ($) {
$(function () {
$("#submit").click(function () {
if ($("#first_name").val() == "first name") {
$(this).val("");
}
});
});
})(jQuery);
</script>
I have the following code:
<form>
<input type="text" id="field1" name="field1" value="first value" />
<input type="text" id="field2" onkeyup="showRSS(this.value, this.alt)" value="" alt="test">
</form>
Within the showRSS() onkeyup function I need to call the value from the first input field (id="field1"). How can I do that?
Use its ID with document.getElementById():
So if you want to pass it as the third argument to showRSS():
<input type="text" id="field2" onkeyup="showRSS(this.value, this.alt, document.getElementById('field1').value)" value="" alt="test">
Or if you want to get it from within showRss():
function showRSS( ... )
{
var field1 = document.getElementById('field1').value;
}
If you want to get the values of specific text boxes you can just iterate them in the function and grab the value of those you want based on their name. First, add a name to the second textbox as well then have such code:
function showRSS() {
var oForm = document.forms[0]; //assuming only one form
var desiredInputNames = { "field1": "", "field2": "" }; //names of elements to read
for (var i = 0; i < oForm.elements.length; i++) {
var element = oForm.elements[i];
if (desiredInputNames[element.name]) {
var value = element.value;
//handle the current value
}
}
}
(Using associative array rather than plain array for better searching)
use the below code to do that...
<form>
<input type="text" id="field1" name="field1" value="first value" />
<input type="text" id="field2" onkeyup="showRSS(this.value, this.alt, this.parentNode.getElementsByName('field1')[0].value)" value="" alt="test">
</form>
if you use field1 as name outside the form tag, it won't create any problem...
I have a webpage with jquery generating dynamic html input boxes.
Something like this appears on the page.
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
These text-boxes all use the same autocompleter, is it possible in jQuery to point my autocompleter at all of these?
First of all id should be unique in the whole document so your code is not correct.
What you probably mean is
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
To enable autocomplete on those boxes just use the selector that will match them all
var data = "foo bar baz";
$('input[name^=numbers]').autocomplete(data);
You could add a div that wraps input and that is never changed, then upon creation of new input store its id in jquery internal cache, just like this:
var $input = '<input name=somename[] type="text"/>';
$('#mywrap').append($input);
$input.data('id', 'some id');
Then on you can access autocompleter in the following way:
$('#mywrap input').live('click', function() {
var id = $(this).data('id');
// and now do anything with the new id you have!
});