I have a problem with jQuery Blur Function
I code it like this:
<head>
<script src="_js/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#l').blur(function(){
if($(this).val()=='')
alert('Invalid');
});
});
</script>
</head>
I am using this to identify if the input field is empty or not. If I run this code then if I leave it empty and click somewhere else, the Blur function is not called and no alert is generated
I am using Firefox 10.1 to run the code
HTML:
<form method="post" action="Login.php" id="Log">
<select id="Login" name="Type">
<option value="Sel" selected="selected">Select Login type</option>
<option value="Student">Student</option>
<option value="Faculity">Faculity</option>
</select>
<div id="type">
<p id="Ch">Group Id: <input id="l" name="log" type="text"/></p>
<p id="Pass">Password: <input id="p" name="Pass" type="password" /></p>
<input id="Cond" type="Text" />
<input type="submit" value="Login" />
</div>
<p id="Invalid" style="padding-top:.75em; color:#FF0000;">Login Field Empty </p>
</form>
The content of code changes through selection and code is this
The Group id And Password Are Hidden At The Beginning And Changes When The Option Is Selected In Below Code
$('#Login').change(function() {
if($(this).val()=='Sel')
$('#type').hide();
else if($(this).val()=='Student')
{
$('#Ch').html('<p id="Ch">Group Id: <input id="l" name=" log" type="text" /></p>')
$('#type').show(10);
}
else
{
$('#Ch').html('<p id="Ch">Faculity Id: <input id="l" name="log" type="text" /></p>')
$('#type').show(10);
}
});
I Think It Is Causing Problem Kindly Check And Tell Me What's It Alternative If It Causes Some Problem Or I Am Doing It Wrong??
$('#input') the # is for ID selector, try the $('input') tag name selector.
Unless your input has an ID of "input", you should be referencing your input as $('input'). This will create a jQuery object with all the elements of type "input".
In your post, you have this chunk of JavaScript code:
$('#Login').change(function() {
if($(this).val()=='Sel')
$('#type').hide();
else if($(this).val()=='Student')
{
$('#Ch').html('<p id="Ch">Group Id: <input id="l" name=" log" type="text" /></p>')
$('#type').show(10);
}
else
{
$('#Ch').html('<p id="Ch">Faculity Id: <input id="l" name="log" type="text" /></p>')
$('#type').show(10);
}
Can I ask where this code is placed within the page? There may be an issue with the order of execution.
Related
Hi i have made few textfields through javascript. But I have no clue how to store them into database while submitting the form. Here is the code
<script type="text/javascript">
function showfield(name){
if(name=='Other') {
document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
document.getElementById('div2').innerHTML='';
}
else if(name=="School") {
document.getElementById('div1').innerHTML='Name of the School : <input type="text" name="school" />';
document.getElementById('div2').innerHTML='Contact Number : <input type="text" name="contact" />';
}
else {
document.getElementById('div1').innerHTML='';
document.getElementById('div2').innerHTML='';
}
}
</script>
<html>
<select name="how" class="subtitle" id="select" onchange="showfield(this.options[this.selectedIndex].value)" style="width: 200px; height:30px;">>
<option selected="true" style="display:none;">Please select</option>
<option>School</option>
<option>Consultant</option>
<option>WhatApp</option>
<option>Brochure / Poster</option>
<option>Internet</option>
<option>Other</option>
</select></td>
</html>
In the above html, when 'School' or 'Other' option is selected, it will show more text fields from javascript. But I could not store the value of that text fields. But all the other options are getting inserted into the database. Please help to fix this.
Getting values from html fields can be done on multiple ways, this is just one of them:
<form onsubmit='onSubmit();'>
<input type="text" id="variableName" />
<input type="submit" value="submit" />
</form>
<script type='text/javascript'>
function onSubmit(){
var val = document.getElementById('variableName').value;
console.log(val);
}
</script>
This way gets what user typed into input field.
Is this what you wanted to achieve? Hope that helps...
I have a select box with options of numbers in it.Whenever user selects an option i am displaying input box through jquery depending on the number selected.So for this the input box are initially hidden. Now the problem is that when i try to post the value of those input box, they are not getting posted.
Here is html code-
<form action="data.php" method="POST">
Select the number of company:
<select name="num_of_comp" id="num_of_comp">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="div1" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db1" id="db1" />
<input type="submit" name="submit" id="submit" />
</div>
<div id="div2" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db1" placeholder="db1 name"/>
<input type="text" name="db2" placeholder="db2 name"/>
<input type="submit" name="submit" id="submit" />
</div>
Here is the script that dynamically displays the input box -
$('#num_of_comp').on('change',function(){
if( $(this).val()==="1"){
$("#div1").css("visibility", "visible");
$("#div2,").css("visibility", "hidden");
}
else if( $(this).val()==="2"){
$("#div2").css("visibility", "visible");
$("#div1").css("visibility", "hidden");
}
Here is php code-
$i = $_POST['num_of_comp'];
if($i == '1'){
$db1 = $_POST['db1'];
echo $db1;
Here I am not getting the value of db1.
Thanks in advance.
You can not set same id to multiple fields, id should be unique for all fields.
so set different ids to all fields in form
Even the name of the all input fields should be unique here.
You have two inputs with name db1. The second value (input without id) overwrites the first one (input with id="db1").
This is your issue
You have use same id for two input fields that is wrong every id in the page should be unique otherwise you can't get the actual value of your expecting field, and use proper naming for those id then you wan't miss those issue and code will be clear also use different name for name attribute
<input type="text" name="db1" id="database1" />
<input type="submit" name="submit" id="submit" />
<div id="div2" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db2" id="database2" placeholder="db1 name"/>
</div>
I am trying to create a drop down menu that allows a user to select which area they would like to login to. Currently, the drop down feature works and hides whichever areas the user is not logging into and shows only the area that they have selected. Using just the form without the dropdown works great and opens a new window while also logging the user in to the system.
However, when I add the dropdown menu and surround the form in tags, it allows me to enter the data but does not process the data.
If possible I would also like to have the form open a new tab in the current browser window(not in a completely new window).
-I cannot change the forms at all besides things that won't matter because they have been given to me from an external source.
Here is my code:
$(document).ready(function() {
toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our repository field changes
$("#member").change(function() {
toggleFields();
});
});
//this toggles the visibility of the 3 different forms depending on which repository the user is logging into.
function toggleFields() {
if ($("#member").val() == 1)
$("#depo").show();
else
$("#depo").hide();
if ($("#member").val() == 2)
$("#records").show();
else
$("#records").hide();
if ($("#member").val() == 3)
$("#reporter").show();
else
$("#reporter").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="member" name="member">
<option value="0">---</option>
<option value="1">Deposition Repository</option>
<option value="2">Records Repository</option>
<option value="3">Reporter Area</option>
</select>
<div id="depo">
<p>Login to Access your Deposition Repository</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/rbweb/attorney/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=30>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="records">
<p>Login to Access your Records Repository.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/mrweb8/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/mrweb8/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="reporter">
<p>Login to the Reporter Area.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebreporter" method="post" action="http://clients.texasdepos.com/rbweb/reporter/WR_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebreporter,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebreporter,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
Any help will be greatly appreciated!
There's a few problems with your code that can each individually cause issues like this.
The fact that you have duplicate names and ids are your primary issues. I.e. you have 3 forms named frmrbwebattorney and all your submit buttons are id'ed btnptarbweb. When you call document.frmrbwebattorney, it is likely getting the wrong form.
Simple solution: replace your <input type="button" ...> with <input type="submit" ...> and remove the onclick from them. Thus your buttons will look like:
<input type="button"
value="Log In"
style="font-size:11px; width:64px"
id="something-unique"
name="btnptarbweb" />
Also note: you can't have multiple style attributes. I combined them into one.
Instead of the onclick attribute with the javascript code change the button type to submit. That will work.
I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.
Here is the code.
These are my 2 radio buttons.
<input type="radio" name="type"> Fresher
<input type="radio" name="type"> Experienced
On click of radio button experienced I want to display these 3 text box.
Company Name: <input type="text" hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text" hidden="true"/> <br/>
Please help me out with javascript for this as new to it.
You could do this as follows. First change your HTML to this:
<input type="radio" name="type" value="Fresher"> Fresher
<input type="radio" name="type" value="Experienced"> Experienced
<div id="textboxes" style="display: none">
Company Name: <input type="text" hidden="true"/>
Designation: <input type="text" hidden="true"/>
Year_of_Experience: <input type="text" hidden="true"/>
</div>
What this code adds to your code is to have a value for the radio buttons. This allows us to make a selection based on which radio button was selected. Secondly, the input fields are grouped together in a <div> to allow for easy hiding of the three input fields. After you have modifief your HTML as such, include jQuery on your website and use this code:
$(function() {
$('input[name="type"]').on('click', function() {
if ($(this).val() == 'Experienced') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
You can see how this works using this JSFiddle: http://jsfiddle.net/pHsyj/
This is the best example.Try something like this.,this is a sort of example
$("input[type='radio']").change(function(){
if($(this).val()=="other")
{
$("#otherAnswer").show();
}
else
{
$("#otherAnswer").hide();
}
});
http://jsfiddle.net/Wc2GS/8/
I guess this would solve your probs
<input type="radio" name="type" id='frsradio'> Fresher
<input type="radio" name="type" id='expradio'> Experienced <br>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
$(function() {
$('#expradio').click(function() {
$('.txbx').attr('hidden',false);
});
$('#frsradio').click(function() {
$('.txbx').attr('hidden',true);
});
});
WORKING jsfiddle
See there is no unique identity available for your html elements, i just given this code by thinking in a generic manner.
Try,
$('input[name="type"]:eq(1)').change(function(){
$('input[type="text"]').toggle(this.checked);
});
<input type="radio" name="type" onClick ="radio"> Fresher
<input type="radio" name="type" onClick ="radio"> Experienced
on click of radio button experienced i want to display these 3 text box.
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
and javascript:-
<script>
function radio()
{
var result = document.getElementsByClassName('text'").style.display="none";
}
</script>
Try this
<input type="radio" name="type" value="fresher"> Fresher
<input type="radio" name="type" value="exp"> Experienced
<br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
Script
$("input[type='radio']").on('change',function(){
if($(this).val() == "exp")
$('.box').show('slow');
else
$('.box').hide();
});
DEMO
Try this....
<input type="radio" name="type" id="fresh"> Fresher
<input type="radio" name="type" id="exp"> Experienced
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
$("#fresh").change(function(){
$('.hid').css("style","display:none");
});
$("#exp").change(function(){
$('.hid').css("style","display:block");
});
For default hide the text boxes In OnRender Complete Method you need hide the three textbox for that you put the below code.
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
You need to write the code in Radio button on change.
Using the Id get the value of radio button
var val=$('#radioId').val;
if(val=='Fresher')
{
$("#textbox 1").show();
$("#textbox 2").show();
$("#textbox 3").show();
}
else if (val=='Experienced'){
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
}
I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>
I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;
Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});
You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;