I want to hide a field and show it and also change the value of a variable depending on a checkbox value using jquery.
$(document).ready(function(){
$('#CompanyName').hide();
$('#inlineCheckbox1').click(function() {
var $this = $(this);
// $this will contain a reference to the checkbox
if ($this.is(':checked')) {
$('#CompanyName').show();
$("label[for='AdresseName']").text('Adresse Name');
} else {
$('#CompanyName').hide();
$("label[for='AdresseName']").text('Name');
}
});
});
it shows and hides the textfield fine, but the label text change does not work for me... it's like if the label change line of code is not being executed. What's going on? My HTML is this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="isCompany" class="col-sm-2 control-label">It's a company</label>
<div class="col-sm-10">
<input type="checkbox" id="inlineCheckbox1" value="option1">
</div>
</div>
<div class="form-group" id="CompanyName">
<label for="companyName" class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="companyName" placeholder="Company">
</div>
</div>
<div class="form-group">
<label for="AdresseName" class="col-sm-2 control-label" id="AdresseNameNotCompnay">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="AdresseName" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Save</button>
</div>
</div>
</form>
Related
I'm using the Tag Manager plugin to create tags for my form and passing values to php using the serialize() function in jquery. When I retrieve the value I get an empty string but without the serialize() function, the tag creator works fine.
<input type="text" name="tags" placeholder="Tags" class="tm-input form-control tm-input-info" id="collaborationsSoughtInput" name="collaborationsSoughtInput" />
And this is my jquery function
function adduser() {
$.post("functions/add-user.php", $("#registerForm").serialize()).done(function(data) {
var result = $.trim(data);
if (result == "OK") {
window.location.href = "login";
} else {
console.log("Register error :" + result);
}
});
}
And the php code
$collaborationsSoughtInput = $con->real_escape_string($_POST['hidden-tags']);
And here is the working example
Here if the complete form
<form action="" id="registerForm" class="mb-4" style="margin-bottom: 50px" method="post" enctype="multipart/form-data">
<div class="form-group has-feedback row">
<label for="fullnameInput" class="col-sm-3 col-form-label" required>Full Name *</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="fullname" name="fullname" required>
</div>
<span id="fullNameError" class="color-red hide-me">Full Name Error</span>
</div>
<div class="form-group has-feedback row">
<label for="usernameInput" class="col-sm-3 col-form-label">Username *</label>
<div class="col-sm-8">
<input minlength="4" type="text" class="form-control" id="username" name="username">
</div>
<span id="usernameError" class="color-red hide-me">Userame Error</span>
</div>
<div class="form-group has-feedback row">
<label for="passwordInput" class="col-sm-3 col-form-label" required>Password *</label>
<div class="col-sm-8">
<input class="form-control" type="password" value="hunter2" id="password" name="password">
</div>
<span id="passwordError" class="color-red hide-me">Password Error</span>
</div>
<div class="form-group has-feedback row">
<label class="col-sm-3 col-form-label" for="collaborationsSoughtInput">Collaborations Sought *</label><br/>
<div class="col-sm-8">
<input type="text" name="tags" placeholder="Tags" class="tm-input form-control tm-input-info" id="collaborationsSoughtInput" name="collaborationsSoughtInput" />
</div>
<span id="collaborationsError" class="color-red hide-me">Collaborations Error</span>
</div>
</form>
And in the console, I get this
<b>Notice</b>: Undefined index: hidden-tags in ...
Your whole output of .serialize() is empty? Seems like your form selector could be wrong then.
Please check below js fiddle:
https://jsfiddle.net/Lfz567tw/
I have created a form in which when I enter, it selects next input and at last, submits the form.
But this function disables my validation function and on submitting the form, function validate() is not working.
Is there any way I can fire function validate() also when submitting the form?
There is simple example to show you how you can check or call your validate function before form submittion
e.preventDefault : Used for prevent default functionallity
$(function() {
$("#entertonext").submit(function(e) {
e.preventDefault();
// validate code (calling function)
validate();
});
});
function validate() {
alert('Validating');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="card-block" id="entertonext">
<form name="bank" action="#" method="post">
<div class="form-group row" >
<label for="default-input" class="col-sm-2 form-control-label">Account No.</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="acc_no" id="acc_no" placeholder="Account No." tabindex="1" onblur="validate(this,event)">
<span id="msg8"></span>
</div>
</div>
<div class="form-group row">
<label for="default-input-rounded" class="col-sm-2 form-control-label">Branch Name</label>
<div class="col-sm-10">
<div class="input-group icon icon-lg icon-color-primary">
<input type="text" class="form-control entertonext" name="b_name" id="b_name" placeholder="Branch Name" tabindex="2">
</div>
<span id="msg2"></span>
</div>
</div>
<div class="form-group row" id="drawn" >
<label for="default-input" class="col-sm-2 form-control-label">IFSC Code</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="ifsc_code" id="ifsc_code" placeholder="IFSC Code" tabindex="3">
<span id="msg5"></span>
</div>
</div>
<div class="form-group row" id="deposited">
<label for="default-input" class="col-sm-2 form-control-label">Address</label>
<div class="col-sm-10">
<textarea class="form-control entertonext" name="address" id="address" placeholder="Address" tabindex="4"></textarea>
<span id="msg6"></span>
</div>
</div>
<div class="form-group row" id="deposited">
<label for="default-input" class="col-sm-2 form-control-label">Bank Balance</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="balance" id="balance" placeholder="Bank Balance" tabindex="5">
<span id="msg6"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary entertonext" tabindex="6">Submit</button>
</div>
</div>
</form>
</div>
I don't know much about JS, I'm new in this world, I know about HTML and CSS but this time I was asked to make an aplication where I have to receive data from a plain text to my formulary using JS.
Here's my Plain Text data.txt:
Interfaces: test1,
IP: 192.168.1.1,
Mask : test,
Gateway : test,
DNS 1: test,
DNS 2: test,
Broadcast: test
Here's my Div:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
That's the script I got from you guys, because I was looking for code to do it and that's what I got.
The point is the data that contains "data.tx" should be on my formulary and if I modify any field there and I hit "save" button it has to write on my plain text as well.
Is there a way to make it work? thanks!
Entire code bellow.
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', '/data.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
</div>
I don't know i a more efficient solution exists, but below code is working.
Here is how I achieved it, using jQuery .load()
$(document).ready(function(){
// Load the file in an hidden div element.
$("#hiddenFileLoad").load("data.txt", function(){
// Callback executes when content is loaded
// Place the content in a var
var loadedText = $("#hiddenFileLoad").text();
console.log("loadedText:\n\n"+loadedText);
// Split into an array
var loadedTextSplitted = loadedText.split(",");
// Remove the label part for each
for (i=0;i<loadedTextSplitted.length;i++){
temp = loadedTextSplitted[i].split(": ");
loadedTextSplitted[i] = temp[1];
}
// Place each info in the HTML form
$(".form-panel").find("input").each(function(index){
$(this).val( loadedTextSplitted[index] );
});
}); // End of .load callback
});
I used and hidden div, in order to load the .txt file content, which I gave the "hiddenFileLoad" id.
I made absolutely no change to your HTML (except the hidden div add) and I used your txt file content.
I assume you know how to save to file...
I didn't make the save button to work.
Here is a live example on my server.
I need to show and hide some form elements according to a checkbox selection.
This is my HTML:
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
</div>
Here I want to display #address2 DIV if address_check check box checked and other wise it should be hide.
This how I tried it.
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
});
My problem is I want to reset the form elements inside address2 div when this is toggling down. Reset mean I want to make empty these elements.
Can anybody tell me how to do it?
Thank you.
Try doing:
$('#address2').find("input").val("");
$("#address2").find('select option:first').prop('selected',true);
Working fiddle
Try this:
var address2 = $('#address2');
$('input[name="address_check"]').bind('change',function(){
var isChecked = $(this).is(':checked');
isChecked ? address2.fadeIn() : address2.fadeOut();
if(!isChecked)
{
address2.find('input, textarea').val('');
address2.find('select').prop('selectedIndex',0);
}
});
The easiest way to do this is using:
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
});
});
</script>
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">select Name:</label>
<div class="col-xs-12 col-sm-9">
<select name="name" class="col-xs-12 col-sm-4" >
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>
Try this
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$('#address2').find("input").val("");
});
I'm struggling to get a cancel button work on a meteor form. There is some interaction between the button and the reactivity on the form that is causing exceptions.
I have a form with two buttons, some inputs and some check boxes. The check boxes trigger some more input fields to be shown/hidden (which is working fine).
The cancel button, if pressed before any check box is used works fine. Once a check box has been activated however the app blows up with an exception as soon as a checkbox is checked (but after the extra input fields have displayed).
> Exception from Deps recompute:
> Patcher._copyAttributes#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1797
> Patcher.prototype.match#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1552
> patch/<#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1364
> patch/visitNodes#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1320
> patch/visitNodes#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1321
> patch/visitNodes#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1321
> patch/visitNodes#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1321
> patch/visitNodes#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1321
> patch#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1334
> Spark.renderToRange/</<#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:699
> LiveRange.prototype.operate#http://localhost:3000/packages/liverange.js?b3097d72d458e645fd4f0021c8ff5189abe8d98a:491
> Spark.renderToRange/<#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:693
> withEventGuard#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:162
> Spark.renderToRange#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:692
> Spark.isolate/<#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:925
> ._compute#http://localhost:3000/packages/deps.js?eba25ec453bb70e5ae5c2c54192d21e0e4d82780:183
> ._recompute#http://localhost:3000/packages/deps.js?eba25ec453bb70e5ae5c2c54192d21e0e4d82780:196
> .flush#http://localhost:3000/packages/deps.js?eba25ec453bb70e5ae5c2c54192d21e0e4d82780:288
All the digging I've done seems to indicate a problem with the HTML but I can't find it. I've eliminated all of the code in the form and replaced it to narrow down the problem to the cancel button.
The form code is
<template name="joinLayout">
<section class="content" >
<div class="modal fade in show" role="dialog" tabindex="-1" aria-hidden="true">
{{> joinLayoutInner}}
</div>
</section>
</template>
<template name="joinLayoutInner">
<div class="modal-header">
<h1>Thankyou for Joining Tradebase.</h1>
<h3>Please fill in the information below.</h3>
</div>
<form id="joinForm" action="action" class="col-sm-10 form-horizontal" role="form">
<div class="modal-body">
<div class="form-group">
<label for="joinEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="joinEmail" placeholder = "Required">
</div>
</div>
<div class="form-group">
<label for="joinPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="joinPassword" placeholder = "Required">
</div>
</div>
<div class="form-group">
<label for="joinPhone" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="joinPhone" placeholder = "Required">
</div>
</div>
<div class="form-group">
<label for="joinSuburb" class="col-sm-2 control-label">Suburb</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="joinSuburb" placeholder = "Required">
</div>
</div>
<div class="form-group">
<label for="joinState" class="col-sm-2 control-label">State</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="joinState" placeholder = "Required">
</div>
</div>
<div class="form-group">
<label for="joinPostCode" class="col-sm-2 control-label">Post Code</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="joinPostCode" placeholder = "Required">
</div>
</div>
{{#if joinTradie}}
<div class="form-group">
<label for="joinTradeCat" class="col-sm-2 control-label">Trade Category</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="joinTradeCat" placeholder = "Required">
</div>
</div>
<div class="form-group">
<label for="joinLicNo" class="col-sm-2 control-label">License Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="joinLicNo" placeholder = "Required">
</div>
</div>
{{/if}}
{{#if joinStudent}}
<div class="form-group">
<label for="joinCourse" class="col-sm-2 control-label">Course</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="joinCourse" placeholder = "Required">
</div>
</div>
{{/if}}
<div class="form-group well" id="joinWell">
<label class="checkbox-inline input-lg">
<input id="joinUserCheck" type="checkbox" value="user" name="role" disabled checked>User</input>
</label>
<label class="checkbox-inline input-lg">
<input id="joinTradieCheck" type="checkbox" value="tradie" name="role" >Tradie</input>
</label>
<label class="checkbox-inline input-lg">
<input id="joinSponsorCheck" type="checkbox" value="sponsor" name="role" >Sponsor</input>
</label>
<label class="checkbox-inline input-lg">
<input id="joinStudentCheck" type="checkbox" value="student" name="role" >Student</input>
</label>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<button type="submit" class="btn btn-primary btn-lg pull-left">Join</button>
</div>
<div class"col-sm-5">
<button type="button" id="joinCancel" class="bnt btn-default btn-lg pull-right">Cancel</button>
</div>
</div>
</div>
</form>
</template>
and the associated js
Template.joinLayoutInner.events({
'click #joinTradieCheck': function(e) {
console.log("Tradie checkbox clicked");
Session.set("joinTradieTag", (joinTradieCheck.checked?1:0));
},
'click #joinStudentCheck': function(e) {
console.log("Student checkbox clicked");
Session.set("joinStudentTag", (joinStudentCheck.checked?1:0));
},
'click #joinSponsorCheck': function(e) {
console.log("Sponsor checkbox clicked");
Session.set("joinSponsorTag", (joinSponsorCheck.checked?1:0));
}
});
Template.joinLayoutInner.helpers({
joinTradie: function() {
return Session.get("joinTradieTag");
},
joinStudent: function() {
return Session.get("joinStudentTag");
},
joinSponsor: function() {
return Session.get("joinSponsorTag");
}
});
Template.joinLayout.events({
'click #joinCancel': function(e) {
e.preventDefault();
Router.go('loginPage');
},
'submit #joinForm': function(e,t) {
e.preventDefault();
console.log("Form Sumbitted");
}
});
If I comment out the html line for the cancel button, everything works as expected. As soon as I put that button back in.. boom.
Any ideas please?
Found the problem. Turns out to be a simple typo (again!!)
Missed an "=" sign after the class for the div containing the cancel button. Still positioned the button correctly but failed when the page re-rendered it seems.
Peter.