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>
Related
Scenario 1: User has initially checked the value for "Automated" and updates the value to unchecked state
Display alert message pops up to the user if at least one of the following accordions is in the "Completed" state.
HTML
<div class="col-md-12 col-sm-12 filter-opn">
<form #checkboxfilt="ngForm" (ngSubmit)="onapplyfilter(checkboxfilt)">
<div >
<div>
<input type="checkbox" name="Success" value="1" ngModel selected ><br>
<label for="Success"> Success</label><br>
</div>
<div>
<input type="checkbox" name="Pending" value="2" ngModel ><br>
<label for="Pending"> Pending</label><br>
</div>
<div>
<input type="checkbox" name="Canceled" value="3" ngModel ><br>
<label for="Canceled"> Canceled</label><br>
</div>
<input type="submit" value="Apply">
<br>
</div>
</form>
</div>
TS
onapplyfilter(checkbox:NgForm){
if((checkbox.value.Success ==''|| checkbox.value.Success==false)
&&(checkbox.value.Pending ==''|| checkbox.value.Pending==false)
&&(checkbox.value.Canceled ==''|| checkbox.value.Canceled==false))
{
alert('CheckBox is Empty');
}
}
}
i'm using Uikit radio input (https://altair-html.tzdthemes.com/forms_regular.html).
The problem is the radio input is transforming between code and on site display
After load my form with Ajax, i want to alert value for radio choice after each change.
Here my code :
HTML :
<div class="uk-width-medium-1-2">
<h5>Radio set 1</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_1" value="Yes" data-md-icheck />
<label for="radio_opt_1" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_2" value="Non" data-md-icheck />
<label for="radio_opt_2" class="inline-label">No</label>
</span>
</div>
</div>
<div class="uk-width-medium-1-2">
<h5>Radio set 2</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_3" value="Yes" data-md-icheck />
<label for="radio_opt_3" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_4" value="Non" data-md-icheck />
<label for="radio_opt_4" class="inline-label">No</label>
</span>
</div>
</div>
Then here my JS (doesnt' work)
$(document).on('change', 'input:radio', function () {
alert('test');
});
That theme is using iCheck and according to the docs you should use:
$('input:radio').on('ifChecked', function(event) {
alert('test');
});
I am form where i am trying to add a check box for gender selection. I have tried everything but with no result.
Here is my code about the checkbox and a picture of my form
<div className="input-field col s12">
<input
onChange={this.onChange}
value={this.state.gender}
error={errors.gender}
id="gender"
type="checkbox"
className={classnames("", {
invalid: errors.amka
})}
/>
<label htmlFor="gender"><b className="black-text text-darken-1">Gender:</b></label>
<span className="red-text">{errors.gender}</span>
<br></br>
</div>
enter image description here
Okay, first of all you should not use chekckbox for gender selection unless there is very specific reason for that.
Here is the code for checkbox.
<div>
<input
type="checkbox"
name="checkbox"
id="checkbox"
checked={value}
value={value}
onChange={e => {
// perform the function onChange
}}
/>
<label for="checkbox">My Checkbox</label>
</div>
Here is the demo: https://stackblitz.com/edit/react-f5q3n8?file=src/App.js
My javascript code doesnt seem to run when i use this codes to validate the radio button is clicked. Its suppose to dropdown the inputs when the card radio button is clicked and it is suppose to slide up the inputs when the paypal button is clicked.1st code javascript. 2nd code html.
if (document.getElementById('paypal').checked) {
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
} else if (document.getElementById('card').checked) {
//Card radio button is checked
$(".input-fields").slideUp("slow");
};
<div class="panel-body">
<h2 class="title">Checkout</h2>
<div class="bar">
<div class="step active"></div>
<div class="step active"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<div class="payment-method">
<label for="card" class="method card">
<div class="card-logos">
<img src="img/visa_logo.png" />
<img src="img/mastercard_logo.png" />
</div>
<div class="radio-input">
<input id="card" type="radio" name="payment"> Pay $<%= total %> with credit card
</div>
</label>
<label for="paypal" class="method paypal">
<img src="img/paypal_logo.png" />
<div class="radio-input">
<input id="paypal" type="radio" name="payment"> Pay $<%= total %> with PayPal
</div>
</label>
</div>
<div class="input-fields">
<div class="column-1">
<label for="cardholder">Cardholder's Name</label>
<input type="text" id="cardholder" />
<div class="small-inputs">
<div>
<label for="date">Valid thru</label>
<input type="text" id="date" placeholder="MM / YY" />
</div>
<div>
<label for="verification">CVV / CVC *</label>
<input type="password" id="verification" />
</div>
</div>
</div>
<div class="column-2">
<label for="cardnumber">Card Number</label>
<input type="password" id="cardnumber" />
<span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
</div>
</div>
</div>
All you missed was to add the logic inside a function and add it to an event using addEventListener() for value change.
We use document.getElementById() to get both the input elements by ID and then add the event listener to fire on change of value.
document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);
function validate() {
if (document.getElementById('paypal').checked) {
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
} else if (document.getElementById('card').checked) {
//Card radio button is checked
$(".input-fields").slideUp("slow");
};
}
document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<h2 class="title">Checkout</h2>
<div class="bar">
<div class="step active"></div>
<div class="step active"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<div class="payment-method">
<label for="card" class="method card">
<div class="card-logos">
<img src="img/visa_logo.png" />
<img src="img/mastercard_logo.png" />
</div>
<div class="radio-input">
<input id="card" type="radio" name="payment"> Pay $<%= total %> with credit card
</div>
</label>
<label for="paypal" class="method paypal">
<img src="img/paypal_logo.png" />
<div class="radio-input">
<input id="paypal" type="radio" name="payment"> Pay $<%= total %> with PayPal
</div>
</label>
</div>
<div class="input-fields">
<div class="column-1">
<label for="cardholder">Cardholder's Name</label>
<input type="text" id="cardholder" />
<div class="small-inputs">
<div>
<label for="date">Valid thru</label>
<input type="text" id="date" placeholder="MM / YY" />
</div>
<div>
<label for="verification">CVV / CVC *</label>
<input type="password" id="verification" />
</div>
</div>
</div>
<div class="column-2">
<label for="cardnumber">Card Number</label>
<input type="password" id="cardnumber" />
<span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
</div>
</div>
</div>
References:
Event Listeners
You need to add your javascript inside an event listener. For Example
$("input[name='payment']").click(function ()
{
if (document.getElementById('paypal').checked)
{
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
}
else if (document.getElementById('card').checked)
{
//Card radio button is checked
$(".input-fields").slideUp("slow");
}
;
});
I need a JavaScript that can insert an attribute to a field and also remove it when the user deselects the field.
Here is the code I'm using for the radio select:
<script>
$(document).ready(function() {
$("input[name$='sel']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#sel" + test).show();
});
if (test == "CreditCard") {
$("#card").addClass("validate[custom[card]] text-input");
} else {
$("#card).removeClass("validate[custom[card]] text-input");
}
});
</script>
Field code:
<table><tr><td>
<p>
Credit/Debit Card<lable style="margin-right:1px;"></lable><input type="radio" name="sel" id="sel" value="CreditCard" />
</p>
<p>
Paypal<input type="radio" id="sel" name="sel" value="Paypal" />
</p>
<p>
Wire Transfer<input type="radio" id="sel" name="sel" value="WireTransfer" />
</p>
<!====================================================================================>
</td><td>
<!====================================================================================>
<div id="selCreditCard" class="desc">
<label for="card"><strong>Card Number<font color=red size=3> *</font></strong></label>
<input name="card" type="text" id="card" value="" style="width:85px;" />
</div>
<!====================================================================================>
<div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;">
paypal
</div>
<!====================================================================================>
<div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;">
Transfer
</div>
<!====================================================================================>
</td></tr></table>
This is the attribute that needs to be inserted to the "card" input field:
class="validate[custom[card]] text-input"
When the user selects the radio with the value CreditCard, the attribute will be inserted to the input field, and when the user deselects the radio with the value CreditCard the attribute will be removed.
Link for fiddle:
FIDDLE
telexper, there are lots of wrong things in your code, and unfortunatelly i dont have the time to explain right now.
but i will leave a working code for you here: http://jsfiddle.net/RASG/DSrLS/
just click "Credit/Debit Card" and the class nowitsadded wil be added to the input field, which will turn red.
HTML
<input type="radio" id="sel1" name="sel"> Credit/Debit Card
<br>
<input type="radio" id="sel2" name="sel"> Paypal
<br>
<input type="radio" id="sel3" name="sel"> Wire Transfer
<br>
<br>
<div id="selCreditCard" class="desc">
Card Number <input name="card" type="text" id="card" value="">
</div>
JS
$('#sel1').click(function() { $('#card').addClass('nowitsadded') })
CSS
.nowitsadded {background-color: red}