Autofill data gets overwritten by onchange event of javascript - javascript

So I am facing a very annoying issue. I have a form with all empty field initially. Now user has a option to use default set of values by choosing a radio button 'yes' option.
If the user chooses to use default set of values then I fill all the form fields with default set of values using script. Everything goes fine till now.
The problem is my select drop-down not getting set with the default value. After debugging I found out that it is getting set but then On Change event of JS gets fired which is populating the drop down with the dataset from a ajax response.
How to stop on-change event to be fired if the user not clicked on the drop down and changed something.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" value="1" name="rdChoice"> Yes! Set Default Value
<input type="radio" value="0" name="rdChoice"> No! I have to fill data
<hr>
First Name : <input type="text" name="txtFirstName" id="txtFirstName"><br>
Last Name : <input type="text" name="txtLastName" id="txtLastName"><br>
Country :
<select onchange="getState()" id="selCountry">
<option>Choose</option>
<option>India</option>
<option>Japan</option>
<option>US</option>
</select>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getState()
{
console.log("get state");
}
$(function()
{
$( 'input[name="rdChoice"]:radio' ).change(
function()
{
if(this.value==1)
{
$("#txtFirstName").val("Paresh");
$("#txtLastName").val("Gami");
$("#selCountry").val("India");
}
else
{
}
}
);
});
</script>
If user click on select box then and only getState is called.

Related

Concatenate two fields and use this value to change/set value of a hidden field

Here is what I want to achieve. I have a requirement in which there is one dropdown for country codes and another input field for mobile number. I want to send country code and mobile input value as combined value so for that I am using a hidden field. When not using a hidden field it is easy to change value of a third tag element but that will not send value when form is submitted. So hidden field has to be used. So I have tried doing this but it is not changing value of hidden field.
<html>
<head>
<script language="javascript">
var dropdown = '';
var mobilenum = '';
function calldropdown()
{
dropdown = document.getElementById("country_code_id").value;
return dropdown;
}
function calltxtfield()
{
mobilenum = document.getElementById("mobileid").value;
return mobilenum;
}
function codemobile()
{
document.getElementById("codemobileid").value = calldropdown() + ' ' + calltxtfield;
alert(document.getElementById("codemobileid").value);
}
</script>
</head>
<body>
<form>
<select name="country_code" id="country_code_id" onchange="calldropdown()">
<option value="">Select</option>
<option value="+975">Bhutan</option>
<option value="+977">Nepal</option>
<option value="+94">Sri Lanka</option>
</select>
<input type="text" name="mobile" id="mobileid" onchange="calltxtfield()" />
<input type="hidden" name="codemobile" id="codemobileid" value="" />
<input type="submit" name="submit" value="Submit" onclick="return codemobile();" />
</form>
</body>
</html>
I can not explain it right now, but name="codemobile" seems to silently shadow function codemobile(). Rename one of the two and it works.
Also note that right now you are concatenating the function body (... + calltxtfield;), it should rather be ... + calltxtfield();

is it possible to change the value in a dropdown using Javascript when dropdown is disabled

