Please see this screen shotI need some help. I want to populate dynamic table's row data into a form when i clicked on the particular row.When i try this html elements are repeating along with data when i click on the table rows, but i need like elements should not repeat only data should change. This is my template code
<table class="table2">
<tr>
<th>'Player'</th>
<th>Age</th>
</tr>
<tr ng-repeat=" usr in fc.saveData" ng-click="fc.fnRowClick(usr)">
<td>{{usr.player}}</td><td>{{usr.age}}</td>
</tr>
</table>
<div ng-repeat="data in fc.displayData track by $index">
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
<label for="field2">
<span>Age</span><input type="text" name="field2" required="true" ng-model="data.age"/>
</label>
</div>
This is my js code.
fc.displayData=[];
fc.fnRowClick = function(usr){
console.log(usr);
fc.displayData.push(usr);
console.log(fc.displayData);`
}
html name attribute is beeing duplicated during ng-repeat.
That may cause this problem.
Change:
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
to this:
<label for="field1{{$index}}">
<span>Name</span><input type="text" name="field1{{$index}}" required="true" ng-model="data.player"/>
</label>
Do the same for second label.
Related
I've got the following in a partial view, representing a row that is added dynamically:
<td>
<input asp-for="Id" class="form-control" />
</td>
<td>
<input asp-for="EnableDropDown1" id="EnableDropDown1Id" type="checkbox" class="form-control" />
</td>
<td>
<select asp-for="MyDropDown1" id="MyDropDownId1" asp-items="Html.GetEnumSelectList<MyEnum1Type>()" disable="disabled" class="form-control"></select>
</td>
<td>
<input asp-for="EnableDropDown2" id="EnableDropDown2Id" type="checkbox" class="form-control" />
</td>
<td>
<select asp-for="MyDropDown2" id="MyDropDownId2" asp-items="Html.GetEnumSelectList<MyEnum2Type>()" disable="disabled" class="form-control"></select>
</td>
I thought that maybe an onclick="EnableDropDown()" call attached to the CheckBox (that took a checkbox and a dropdown parameter) might do the trick, but it doesn't keep the state nor does the checkbox find the appropriate dropdown. I could loop through all the rows on a click and enable/disable dropdowns appropriately but this seems like a poor solution.
I've seen a fair few solutions out there but none of the simple ones work... either because they're not dynamic, or maybe it's down to the multiple checkboxes, or the fact it's an EnumSelectList and not a simple DropDown (Is there a difference?)..
I'm not too well-versed on javascript so I'm a bit lost with this one.
First, you are missing a "d" in the disabled attribute
Then if you are adding the row dynamically that means that the events are not added when the dom load, you can modify this behavior using a parent selector that already exists when the dom is rendered, also add some references using data-attributes between inputs and select make easier handle this
Try using the following code
$(".parent-class").on("change",".checkbox-class", function() {
var enabledDropdown = $(this).data("dropdown")
$(`#${enabledDropdown}`).removeAttr("disabled")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="parent-class">
<tr>
<td>
<input asp-for="Id" class="form-control" />
</td>
<td>
<input data-dropdown="MyDropDownId1" asp-for="EnableDropDown1" id="EnableDropDown1Id" type="checkbox" class="form-control checkbox-class" />
</td>
<td>
<select asp-for="MyDropDown1" id="MyDropDownId1" asp-items="Html.GetEnumSelectList<MyEnum1Type>()" disabled="disabled" class="form-control"></select>
</td>
<td>
<input data-dropdown="MyDropDownId2" asp-for="EnableDropDown2" id="EnableDropDown2Id" type="checkbox" class="form-control checkbox-class" />
</td>
<td>
<select asp-for="MyDropDown2" id="MyDropDownId2" asp-items="Html.GetEnumSelectList<MyEnum2Type>()" disabled="disabled" class="form-control"></select>
</td>
</tr>
</table>
I would like to add p tage or line break after table, so that contents in table and div can display in two lines.
At the moment they display in one line which is very messy (i.imgur.com/7cnQhou.jpg).
Would you please let me know how to do it using php or JS?
<div class="woocommerce-variation">
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="test2">
<table class="thwepo-extra-options thwepo_variable" cellspacing="0">
<tbody><tr class=""><td class="label leftside"></td>
<td class="value leftside">
<input type="text" id="test2" class="thwepof-input-field">
</td></tr>
</tbody>
</table>
<div class="quantity">
<input type="number" id="quantity_60" class="input-text qty" inputmode="numeric">
</div>
<button type="submit" class="single_add_to_cart_button">Add to cart</button>
</div>
Thank you.
table and div tag are both block level element. They display in two lines in default.
Below is the result of running your code.
I'm trying to hide a text field in jquery by looking for the text field only by its placeholder and nothing else. I'm aiming for something like this:
$(look for placeholder with the name credit card number).hide();
I don't want to use ids or classes to look for this text field, only the placeholder.
Here is the html:
<div class="form-wrap">
<table id="credit-card-table">
<tbody>
<tr id="credit_card_number_row">
<td class="field has-float-label">
<input id="credit_card_n" name="credit_card[cnb]" size="30" value="" placeholder="credit card number" autocorrect="off" autocapitalize="off" maxlength="19" class="" type="tel">
<span class="msg"> </span></td>
</tr>
<tr id="exp_date_row">
<td>
<table>
<tbody>
<tr>
Thank for the help :)
$("input[placeholder='credit card number']").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="credit_card_n" name="credit_card[cnb]" size="30" value="" placeholder="credit card number" autocorrect="off" autocapitalize="off" maxlength="19" class="" type="tel"/>
Use the attribute equals selector:
$('[placeholder="credit card number"]').hide();
In my html I have code which dynamically adds rows when a button is clicked and on each row there is a button called "Add"
<form name="{{form.name}}"
ng-repeat="form in forms">
<div ng-repeat="cont in form.contacts">
Add
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
<hr>
</form>
Than on my second page /edit i have following code that lists rows of values fetched.
<table>
<tbody ng-repeat="item in alllis">
<tr>
<td>
Select
</td>
<td>
<input type="text" ng-model="item.ac" />
</td>
<td>
<input ng-model="item.a_number />
</td>
</tr>
</tbody>
</table>
What I am trying to figure out is when I am on /edit and I select any row how do i populate back that row data on main page.
Please let me know from /edit page how do i go back to main page populating that row where Add button was clicked. Thanks
Here is the plunker for the first (Main) page.
http://plnkr.co/edit/VVUx2roDTrM9ob2uyZMv?p=preview
I have a basic customer information form that I would like to make a little more interactive. The idea being if the user selects a country that is not USA or Canada the state Select turns to a state textbox. I'm sure this can be done with just PHP but have debated using jQuery but would like to avoid it if possible. Here is my form sample:
<tr>
<td>
<input name="city" type="text" id="city" value="<?= $this->aBillingProf['cCity']; ?>" />
</td>
<td>
<select name="state" id="state" style="width:218px;position:relative;top:-4px;">
<? $s = strlen($this->aBillingProf['cState']) == 2 ? strtoupper($this->aBillingProf['cState']) : strtoupper(stateTranslate($this->aBillingProf['cState']));
echo stateSelect('both',$s); ?>
</select>
<input name="state" type="text" id="state" value="<?= $this->aBillingProf['cState']; ?>" />
/*The Idea being only one of the above options is available depending on what is selected from the country select */
</td>
</tr>
<tr>
<td>
<label for="zip">Zip / Postal Code</label>
</td>
<td>
<label for="country">Country</label>
</td>
</tr>
<tr>
<td>
<input name="zip" type="text" id="zip" maxlength="6" value="<?= $this->aBillingProf['cZip']; ?>" />
</td>
<td>
<select name="country" id="country" style="width:218px;position:relative;top:-4px;">
<?= AffiliateStore::countrySelect($this->aBillingProf['cCountry']); ?>
</select>
<!-- <input type="text" name="country" id="country" value="<?= $this->aBillingProf['cCountry']; ?>" /> -->
</td>
</tr>
Basically what I do is to add a div containing the inputs I would need. In this case I would use a select boxes for US and Canadian states and a text input for other. Use the CSS diplay:none to collapse all divs except the one for the default selected country.
<div id="state_inputs">
<div id="us_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="ca_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="other_states_div">
<input type="text" name="other_states" />
</div>
</div>
Now assuming that your select box for the country has the id country_select:
<script>
document.getElementById("country_select").onchange = function() {
var country_select = document.getElementById("country_select");
var country = country_select.options[country_select.selectedIndex].text;
if(country == "USA") {
document.getElementById("us_states_div").style.display="block";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="none";
} else if(country == "Canada") {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="block";
document.getElementById("other_states_div").style.display="none";
} else {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="block";
}
};
</script>
Once you've updated your PHP to output that markup, on the processing side you just look at the selected country and then use the value contained in the correct state input.
This can't be done with just PHP because it requires that you use client side scripting to determine when the event has been triggered. You could use PHP to rebuild the form, however, that would require a reload from the sever. It's much easier just to use JavaScript to handle the event and update the form.