We Keep Coding

Submit HTML button and onclick Overrides HTML5 required field [duplicate]

This question already has answers here:
HTML5 validation when the input type is not "submit"
(9 answers)
Closed last month.
I have my code snippet this way:
<input type= "text" required="required" /><input type="submit />
The form validation happens only when there is no onclick parameter in the input attribute.
But I need to do further process in my JS file. So onclick function is needed for me along with the required parameter in it.
I am looking for something like:
<input type="text" required="required" /><input type="submit" onclick=signUp() />
But both onclick and required are not being taken together. any help is appreciated.

so run function after user make changes in text field simple
<input type= "text" required="required" onChange="signUp()" /><input type="submit />

You can try some JS validations and trigger the submit after validation like
$(document).click("#id", function (){
if($("#id").val() == ""){
return false
}
})

you could use a few lines of javascript and it will work. You could add:
document.querySelector('button').onclick = () => {
if(document.querySelector('input').value == ''){//if the user enters an Empty string,
console.log('field empty');
} else {console.log('not empty');}
}
<input type="text" /> <button>Submit</button>

Way to set maxlength on input based on data in another field of same form in html5?

How can I set the maxlength attribute in my text input field equal to the value the user enters in the number input field in the same form?
<form action="/action_page.php">
<input id="number" type="number" value="20" max="40">
<input type="text" id="username" name="username" maxlength="10"><br><br>
<input type="submit" value="Submit">
</form>
I'm guessing this maybe requires JavaScript?

You can set the maxlength property on the input event.
document.querySelector("#number").addEventListener("input", function(e){
document.querySelector("#username").maxLength = this.value;
});
<form>
<input id="number" type="number" value="20" max="40">
<input type="text" id="username" name="username" maxlength="20"><br><br>
<input type="submit" value="Submit">
</form>

Yes, this requires JavaScript. You would do something like this:
document.querySelector('#number').addEventListener('input', (e) => {
e.target.closest('form').querySelector('[name="username"]').maxLength = e.target.value;
});
JSFiddle: https://jsfiddle.net/63cpv8rk/
Here, we add an event handler for the input event for the element selected by #number. (You should avoid using these ID attributes though... they clutter up the global scope needlessly.)
Then on input, we find the parent form, and then select the input by name. Finally, we set its max length to the value that was just put in our field.

How to get text from input form?

Input form: I can type random text and get the output in the console, like so: "getWeather.html?city=London:76"
This is the code:
HTML:
<form>
<input type="text" name="city" placeholder="Enter City here..">
<input type="submit" value="Submit">
</form>
javaScript:
var input = $('input')[0].form.city.value;
console.log(input);
However, I would like to get the input directly into a variable. In this case 'London'.

From what i understand, the way you are getting the city value is wrong.
Here I'm using a JQuery selector with an attribute value lookup. The selector basicly says: Look for every input with the attribute name equals to city.
Then i'm using the val() function to get the value. I've added a ev paremeters which is the Javacript event and i have stopped it using ev.preventDefault();. This prevent the page from reloading.
To conclude, I've simply console.log the value.
$('form').on('submit', function(ev) {
ev.preventDefault();
var value = $('input[name=city]').val();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="city" placeholder="Enter City here..">
<input type="submit" value="Submit">
</form>

Pass a javascript variable through a hidden input

Okay, I have javascript to calculate a dynamic price for an HTML form. The code is as follows:
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
This, with this input:
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
The javascript takes that value, calculates the price, and I want it to fill this:
<input type="hidden" name="price" value=""/>
I believe my javascript is correct. What do I need to do to the price to make it work?

Make sure you have these items wrapped in a <form> tag.
<form>
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
<br />
<input type="hidden" name="price" value=""/>
</form>
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
I have a working demo here: http://jsfiddle.net/P55ge/
In the demo I have made the price input a text field instead of a hidden field for ease of seeing the value being set.
Also note, that the field is only updated when you enter a valid number and then click off the field input. The following quote is from the jquery documentation for .change() http://api.jquery.com/change/
Now when the second option is selected from the dropdown, the alert is
displayed. It is also displayed if you change the text in the field
and then click away. If the field loses focus without the contents
having changed, though, the event is not triggered.

Putting specific element into variable

how can i get a specific element of a text input into a variable via javascript, in other words take the example below
<form id="123">
<input type="text" id="supply_qty" />
<input type="submit" name="submit" id="123" />
</form>
How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc... is that i later want to use ajax with it, but for the moment i just need the variable.
Thanks

The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now
Simple Example:
var button = document.getElementyById("123");
button.onclick = function() {
var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};
Using jQuery make a slight change to your markup. I am just going to add some classes.
<form>
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
then
$(".submit").click(function() {
var txtbox = $(this).parent("form").children(".textbox")[0];
});
Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.
<form class="tinyforms">
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
Then
$('.tinyforms').submit(function() {
var txtbox = $(this).children(".textbox")[0];
});

If you accept using jQuery you can do this:
DOM
<form class="form" action="false">
<input type="text" value="some input" name="textInput" />
<input type="text" value="some text" name="textInput2" />
<input type="submit" class="sumbit" value="Send" />
<div id="results"></div>
</form>​​​​​​​​​​​​​​​​​​​
And JavaScript
$(".form").submit( function(){
var inputs = $(this).serializeArray();
$.each(inputs , function(i, input){
$("#results").append(input.value + "<br />");
});
return false;
} );​
EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/