I wanne add multiple users in jQuery. I have the following code but it doesnt work. Does someone knows why?
Thanks!
<script type="text/javascript">
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.html('Gebruiker: <input type="text" name="user[]"><br />');
$(newuser).appendTo('#users');
});
});
</script>
<section>
<span id="add">Nieuwe gebruiker</span><br /><br /><br />
<form action="" method="" id="users">
<input type="submit" name="send" value="verzenden">
</form>
Use simply string in your variable, no jQuery .html() function required. Then change your .appendTo() function to .append() and define the element in jQuery selector.
$( document ).ready(function() {
$('#add').click(function(){
var newuser = 'Gebruiker: <input type="text" name="user[]"><br />';
$('#users').append(newuser);
});
});
In case you are wondering why your current code is not working:
string starting with anything other than "<" is not considered HTML string in jQuery 1.9
http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring
Therefore this code will work fine (as it starts with <):
$( document ).ready(function() {
$('#add').click(function(){
$('<input type="text" name="user[]">').appendTo('#users');
});
});
And for your current code to work use $.parseHTML:
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.parseHTML('Gebruiker: <input type="text" name="user[]"><br />');
$(newuser).appendTo('#users');
});
});
$.parseHTML is used to parse the arbitrary HTML so that it is not taken as a selector by jQuery.
Edit: adding delete feature:
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.parseHTML('<div><label>Gebruiker:</label> <input type="text" name="user[]"><span class="delete">Verwijderen</span></div>');
$(newuser).appendTo('#users');
});
$(document).on('click','.delete', function(){
$(this).parent('div').remove();
console.log('reached');
});
});
jsFiddle Example: http://jsfiddle.net/RtTpN/
yep, there is nothing called $.html() in jQuery. html is a method of set of nodes instead.
You can do something like:
$(document).ready(function () {
$('#add').click(function () {
$('#users').append('Gebruiker: <input type="text" name="user[]"><br />');
});
});
Working Demo
Related
I am trying to create a form which when clicked makes an XMLHttpRequest and writes information on the page.
Here's the HTML code.
<form>
<input id="myStock" type="text"/>
<input id="iSubmit" type="submit" value="Show Me Data"/>
<input type="reset" value="Reset Me" />
</form>
<div id="demo"></div>
Here's the JS code:
var isubmit = document.getElementsByTagName("form")
[0].querySelector('input[type="submit"]');
isubmit.addEventListener("click", myFunction);
function myFunction() {
//some code here
}
var mystock = document.getElementsByTagName("form")
[0].querySelector('input[type="text"]').value.trim();
var urlext = mystock;
urlext +=
"&reportType=is&period=12&dataType=A&order=asc&columnYear=5&number=3";
var url = "https://financials.morningstar.com/ajax/ReportProcess4CSV.html?
t=";
alert(url + urlext);
xhttp.open("GET", url + urlext, true);
xhttp.send();
}
The problem is, when I am deleting the <form> tag on the HTML page and deleting the getElementsByTagName("form")[0] on the JS code, it's working fine.
However, with the form element intact, it's not returning any information.
Please help.
You can take a look at this JSfiddle I made. I dont know if it helps you out though.
$.POST( url+urltext, function( data ) {
$('#demo').html(data);
});
Your problem it's the input submit like #CBroe pointed out. You can prevent using the e.preventDefault();.
Or you can use do this:
$('#iSubmit1').on('click', function(){
var value = $("#myStock").val();
$( "#demo" ).append( '<p>'+value+'</p>' );
});
$('#reset1').on('click', function(){
$( "p" ).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="myStock" type="text"/>
<button id = "iSubmit1" type="button">Show Me Data!</button>
<button id = "reset1" type="button">Reset Me!</button>
</form>
<div id="demo"></div>
This is the code I am using which doesn't work. I want the value of "data-page" in the "button" to receive the value of the input field when the input field is blurred. The "data-page" is a number. Appreciate your assistance, thanks.
<input type="text" value="" id="findR" />
<button id="findRB" data-page="" >Find Record</button>
<script>
$(document).ready(function() {
$( '#findR' ).blur(function() {
$('#findRB[name=data-page]').val($('#findR').val());
})
});
</script>
data-page is a data-* attribute and not name attribute.
$( '#findR' ).blur(function() {
$('#findRB').data('page',this.value);
})
I would recommend using data(), but you won't see the actual attribute change as the value is stored in the DOM object. If you wish so, use attr()
$( '#findR' ).blur(function() {
$('#findRB').attr('data-page',this.value);
})
Also, use this.value instead of $( '#findR' ).val() to set the value.
Here is a working example:
$(document).ready(function() {
$( '#findR').blur(function() {
$('#findRB').attr('data-page', $('#findR').val());
});
});
JSFiddle: http://jsfiddle.net/jyq2bm4r/
To set data attribute in element, you can use
$('findRB').attr('data-page', $('#findR').val());
Hello can you please test this. This is working fine for me::
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="text" value="" id="findR" />
<button id="findRB" data-page="" >Find Record</button>
<script>
$(document).ready(function() {
$( '#findR' ).blur(function() {
var inputVal = $('#findR').val();
document.getElementById("findRB").setAttribute("data-page", inputVal);
})
});
</script>
</body>
</html>
I am trying to call ajax on DatePicker bootstrap changeDate event but after trying every possible way I am failed. Please help me. For testing I use console.log.
Script :
$( document ).ready(function() {
$('.date-picker').datepicker();
$('.date-picker').on('changeDate', function() {
var date = $('#date-picker').val();
console.log(123);
return false; // for testing...
});
});
HTML :
<p class="_50">
<label for="TitleID"><strong>Date </strong></label>
<input name="date-picker" id="date-picker" value="" class="date-picker"" type="text" class="required" readonly="readonly"/>
</p>
Be sure that the input has been loaded and then initialize the plugin.
Try on window.load:
$(window).load(function() {
$('.date-picker').datepicker().
.on('changeDate', function() {
// Your ajax call
});
});
Change "changeDate" to "change" simply:
<p>Date:
<input id="datepicker" type="text">
</p>
$("#datepicker").datepicker().on('change', function() {
alert("changed");
});
Demo Fiddle
I´m stuck. I can´t edit the html for the form, so i need to add parsley.js validation attributes after page load, but parsley doesn´t seem to run if i use it like this:
var myForm = "#theForm";
jQuery( document ).ready(function() {
if (jQuery(myForm).length) {
jQuery( '#user_email' ).attr( 'data-parsley-equalto', '#user_email_validate');
jQuery( myForm ).parsley();
}
});
Exchanging the validation line with the following works fine, so it seems to be a problem with the 'data-parsley-XXX' part:
jQuery( '#last_name' ).attr( 'minlength', 2);
What am i missing? Thanks a lot.
#user33958 is this what you're after?
<form id="theForm">
<input id="user_email" placeholder="Email" />
<input type="submit" />
</form>
<script>
jQuery( document ).ready(function() {
var myForm = jQuery("#theForm");
if (jQuery(myForm).length) {
myForm.parsley();
jQuery("#user_email").parsley().addConstraint('minlength',2);
}
});
</script>
See working codepen:
http://codepen.io/ds0001/pen/NPmWoZ?editors=101
I have a table with some images and check boxes. I tried to enable a submit button on changing the any checkbox in the table. My table is like following,
<form action="/slideShowPage" method="GET">
<table id="imgTable" class="table">
{{#images}}
<tr>
<td>Remove<label value={{imgURL}}>{{imgURL}}</label></td>
<td><img src={{imgURL}} style="width:100px;height:100px"></td>
<td><input id={{imgURL}} type="checkbox" name="image" value={{imgURL}}/><br></td>
</tr>
{{/images}}
</table>
<br>
{{#msg}}
<div class="alert alert-info">{{msg}}</div>
{{/msg}}
Add more
<input type="submit" value="Create Slide Show" class="btn btn-success pull-left" disabled/>
</form>
I tried to enable the button using the javascript below,
<script type="text/javascript">
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function () {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
I got this javascript from JSFiddle. But it' not working. Also I'm using NodeJS and my jquery version is jquery-2.0.3. Can anyone help me to fix this?
Thanks in Advance!
Set the element's disabled property to false
submitButt.disabled = false;
If you're using jQuery, the equivalent would be:
$("input[type='submit']").prop('disabled', false);
or
give id or class to input element like "inputDisabled".
$('.inputDisabled').removeAttr("disabled");
I found the solution for this.
<script type="text/javascript">
$( document ).ready(function() {
console.log("Cheeeee 1");
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.change(function() {
console.log("Cheeeee");
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
</script>
Because the page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Try this.
Bind to the change event instead of click event.
var checkboxes = $("input[type='checkbox']"),submitButt = $("input[type='submit']");
checkboxes.change(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});