We Keep Coding

How to hide updated state from the URL

I have created a form in using React and maintain state for storing form data. The form contains only text fields and radio buttons. There is a 'Proceed' button at the end whose onClick function goes like this :
handleClick(event){
console.log(this.state);
var userID = 1;
firebase.database().ref('registrations/'+userID).set(this.state);
}
There is another function to handle input change like so :
handleInputChange(event){
const target=event.target;
const name=target.name;
var value;
if((target.type==="radio"&&target.checked)||target.type!=="radio") value=target.value;
this.setState({
[name]:value
});
}
I want the console to log the updated state after filling the form and clicking the Proceed button. But when I fill the form and click the button, the state is briefly displayed on the console before disappearing (console goes back to how it was initially) and I see the form data in the URL instead. How do I stop the data being displayed in the URL and log the state data in the console?
I am relatively a beginner in React. So please bear with me if I don't know something very basic.
Thanks in advance.
Edit: Here's render(), and please note that I also updated the click handler.
render() {
return(
<div>
<div className="State">
<div className="Head">
State
</div>
<div className="StateField">
<input
name="state"
type="text"
onChange={this.handleInputChange} />
</div>
<hr />
</div>
<div className="Age">
<div className="Head">
Age
</div>
<div className="AgeField">
<input
name="age"
type="number"
onChange={this.handleInputChange} />
</div>
<hr />
</div>
<div className="Ethnicity">
<div className="Head">
Ethnicity
</div>
<div className="EthnicityField">
<input name="ethnicity" type="radio" value="Hispanic or Latino" onClick={this.handleInputChange} defaultChecked /> Hispanic or Latino
<input name="ethnicity" type="radio" value="Non-Hispanic or Non-Latino" onClick={this.handleInputChange} /> Non-Hispanic or Non-Latino
</div>
<hr />
</div>
<div className="Race">
<div className="Head">
Race
</div>
<div className="RaceField">
<input name="race" type="radio" value="American Indian" onClick={this.handleInputChange} defaultChecked /> American Indian
<input name="race" type="radio" value="Asian" onClick={this.handleInputChange}/> Asian
<input name="race" type="radio" value="Native Hawaiian or Other Pacific Islander" onClick={this.handleInputChange}/> Hawaiian or Other Pacific Islander
<input name="race" type="radio" value="Black or African American" onClick={this.handleInputChange}/> Black or African American
<input name="race" type="radio" value="White" onClick={this.handleInputChange}/> White
</div>
<hr />
</div>
<div className="Sex">
<div className="Head">
Sex
</div>
<div className="SexField">
<input name="sex" type="radio" value="Male" onClick={this.handleInputChange} defaultChecked /> Male
<input name="sex" type="radio" value="Female" onClick={this.handleInputChange}/> Female
</div>
<hr />
</div>
<div className="Height">
<div className="Head">
Height
</div>
<div className="HeightField">
<input name="height" type="number" placeholder="In inches" onChange={this.handleInputChange}/>
</div>
<hr />
</div>
<div className="Weight">
<div className="Head">
Weight
</div>
<div className="WeightField">
<input name="weight" type="number" placeholder="In pounds" onChange={this.handleInputChange}/>
</div>
<hr />
</div>
<div className="ProceedButton">
<button name="Proceed" onClick={this.handleClick} >Proceed</button>
</div>
</div>
);
And now I also realized that when I add the state to firebase realtime database, height, sex and weight fields are empty. Please point out if anything's wrong.

The default type of a button element is "submit". If you don't do anything to prevent it, clicking a button will submit a form that is an ancestor element of the button.
All the symptoms you describe are consistent with the button being inside a form that has not been shown in the post.
Try addding `type="button" to the button definition:
<button name="Proceed" type="button" onClick={this.handleClick} >Proceed</button>

Show / hide div on page load depending on radio button value - Jquery and Ruby on Rails Simple Form

Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>

Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>

On radio button click, show/hid divs with dynamicaly changed IDs or classes

<div class="">
#foreach($result->package as $package) //listing all packages from DB using Laravel's Blade template
<input id="id_radio{{$package->id}}" type="radio" value="{{$package->id}}" name="radio"
>{{$package->name}} <br>
<div class="" id="package{{$package->id}}">
#foreach($package->price_option as $price_option)
Price Option: <input type="radio" value="{{$price_option->id}}"
name="radio">{{$price_option->id}} <br>
<div class="">
#foreach($price_option->values as $value)
Values: {{$value->value}} <br>
#endforeach
</div>
#endforeach
</div>
#endforeach
</div>
Page Source:
<div class="">
<input id="id_radio22" type="radio" value="22" name="radio"
>Package 1 <br>
<div class="" id="package22">
Price Option: <input type="radio" value="75"
name="radio">75 <br>
<div class="">
Values: Dummy text <br>
Values: Dummy text 2 <br>
</div>
Price Option: <input type="radio" value="78"
name="radio">78 <br>
<div class="">
Values: Dummy text <br>
Values: Dummy text 2 <br>
</div>
</div>
<input id="id_radio23" type="radio" value="23" name="radio"
>Package 2 <br>
<div class="" id="package23">
Price Option: <input type="radio" value="76"
name="radio">76 <br>
<div class="">
Values: a <br>
Values: b <br>
Values: c <br>
</div>
</div>
</div>
What I need is to show all price options as radio buttons when I click on, for example, package 1 radio button, and to show all price options as radio buttons for package2 but at the same time hide price options of Package1.
Then for all Price Options that I click to show all Values that belongs to that Price Option.
Currently dont have any CSS or JQuery/JavaScript code

Working fiddle.
Try to hide all the divs (that have id start with package) bellong to the other radio buttons then show just the div belong to the clicked one :
$('div[id^="package"]').hide();
$('body').on('click','input[id^="id_radio"]',function(){
$('div[id^="package"]').hide();
$('#package'+$(this).val()).show();
});
$('div[id^="price_option_div"]').hide();
$('body').on('click','.price_option',function(){
$('div[id^="price_option_div_"]').hide();
$("#price_option_div_"+$(this).val()).show();
});
Hope this helps.

Checkbox forms & JQuery

I'm attempting to create a very short form that will display an alert based on its checked checkbox options.
(See here for my attempt - https://jsfiddle.net/4k2v68mv/4/)
$(document).ready(function() {
// Displays options for alert if checked
$('#mycheckbox1').change(function() {
$('#mycheckboxdiv1').toggle();
$('#displayAlert').toggle();
});
// Displays alert if checked
$('#mycheckbox2').change(function() {
$('#transportAlert').toggle();
});
// Adds options into Dropdown menu
$('.box').hide();
$('#dropdown').change(function() {
$('.box').hide();
$('.' + $(this).val()).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Choose Alert
<input type="checkbox" name="mycheckbox1" id="mycheckbox1" value="0" />
<div id="mycheckboxdiv1" style="display:none">
<form>
<select id="dropdown" name="dropdown">
<option value="0">-- Transport Type --</option>
<option value="area1">Busses</option>
<option value="area2">Trains</option>
<option value="area3">Ferries</option>
</select>
</form>
<div class="box area1">
<form action="">
<input type="checkbox" name="bus" value="1A"> 1A
<br>
<input type="checkbox" name="bus" value="1B"> 1B
<br>
<input type="checkbox" name="bus" value="1C"> 1C
<br>
<br>
<input id="customText" type="text" name="busCustom" placeholder="Custom" />
</form>
</div>
<div class="box area2">
<form action="">
<input type="checkbox" name="train" value="1A"> to London
<br>
<input type="checkbox" name="train" value="1B"> to Southampton
<br>
<br>
<input id="customText" type="text" name="trainCustom" placeholder="Custom" />
</form>
</div>
<div class="box area3">
<form action="">
<input type="checkbox" name="ferry" value="1A"> Isle of Wight
<br>
<br>
<input id="customText" type="text" name="ferryCustom" placeholder="Custom" />
</form>
</div>
</div>
<div id="displayAlert" style="display:none">
<hr>
<input type="checkbox" name="mycheckbox2" id="mycheckbox2" value="0" />
<div id="mycheckboxdiv2" style="display:none">
</div> Display Alert
</div>
<div id="transportAlert"class="alert alert-warning" role="alert" style="display:none">Please note that the .... will be running late today.</div>
For example,
I'd want the alert to say "Please note that the 1A bus will be running late today." - if the 1A checkbox under Busses is the only option checked.
Similarly, "Please note that the 1A & 1B busses will be running late today." - if the 1A and 1B checkboxes under Busses are checked.
...You get the idea.
I've built the basic premise above, however I'm slightly out of my depth when trying to link the checkbox values via JS into a line of text - (and have them slightly vary dependant on number of checked boxes and type of transport)
Many thanks in advance.

CSS class toggle with jquery on different id's

I'm trying to write some Jquery code for toggling two different class on different ids.
Since the CMS strips out inline css, I need to find a solution for "display:none"
I have written two css classes, in hopes of toggling between them, but not really sure if this is the direction to go .
I'm very new to Stack and Jquery so any info or corrections are welcomed
Here is the code:
CSS
.displaynone{
display:none;
}
.displayblock{
display:block;
}
HTML & JAVASCRIPT
<form>
<input onclick="javascript:resetForm();document.forms[0].reset();" type="reset" value="Reset" /> 
<br />
<br />
<h4>Are you number 1?</h4>
<label>
<input name="one" onclick="unhide('hidden-input', this, 'hidden-input2')" type="radio" value="1" /> Yes
<br />
</label>
<label>
<input name="one" onclick="unhide('hidden-input2', this, 'hidden-input')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input2" style="display: none;">
<p>If you are not , please download:
<br />
<a href="#" target="_blank">
<span style="font-size: x-small;">number one</span>
</a>
</p>
</div>
<div id="hidden-input" style="display: none;">
<hr />
<h4>Were you selected for too many hours?</h4>
<label>
<input name="hours" onclick="unhide('hidden-input3', this, 'hidden-input4')" type="radio" value="1" /> Yes
<br />
</label>
<div id="hidden-input3" style="display: none;">
<p>If you were selected for too many hours, please download:
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Hours</span>
</a>
</p>
</div>
<label>
<input name="hours" onclick="unhide('hidden-input4', this, 'hidden-input3')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input4" style="display: none;">
<hr />
<h4>Were you selected for number 3?</h4>
<label>
<input name="gpa" onclick="unhide('hidden-input5', this, 'hidden-input6')" type="radio" value="1" /> Yes
<br />
</label>
<div id="hidden-input5" style="display: none;">
<p>If you were selected for number 3, please download:
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Form for Three </span>
</a>
</p>
</div>
<label>
<input name="gpa" onclick="unhide('hidden-input6', this, 'hidden-input5')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input6" style="display: none;">
<p>Were you selected for 4 :
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Form for 4</span>
</a>
</p>
</div>
</div>
</div>undefined
</form>

change your element to default as display:block and define a class
.hidden{
display:none;
}
and use this to toggle that class on/off
$('#YOURID').toggleClass("hidden")

Easier to just have the hidden class and remove it when you want to show the element. That way you don't have to worry about altering inline, block and table display properties.
// hide the thing
$('.thing').addClass('displaynone');
// show the thing
$('.thing').removeClass('displaynone');

demo: http://jsfiddle.net/swm53ran/401/ something like this? i started recreating the logic, but i didnt finish it. you should get a gist of what's going, and if you have any questions on it, let me know.
$(document).ready(function() {
$('input[type="radio"]').on('change', function() {
var name = $(this).attr('name');
var value = $(this).val();
console.log(name, value);
if (name == 'one') { // if number 1 question
if (value == 2) {
$('#hidden-input2').show(); // if no, show the download text
}
else {
$('#hidden-input2').hide(); // if yes, hide the dl text
}
$('#hidden-input').show(); // always show the hours question
}
if (name == 'hours') { // if hours question
if (value == 2) {
$('#hidden-input4').show() // if no, show number 3 question
}
else {
$('#hidden-input4').hide() // if no, hide number 3 question
}
}
});
});

It's generally advisable to avoid targeting IDs, and instead use common classes inside grouping wrappers.
<div>
<label>
<input name="one" class="selector yes" type="radio" value="1" />Yes
<br />
</label>
<label>
<input name="one" class="selector no" type="radio" value="2" />No
<br />
</label>
<div class="followup yes hidden">
<p>If you are not , please download:
<br /> <a href="#" target="_blank">
<span style="font-size: x-small;">number one</span>
</a>
</p>
</div>
<div class="followup no hidden">
<hr />
<h4>Were you selected for too many hours?</h4>
</div>
</div>
$('.selector').click(function () {
$(this).closest('label').siblings('.followup').hide();
if ($(this).is('.yes')) {
$(this).closest('label').siblings('.followup.yes').show();
} else {
$(this).closest('label').siblings('.followup.no').show();
}
});
Demo
This single function is reusable for any number of groupings having the same structure, even if nested.
Nested demo