Develop Reference

Regarding enabling and disabling fields for registration form?

I have to create a registration form with fields as first name,last name,address,contact no,email.initially only first name shouid be visible as i enter name it should enable last name as i enter last name it should enable address

you could do somthing like this
<form>
<input id='firstname' >
<input id='lastname' disabled>
</form>
<script>
const firsname = document.getElementById('firstname')
const lastname = document.getElementById('lastname')
firstname.oninput = function(){
if(firstname.value.length>0) lastname.disabled = false
else lastname.disabled = true
}
</script>

I have totally different take on this. There is nothing wrong with this approach. In-fact there are many cool UIs design with same terminology. typeform.com is great example for this.
This is very bad practice at SO, whats a point in down rating a new user.
If you cant give a proper suggestion, then you have no right to down rate someone only because you failed to understand his view point.
To answer this :
It will be very bad idea if its just implemented this in wrong way, and user might get annoyed with this.
Its better to use combination of CSS and JS (jquery) to achieve this for great looking, user friendly UI.
Find this small snippet i've created using jQuery might help you.
with little css it can be made to look great!
Press enter after entering detail into text box.
jQuery.extend(jQuery.expr[':'], {
focusable: function(el, index, selector) {
return $(el).is('a, button, :input,[tabindex]');
}
}); // extention to jquery
$("#res").hide();
$("#email").hide();
$("#mobile").hide();
//Focuse Next on Enter press
$(document).on('keypress', 'input,select', function(e) {
if (e.which == 13) {
e.preventDefault();
var $focusable = $(':focusable');
var index = $focusable.index(document.activeElement) + 1;
if (index >= $focusable.length) index = 0;
$focusable.eq(index - 1).hide();
$focusable.eq(index).show();
$focusable.eq(index).focus();
}
});
function subscribeRelease() {
$("#res").show(200);
$(".btn").hide(200);
}
body,
html {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container-fluid h-100 justify-content-center">
<div class="row justify-content-center align-middle h-100">
<div class="col-10 text-center align-self-center">
<h1 style="font-size:40pt;">Register</h1>
<form id="register" class="form-inline justify-content-center">
<input type="text" class="form-control" id="name" placeholder="Name" /><br>
<input type="text" class="form-control" id="email" placeholder="Email" /><br>
<input type="text" class="form-control" id="mobile" placeholder="Mobile" /><br>
<br><br><br>
<button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
<span id="res"><h3 class="text-success">Registration Completed!</h3></span>
</form>
</div>
</div>
</div>

Set variable value in jQuery to Javascript calculator

I have a form with a price calculator and while I am able to set all text fields and such using a jQuery script, I can't figure out how to simply set a variable in that jQuery script that is used in a price calculator in another Javascript on the page.
There is a text field with an id of #price_draftarticles that I set a value to - that works but I also have a variable called price_draftarticles that is being added to other variables to create a total. I referenced my Form_Calculator() function but it's still not updating the total.
Relevant form code
<div class="col-sm-8">
<div class="radio">
<label>
<input class="structype" type="radio" name="CorpStructure" id="price_structureop3" value="I want to provide my own structure" onClick="checkRadioCS(); Form_Calculator();"><strong>I want to provide my own structure</strong>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="checkbox">
<label>
<input name="DraftArticles" type="checkbox" id="DraftArticles" onClick="checkRadioTF(); Form_Calculator();" value="Yes">DETAILS
</label>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<input name="price_draftarticles" type="text" class="form-control fcalc" id="price_draftarticles" value="" readonly>
</div>
</div>
My jquery function
<script>
$(function () {
$('.structype').change(function () {
if ($(this).val() === 'I want to provide my own structure')
{
$("#DraftArticles").prop("checked", true);
$("#price_draftarticles").val('$25.00');
$("price_draftarticles").val('25.00');
$('#CustomStructureDetail').show('500');
}
if ($(this).val() == 'Standard structure template one class of shares') {
$('#CustomStructureDetail').hide('500');
}
if ($(this).val() == 'Two classes of shares') {
$('#CustomStructureDetail').hide('500');
}
});
checkRadioTF();
checkCheckBox();
Form_Calculator();
checkeFileJur();
});
</script>

Looks like you forgot the '#' character in
$("price_draftarticles").val('25.00');
This should be
$("#price_draftarticles").val('25.00');

As what #BYates said the selector missed '#' for price_draftarticles.
$("#price_draftarticles").val('25.00');
But if you're trying to get/set value of the input using it's name. The selector should be like this:
$('input[name="price_draftarticles"]').val('25.00')

Changing placeholder with `this` on multiple elements via checkbox

Currently I have two search inputs on every page using the same classes. What I am trying to do is change the placeholder text of this element when the checkbox isnt checked here is what I have so far. Also Codepen
HTML
<nav class="navbar navbar-secondary-scroll-mobile" role="navigation">
<div class="container">
<div class="row">
<div class="search-scroll">
<div class="pull-left">
<input autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text">
</div>
<div class="pull-right">
<label>
<input class="translateSearch" type="checkbox" checked="checked">
<span>Translate</span>
</label>
</div>
</div>
</div>
</div>
</nav>
JS
$('.translateSearch').on('change', function(e) {
if ($(this).is(':checked') == true) {
$('.translateSearch').not($(this)).attr('checked', true);
} else {
$('.translateSearch').not($(this)).attr('checked', false);
$('.translateSearch').attr('placeholder', 'Search using exact terms.');
}
});
I just cant seem to get it to work with the placeholder. Any ideas?

The following JS will set the placeholder on your text input with class SearchInput. I assumed you wanted the placeholder there instead of on the translateSearch checkbox as implied by the original code. Also made a change that restored the original placeholder text when the box is checked.
$('.translateSearch').on('change', function(e) {
if ($(this).prop('checked')) {
$('.SearchInput').attr('placeholder', 'Have your search terms translated to Chinese.');
} else {
$('.SearchInput').attr('placeholder', 'Search using exact terms.');
}
});
Also as a note - you don't need to manually to the checkbox behaviors as they are done automatically by default.
Here's a link to the CodePen: http://codepen.io/anon/pen/akxxOk

I am not sure what purpose the if/else statement serves in your JS.
I simplified it so it updates the placeholder (has to be on the proper class, in this case SearchInput) without any else condition:
$('.translateSearch').on('change', function(e) {
if ($(this).is(':checked') === false) {
$('.SearchInput').attr('placeholder', 'Search using exact terms.');
}
});
Here is an updated Codepen

You try to change the text of the checkbox not your input. So if you add a id to your input :
$('.translateSearch').on('change', function(e) {
if ($(this).is(':checked') == true) {
$('.translateSearch').not($(this)).attr('checked', true);
$('#inputToChange').attr('placeholder', "Have your search terms translated to Chinese.");
} else {
$('.translateSearch').not($(this)).attr('checked', false);
$('#inputToChange').attr('placeholder', 'Search using exact terms.');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-secondary-scroll-mobile" role="navigation">
<div class="container">
<div class="row">
<div class="search-scroll">
<div class="pull-left">
<input id="inputToChange" autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text">
</div>
<div class="pull-right">
<label>
<input class="translateSearch" type="checkbox" checked="checked">
<span>Translate</span>
</label>
</div>
</div>
</div>
</div>
</nav>

I need help showing and hiding data based on a checkbox

Alright so I have a form. In the form I have a lot of check boxes. If a person clicks on the checkbox. It shows the field below the box. If they click on the checkbox again it makes the field below the checkbox disappear and makes the field have no value.
here is the code. I have JS running the show and hide. and Html calling it.
function ShowCutSewDescription() {
var select = $('#send_item_to_cutsew');
console.log(select)
//select = parseInt(select);
if (select.attr('checked', true)) {
$('#cutsew-checked').show();
}else {
$('#cutsew-checked').hide();
}
}
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>

Changes made
► select.attr('checked', true) to select.is(":checked")
► $('#send_item_to_cutsew') to $('[name="send_item_to_cutsew"]') since there is no element with that Id.
Working Demo
function ShowCutSewDescription() {
var select = $('[name="send_item_to_cutsew"]');
if (select.is(":checked")) {
$('#cutsew-checked').show();
} else {
$('#cutsew-checked').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>
<div id="cutsew-checked">
Sample box
</div>

I assume this is using jQuery. If so, the selector that you have input is looking for something with an id of send_item_to_cutsew.
jQuery uses css selectors as a base, as referenced by this page: https://api.jquery.com/category/selectors/
The proper way to get the input that you want based on the name is as follows:
var select = $('[name="send_item_to_cutsew]');
or you can set the id to the above like so:
<input type="checkbox" id="send_item_to_cutsew" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">

How to display diffrence divs according to radio selection

I have 2 radio buttons no one of them checked by default and I want if any one of them checked a Div appear according to what radio button was checked.
( Divs have different content )
and if the selection changed the one which appeared now disappear and the other appear.
and when one of them appear there are another 2 radio to do the same thing for another one div ( one to show and one to hide )
Here what I tried to do
JavaScript
function haitham()
{
if(document.getElementById('s').checked == true)
{
document.getElementById('StudentData').style.display = "block";
document.getElementById('GraduateData').style.display = "none";
}
else if(document.getElementById('g').checked == true)
{
document.getElementById('GraduateData').style.display = "block";
document.getElementById('StudentData').style.display = "none";
}
}
function info()
{
if(document.getElementById('y').checked == true)
{
document.getElementById('MoreInfo').style.display = "block";
}
else if(document.getElementById('n').checked == true)
{
document.getElementById('MoreInfo').style.display = "none";
}
}
HTML
<input class="margin2" id="s" type="radio" name="kind" value="student" onchange="haitham()"
required="required" />Student
<input class="margin2" id="g" type="radio" name="kind" value="graduate" onchange="haitham()"
required="required" />Graduate
<div id="StudentData">
content 1
<input class="margin2" id="y" type="radio" name="info" value="yes" onchange="info()"
required="required" />Student
<input class="margin2" id="n" type="radio" name="info" value="no" onchange="info()"
required="required" />Graduate
</div>
<div id="GraduateData">
content 2
</div>
<div id="MoreInfo">
content 3
</div>
the first work good but the other 2 radio did not work although it should be the same
Thank you ...

Your problem wasn't a javascript or html one, it was actually a CSS issue. Your code was fine, aside from the fact that the values for display are "none" and "block" not "" and "hidden". I modified your code and updated the fiddle.
Here's the link:
http://jsfiddle.net/8JpSQ/4/

Just add a clicked event to the radio buttons, and through a Javascript function change the attribute of the respective DIV to hidden when required. To show it instead, remove the attribute 'hidden'. Also, we'd probably be able to help more if you can post some code showing what you tried/what went wrong. But what I suggested should be the general approach to make what you want happen.

I have no idea what your HTML is, so here's what I have:
$('input[type="checkbox"]').click(function() {
$('.divWrapper > div').eq($(this).index()).fadeOut().siblings().fadeIn();
});
I'm assuming this is your structure:
<form>
<checkbox>
<checkbox>
...
</form>
<div class="divWrapper">
<div>
<div>
...
</div>