We Keep Coding

Give an input button with no value HTML tag a different value

I'm using UserWP plugin in Wordpress and on my registration page I have the form and the button which says "Submit Query" - not the best text. I'd much rather have "Register".
There's no option in the settings to change the button text so trying to utilise another method.
The HTML string for the button is:
<input type="submit" name="uwp_register_submit" class="form-control btn btn-primary btn-block text-uppercase uwp_register_submit">
So there is no "value" for the text.
My aim is to "inject" the value="Register" into the HTML string. I believe this can be done with a JavaScript snippet, but not being the best at JS, I'm struggling to achieve it.
Lots of googling found some JS code that finds a text string in the identifier and replaces it, however I cannot seem to get this working.
const button = document.querySelector('input');
button.addEventListener('click', updateButton);
function updateButton() {
if (button.value === '') {
button.value = 'Register';
}
}
I realise this would only take effect on click, so when the button is pressed. So tried something like:
const button = document.querySelector('input');
if (button.value === '') {
button.value = 'Register';
}
Again, no success.
And I also saw something about using jquery? So tried the following without success.
$('.btn').val('Register');
I simply want to target the class of the button and tell it to give a value of "Register" - I bet it's an easy solution for someone, but not me...

In general you can achieve that by getting the element and setting the value as you try.
But the line document.querySelector('input'); gives you back the first matching element back. See MDN Document.querySelector
So if there are more than one input fields, it will take the first input, which may not be your submit input.
An alternative would be to search for the specific name of the input field.
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector("[name='uwp_register_submit']").value = "Register";
});
If that field exists multiple times, use querySelectorAll and combine it with an loop.
In your specific case it would maybe the better way to change the default translation for english. Have a look at the documentation. It looks more complicated as it is.

Add button clear value ion-datetime in ionic

I want create a ion-date time with three button : cancel , done and clear. so I custom in here:
Add button clear data ion-datetime
I want if date is chose I can click Clear in modal date picker to remove value same when click button Clear Data.
How I can do it?
Thank every one

I’m using :
I’ve added a custom button to a ionic-datetime
<ion-datetime
formControlName="myDateCustom"
[pickerOptions]="customPickerOption">
</ion-datetime>
and ts.
customPickerOption = {
buttons: [{
text: 'Clear',
handler: () => this.myForm.controls['myDateCustom'].setValue(null)
}]

vuejs materializecss timepicker not get value

How can I get time value using materializecss Timepicker in Vuejs
Meterilize css Time Picker Jsfiddle LInk
It's give me value in jsfiddle but when I doing it my vuejs project it's not working..
Vue.js Code:
<v-text-field
name="start-time"
id="edit_start-time"
class="timepicker"
></v-text-field>
mounted() {
$('.timepicker').pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0, // set default time to *
twelvehour: true, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: false, // automatic close timepicker
ampmclickable: true, // make AM PM clickable
aftershow: function() {} //Function for after opening timepicker
});
$('.timepicker').on('change', function() {
let receivedVal = $(this).val();
console.log(receivedVal);
});
},
NB: My fiddle works fine and if you check console it give me value but same code not work in Vue.js Project my Problem in Vuejs.. i want to get value like jsfiddle

Please use
v-model.lazy="deliverySchedule"
worked for me !!!

Jsfiddle Link With Solution own my problem
I got solution by use input
<input class="timepicker" v-model="deliverySchedule" >

I think you should not use jQuery for this.
Vue offers some nice bindings wich are working way better.
<v-time-picker v-model="myTimeValue"></v-time-picker>
In this code i bind myTimeValue (a local data variable) to the actual value of the timepicker. Now i can use it anywhere and vue deals with all updating stuff.

I think you should use ref
If you need directly access a child component in JavaScript you have to assign a reference ID to the child component using ref.
For more information take a look at Link.
How to use:
Your html should be similar to this:
<div class="input-field inline">
<label for="startDate" class="materialize-label">Start Date</label>
<input id="startDate" ref="startDate" type="date" size="12" class="startDate timepicker">
</div>
You also need to initialize it with jquery (the same way you have done it)
$('.timepicker').pickatime({
...
...
...
})
For example, when your user submits a form you just need to use: this.$refs.startDate.value
This will grab the value of the date.
If you want to bind changes from the user you can use v-model.
Otherwise, I think using v-model is unnecessary.
Vue Docs:
You can use the v-model directive to create two-way data bindings on
form input and textarea elements. It automatically picks the correct
way to update the element based on the input type
More information at: Link

How to create a Dynamic input fields on button click using anuglar js?

I have a dropdown menu like this
[ShortAnswer- TextBox,Checkbox,Radio button and Drop down]
User can choose the input type and there can add the options by clicking the add option button like this
by clicking the cross icon the options need to be removed.
I reffered dynamic text area
http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/
But I need more reference about this, Please Suggest me an idea to achieve this using angular js.

Build your list of inputs from an array of objects that each define an input. On button click add a new object to the array that defines the input you want to add.
html:
<div ng-repeat="input in inputsList">
<span ng-click="remove($index)>x</span><input ng-if="input.type==='text'" type="text" />
<span ng-click="remove($index)>x</span><input ng-if="input.type==='checkbox'" type="checkbox" />
...
</div>
<button ng-click="addNewCheckBox()">Add</button>
controller:
$scope.addNewCheckBox = function() {
$scope.inputsList.push({ type: 'checkbox' });
};
$scope.remove = function(index) {
$scope.inputsList.splice(index, 1);
};
It would probably be best if you had a custom input directive that took a config object and it would decide which input to build. But for the sake of simplicity and clarity I just used basic raw html inputs.
Let me know if that makes sense or you need an Angular2/4 answer.

JQGrid - Custom In-Line buttons not showing

I'm using jqgrid 3.8.2 (I know it's old, I'm going to try to update it after asking this :-) )
I added a couple in-line buttons to my jqgrid, I'm using the default formatter 'actions' and adding the buttons in the loadComplete event. It works fine, I can add my custom buttons, but the thing is I don't need the default buttons, edit and delete, so when I go ahead and hide them with
formatoptions: { editButton:false, delButton:false }
It hides everything; hiding them individually isn't a problem, but both.
Any advice?

I solved the issue following Olegs comments and using a custom action formatter
function myCustomActionFormatter(cellValue, options, rowObject){
//I'm using the rowId so I can identify the button and get an easier access to the rowId itself :)
return '<div id="myCustomButton' + options.rowId + '" class="myButtonClass">'
}
then, on the loadcomplete event I add the event to the buttons using jquery:
$("#mygrid").jqgrid(... { name='act', width:100, formatter: myCustomActionFormatter}...
,loadcomplete:function(){
$(".myButtonClass").click(function() {//what I want to do});
});