I have a web form where i disable a dropdown on page load in C#.
The drop down is to be disabled at all times, only when users make a certain selection is when I would like to change the value in my drop down. Either Yes or No.
This is my Javascript code:
var drpModeNeed = document.getElementById("drpAssessID"); //This dropdown is
//where I'm looking to change the value (it is disabled)
var drp4Val = (document.getElementById('<%=drp4ID.ClientID %>').value);
var drp14Val = (document.getElementById('<%=drp14ID.ClientID %>').value);
var drp15Val = (document.getElementById('<%=drp15ID.ClientID %>').value);
if (drp4Val == 1 || (drp14Val == 1 && drp15Val == 1))
{
//trying to change the value here of dropdown
}
This is what I've tried in the if statement
drpModeNeed.options[drpModeNeed.selectedIndex].value == 1;
but nothing happens. I know for sure that it definitely recognizes the statements, becase I've placed an alert inside the IF statement and each time it would show that the values were definitely selected.
I guess I'm wondering if I'm able to change the value of a disabled dropdown? if I am, then why isn't the code working?
To update the effective value of a <select> element, you don't set the .value of an <option>, you set the .selected property to true (or any truthy value):
drpModeNeed.options[1].selected = true;
Keep in mind that if the <select> element has the .disabled property set, posting the enclosing <form> will not send that value to the server. The browser assumes that disabled elements are supposed to be ignored.
it works for me:
function changeValue(newValue){
var drpModeNeed = document.getElementById("drpAssessID");
drpModeNeed.value=newValue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="drpAssessID" disabled="disabled" class="aspNetDisabled">
<option value="1">one</option>
<option selected="selected" value="2">two</option>
</select>
<br /><br />
<button type="button" onclick="changeValue(1);">Set 1</button>
<br /><br />
<button type="button" onclick="changeValue(2);">Set 2</button>
</body>
</html>

How to use text input value with jquery get?

How do I use the value from a text input when using jquery get?
It works with the value from a select input, but for some reason the value from the text input doesnt get sent to the next page (updateName.php)
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
function updateName(){
$.get('updateName.php', {name : $( "#name" ).val()});
}
function updateGender(){
$.get('updateGender.php', {rego : $( "#gender" ).val()});
}
</script>
</head>
<body>
<input type="text" id="name" onchange="updateName()" size="10%">
<select id="gender" onchange="updateGender()">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</body>
Never mind.
The problem wasnt that the text wasnt being sent to the next page.
The problem was that on the next page I forgot to surround the value with apostrophes.
Like this:
$sql="UPDATE people SET name='$name' WHERE id=1";
The problem was it used to be like this:
$sql="UPDATE people SET name=$name WHERE id=1";

Conditional form not working

I am new to javascript and I am trying to add a conditional field to a form. I have looked at these posts:
How do you create a hidden div that doesn't create a line break or horizontal space??
conditional display of html element forms
I have come up with this little example so far which works fine.
<html>
<head>
<script language="javascript">
function cucu(form){
if(form.check.checked){
document.getElementById("cucu").style.visibility="visible";
}
else{
document.getElementById("cucu").style.visibility="hidden";
}
}
function load()
{
document.getElementById("cucu").style.visibility="hidden";
}
</script>
</head>
<body onload="load()">
<form id="form">
<input type="checkbox" name="check" onclick="cucu(this.form)" >
<div id="cucu">
CUCU
</div>
</form>
</body>
<html>
I have tried the same method on a larger side and the only change is that the hidden element is a text field but it just doesnt' work.
This is the part of the form:
Album: <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this.form)" id="idAlbum">
<div id="divAlbum" >
Choisir un album : <input type="text" name="Album" list="Albums">
<datalist id="Albums">
<?php
$requete = 'SELECT DISTINCT titreAlbum FROM Album';
$resultat = mysqli_query($connexion, $requete);
while($row = mysqli_fetch_assoc($resultat)){
echo '<option value="'.$row['titreAlbum'].'">';
}
?>
</datalist> <br><br>
</div>
My head looks as follows:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html ; charset=UTF-8" />
<title>BLABLA</title>
<link rel="stylesheet" type="text/css" href="include/styles.css">
<script language="javascript" >
function hideElements(){
document.getElementById("divAlbum").style.visibility="hidden";
}
function checkAlbum(form){
if(form.checkAlbum.checked){
document.getElementById("divAlbum").style.visibility="visible";
}else{
document.getElementById("divAlbum").style.visibility="hidden";
}
}
</script>
</head>
I really don't know what the problem is. I've checked the functions again and again. Any suggestions for the possible error? Thanks
The reason your button is not working is that this refers to the clicked input itself. The form property on the input refers to the value of the form attribute, not the actual form. In reality you don't need the form attribute, you can simply use this.checked to see if the corresponding input is currently checked.
Album: <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this)" id="idAlbum">
function checkAlbum(cb){
if(cb.checked){
document.getElementById("divAlbum").style.visibility="visible";
}else{
document.getElementById("divAlbum").style.visibility="hidden";
}
}
Beyond this I would suggest that you consider not applying your JavaScript inline. Keeping your code separate from your mark up improves readability and can help prevent errors. You might consider using the jQuery framework as it will make this sort of thing much easier.
$(function(){
$('#idAlbum').on('change', function() {
// use change instead of click in case there's a label involved
$('#divAlbum').toggle(this.checked);
});
});

Submit form to 2 different action page

I would like to have a form that can submit to two different action pages based on a select box.
Meaning if I select in the select box Products, the action would be products.html, and if I select Users, the action would be users.html
I have found many examples that have two submit buttons, but I need only one submit button.
Any ideas on how to do it?
you can use jQuery for that ...
if selected value equals something
set form attribute action to the other thing not initial action
this is pseudo code of course ..
here is a working solution :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#selectList").change(function(){
if($('#selectList').val() == 1){
$("#yourform").attr("action","secondaryaction");
}
});
});
</script>
</head>
<body>
<select name="dummy" id="selectList">
<option value="0">foo</option>
<option value="1">bar</option>
</select>
<form id="yourform" action="primaryaction">
bla bla
</form>
</body>
</html>
Try something like this (assuming a form named "myForm"):
document.myForm.onsubmit = function() {
if (this.mySelector.value == 'products') {
this.action = 'products.html';
}
// the "else" isn't necessary: leave it at "users.html" as a default.
};
read about new attributes
Attributes for form submission that may be specified on submit buttons. The attributes are: formaction, formenctype, formmethod, formnovalidate, and formtarget
Works in IE >= 11
my example for will be demonstrated point :
<form action="1.php">
<input type="text" >
<button value="go"> GOOOOOOOOOOOO</button>
<button value="go" formaction="2.php"> DONNNNNNNNNNNNNNNNOOOO</button>
</form>
if(condition==products)
document.forms[0].action = 'products.html;
else
document.forms[0].action = 'users.html;

Categories