I tried following code, but it doesn't notify when there's no data in the input box. When I directly add this content (without) appending it works. What am I doing wrong here
var output = "<form class=\"registration__form\">\n"+
"<ul class=\"form-fields\">\n"+
"<li>\n"+
"<input type=\"text\" name=\"msisdn\" id=\"field-msisdn\" placeholder=\"Enter your MSISDN\" autofocus required data-parsley-required-message=\"Please insert your MSISDN\">\n"+
"</li>\n"+
"<li>\n"+
"<input type=\"button\" class=\"btn btn--large btn--fill btn--full\" value=\"Reset PIN\" onclick=\"submitMSISDN($('#field-msisdn').val());\"/>\n"+
"</li>\n"+
"</ul>\n"+
"</form>";
$("#gadgetBody").empty();
$("#gadgetBody").append(output);
$("#gadgetBody").parsley();
You have to call parsley() on the form, not on whatever contains the form.
In your case: $("#gadgetBody form").parsley() should work.
Related
I'm trying to implement client-side input validation for a datatables-editor that I'm rewriting. The form is created dynamically and then added to a bootstrap-modal.
I have encountered a problem where adding <pattern> and/or required doesn't result in any added functionality at all. The form just accepts the input and submits, and I'm quite confused as to why that is.
EDIT:
I have added the relevant code to a plunkr
I have now added the full project. Specifically the issue is connected to the _openEditModal function and _openAddModal function, where i generate the forms dynamically and add the pattern='patternVariable'.
The pattern for this example (however it doesn't work no matter what pattern I use):
^[a-zA-Z0-9\.]+$
Creating the form:
var data = "";
data += "<form name='altEditor-form' role='form'>";
for(var j = 0; j < columnDefs.length; j++){
data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'>";
if(columnTypes[j].type.includes("text")){
data += "<input type='" + columnTypes[j].type + "' id='" + columnDefs[j].title + "' pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden' class='form-control form-control-sm' value='" + adata.data()[0][newaData[j].name] + "'>";
}
if(...){...}
data +="</div><div style='clear:both;'></div></div>";
}
data += "</form>";
As you can see I add the tags like so:
pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required ...
The modal:
$('#altEditor-modal').on('show.bs.modal', function() {
$('#altEditor-modal').find('.modal-title').html('Edit Record');
$('#altEditor-modal').find('.modal-body').html(data);
$('#altEditor-modal').find('.modal-footer').html("<button type='button' data-content='remove' class='btn btn-default' data-dismiss='modal'>Close</button>\
<input type='submit' data-content='remove' class='btn btn-primary' id='editRowBtn'>Save Changes</input>");
I made sure that the button has type='submit' as I've read that this is what triggers the pattern-check.
editRowBtn code:
$(document).on('click', '#editRowBtn', function(e)
{
e.preventDefault();
e.stopPropagation();
that._editRowData();
});
To make sure that my code is actually adding the attributes to the input i checked the console:
Any help or advice is greatly appreciated as I'm kinda stuck here.
It's a little hard to read your examples (a plunkr would be nice :) ), but from what I can see, you've put your submit button outside your form.
That won't work, since the button won't know what it's submitting.
Try putting the submit button inside the form.
Alternatively, try using the form attribute on the submit button, which should reference the form ID. I've never used this myself, but according to MDN, it's part of the HTML5 spec.
Form attribute description from MDN:
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute is not specified, this element must be a descendant of a element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
i'm trying to pass dynamically created id to getElementById but when i try to log it, it says undefined.
"<input type='text' class='span2' name='price' pattern='[0-9.]*' id='p'"+ field.id + "placeholder='Price' value='0' />"
console:
console.log(document.getElementById("p"+field.id).value);
console.log($("#p"+field.id).val());
both says undefined. what is wrong i'm doing?
The way you concatenated your html string is improper,
...id='p'"+ field.id..
So the above snippet will be evaluated to id='p'Something And while rendering that something came from field.id will be treated as an attribute.
So try to write it like,
"<input type='text' class='span2' name='price' pattern='[0-9.]*' id='p"+ field.id + "' placeholder='Price' value='0' />"
//------------------------------------------------------------------^----------------^
//changed the position of quotes.
I have the the following javascript variables.
goalDiv ="<div class=goal-parent id=goal-parent"+Id+">"+
"<div class=goal>"+
"<div class=top-layer>"+
"<div class=component>"+
"<select class=component-select>"+
"<option id=one><span id='source_name'></span></option>"+
"</select>"+
"</div>"+
"</div>"+
"</div>"+
"</div>";
Id = "some div value";
I am trying to show values inside these divs. I first show this goalDiv into a div and then try to update the values inside it, like following.
document.getElementById(Id).innerHTML = goalDiv;
document.getElementById('source_name').innerHTML = "some value";
The first innerHTML works but the second doesn't. What am i doing wrong?
You can't have span inside option.
If you want to change the dropdown options simply use:
document.getElementById('one').innerHTML = "some value";
I have a input field that gets it value from a db lets say the value is M,K,H,J,V or G depending on the value it needs to open the div with aaa,bbb,ccc,ddd,eee or fff as text.
The code that is displayed on the page is as followed i left out the retrieval part from the db that part is working (the input box shows M,K,H,J,V or G depending on the id.)
echo "<input type='text' name='periode' id='periode' data-related-item='" .$row['periode']. "' value='" .$row['periode']. "'>";
echo "<div class='hidden'><div id='M'>aaa</div></div>";
echo "<div class='hidden'><div id='K'>bbb</div></div>";
echo "<div class='hidden'><div id='H'>ccc</div></div>";
echo "<div class='hidden'><div id='J'>ddd</div></div>";
echo "<div class='hidden'><div id='V'>eee</div></div>";
echo "<div class='hidden'><div id='G'>fff</div></div>";
When i check the source code in developer mode it shows that the data-related-item part is correctly retrieved from the db:
<input type="text" name="periode" id="periode" data-related-item="M" value="M">
I want to use the following JS but i need to change it to work with textboxes.
<script type="text/javascript">
function evaluate1(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();
if(item.is(":checked")){
relatedItem.fadeIn();
}else{
relatedItem.fadeOut();
}
}
$('input[type="checkbox"]').click(evaluate1).each(evaluate1);
</script>
The simplest approach is offcourse changing:
$('input[type="checkbox"]').click(evaluate1).each(evaluate1);
into
$('input[type="textbox"]').click(evaluate1).each(evaluate1);
But what do i need to do with:
if(item.is(":checked")){
Thanks for any help in advance.
I tried the following but it aint working.
if(item.is("M||K||H||J||V||G")){
SOLUTION BY ROBERT ROZAS
The solution is in jsfiddle
http://jsfiddle.net/dXTtz/7/
I made this code based on the code you provide:
$(document).ready(function(){
$("#periode").keyup(function(){
var valor = $("#periode").val();
$(".hidden").each(function(){
var hijo = $(this).children().attr('id');
if(hijo == valor)
{
$(this).removeClass("hidden");
}
});
});
});
Working fiddle here: http://jsfiddle.net/robertrozas/dXTtz/2/
This way is working on page load: http://jsfiddle.net/robertrozas/dXTtz/4/
Page load and removing the extra hidden divs: http://jsfiddle.net/dXTtz/5/
I have this html form
echo "<form name='delete_article_form".$row['id']."' action='sources/public/article_processor.php' method='POST' >";
echo "<input name='processor_switcher' id='processor_switcher' type='hidden' value='delete_article'><input name='article_id' id='article_id' type='hidden' value='".$row['id']."'><a class='delete_button' href='#'>".$s_delete[$lid]."</a>";
echo "</form>";
Now here is jquery code
$('.delete_button').live('click',function(){
article_id = ???????
alert(article_id);
});
What should I do to get the value from input named "article_id"?
Problem is that I have several such forms on my page so I must use THIS statement.
input=$('input',this).val(); will not help cause there are 2 inputs.
Any Ideas?
Try
var article_id = $(this).closest('form').find('input[name="article_id"]').val();
If you want the 'second' input, then you can do this
var article_id = $(this).closest('form').find('input').eq(1).val();
Use eq(1) to get the second element from the matched set of elements.
article_id = $('input:eq(1)',$(this).closest('form')).val();
Since you have an id to the input fields you can also use. The ids of elements on the page should be unique.
input = $("#article_id").val();