Hi guys i want to dynamically add a group of input fields when a button is pressed. This works with 1 group, but not with more than one. Here is my HTML:
<form action="address.php" method="POST">
<div id="list">
<input type="text" name="address" placeholder="Address">
<input type="text" name="suburb" placeholder="Suburb">
<input type="text" name="state" placeholder="State">
<input type="text" name="country" placeholder="Country">
<button id="addMore">Add Address</button>
</div>
</form>
I'm calling the addMore function with this javascript:
$(function(){
$("#addMore").click(function(e){
e.preventDefault();
$("#list").append("<input type="text" name="address" placeholder="Address"><input type="text" name="suburb" placeholder="Suburb"><input type="text" name="state" placeholder="State"><input type="text" name="country" placeholder="Country"><button id="addMore2">Add Address</button></div>");
});
});
I've added a button at the end with an id of addMore2 because i wanna generate a similar set of input controls but with different names. I want to call that id with this function:
$(function(){
$("#addMore2").click(function(e){
e.preventDefault();
$("#list").append("<input type="text" name="address2" placeholder="Address"><input type="text" name="suburb2" placeholder="Suburb"><input type="text" name="state2" placeholder="State"><input type="text" name="country2" placeholder="Country"><button id="addMore3">Add Address</button></div>");
});
});
... and then another set of controls with the function addMore3. Same as above, but with the number 3.
If i use each function alone, it works. But if i try to use all 3 together, it doesn't work. How can i dynamically reproduce a set of input controls with different names?
you could do something like this
$(var count = 0;
$("#addMore2").click(function(e){
e.preventDefault();
$("#list").append("<input type='text' name='address2'"+count+" placeholder="Address"><input type="text" name='suburb2'"+count+" placeholder="Suburb"><input type="text" name='state2'"+count+" placeholder="State"><input type="text" name='country2'"+count+" placeholder="Country"><button id='addMore3'"+count+">Add Address</button></div>");
count++;
});
});
#rayzor
You need to append your code before button
Please use below code:
jQuery("#addMore").click(function(e){
jQuery('<br><input type="text" name="address" placeholder="Address"><input type="text" name="suburb" placeholder="Suburb"><input type="text" name="state" placeholder="State"><input type="text" name="country" placeholder="Country">').insertAfter("input:last");
return false;
});
And remove code for $("#addMore2").click event
There's no need to add Addmore 2,3,etc manually. the js will add it automatically, as much as your want. Feel free to see this one: https://phppot.com/jquery/jquery-ajax-inline-crud-with-php/
Related
I have the following code for html:
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="ouput_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup',function(){
output_01.value = input_01.value
})
</script>
I want to display the input value as the output. However, I found that the command "output_01.value = input_01.value" doesn't work and there is nothing displayed. I do not know why and do not know how to solve this problem. How can I display the content of an input in 'ouput_01'? Thank you.
make sure you don't have typo in your code.
change from
<input type="text" name="" id="ouput_01">
to
<input type="text" name="" id="output_01">
your INPUT tag output ID does not match the one on your javascript DOM and this output_01.value = input_01.value is wrong, instead you should add event to your function parameter in your Event Listener then assign your event.target.value to your output DOM value
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="output_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup', function(event) {
output_01.value = event.target.value
})
</script>
I have a form field with the last name and want to generate a customer ID starting with the first two characters from their last name in caps and add a random number to it. So I need the other field which dynamically updates with only the first two characters in uppercase. This is what I have so far:
HTML:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
JAVASCRIPT:
document.getElementById('textfield2').setAttribute('maxlength',2)
You can get the two first characters from your input and put them in the second with javascript :
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value.substr(0,2).toUppercase()">
<input type="text" id="textfield2" value="">
</form>
I am not sure but I think that the javascript code don't care about the attribut "maxlength". Futhermore, you need use toUpperCase in order to have your result.
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="txt(this.value)">
<input type="text" id="textfield2" value="">
</form>
<script>
function txt(value) {
document.getElementById('textfield2').value = value.substr(0,2).toUpperCase();
}
</script>
hope it works
I'm having some trouble here with the logic. I'm using Ajax to POST my form and I'm trying to send some values the correct way.
This is my form.
<form method="post" action="~/AJAXcalls/callajaxagain.cshtml" name="form">
<div class="reportDateDiv">
<input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
onchange="mySubmit(this.form)" value="#inputDate" autocomplete="off" placeholder="#placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" />
<input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
onchange="mySubmit(this.form)" value="#endDate" autocomplete="off" placeholder="#noEndDate.ToString("MMM d, yyyy")" readonly="readonly" />
<select name="NormOrAvg" class="dwmViewSelect" onchange="mySubmit(this.form)">
<option selected=#(Request.Form["NormOrAvg"] == "1") value="1">Rep Per Set</option>
<option selected=#(Request.Form["NormOrAvg"] == "2") value="2">Average Rep Per Set</option>
</select>
<input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Squat" readonly="readonly" />
<input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Benchpress" readonly="readonly" />
<input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Deadlift" readonly="readonly" />
</div>
</form>
So what I am trying to achieve is that, the last three inputs in my form is designed as "buttons", this might be weird but as I said, im having trouble figuring this out in a good way, anyhow, the value of these three are Squat, Benchpress and Deadlift, I really only want to send the value of the one being clicked, because on the page that is called by the ajax will show some charts, and depending on what I click I want it to show the matching chart.
What happens right now is that if I var type = request.form["lift"]; on the ajax page, the result will be "squat,benchpress,deadlift", so it sends all values, I only want to send the one I click, I know it gives me all because they all have the same name="", but I dont know how to solve this?
Using razor(cshtml) and its not a MVC project.
The way, I would do this:
Change these to buttons like so:
<button id="squats"></button> [...]
If you already've done that, do the following: (add some id to your form)
document.getElementById('my-form').addEventListener('click', function (event) {
var target = event.target;
var optionChoosen
if (target.tagName == 'BUTTON') {
optionChoosen = target.id;
}
Why is the hidden form not shown when it looses focus? The alert is coming up nicely when leaving the input but the other hidden form is still not there.
html
<body>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
</body>
javascript
window.onload = function() {
$("#myinput").blur(myAlert);
};
function myAlert() {
alert("This input field has lost its focus.");
$("#validation_message_email").show();
}
You can't display a hidden input like that.A span will suit better for this purpose,
<input type="text" id="myinput" value="">
<span style="display:none" id="validation_message_email">enter a valid email</span>
validation_message_email doesn't have its display style property as none, so show() will not make it visible from type="hidden".
You need to replace
$("#validation_message_email").show();
with
$("#validation_message_email").attr( "type", "text" );
However, if the intent is to only show a message, then you don't need to use a hidden input for the same.
<body>
<input type="text" id="myinput" value="">
</body>
and
window.onload = function() {
$("#myinput").blur(function(){
alert("This input field has lost its focus.");
$(this).append('<span id="emailValidationMessage">enter a valid email</span>')
});
$("#myinput").focus(function(){
$("#emailValidationMessage").remove();
});
};
No need to use type="hidden" as hidden elements are not display:none they are hidden by default.
Use type="text" and hide it with css and show where you want
<input type="text" id="myinput" value="" style="display:none;">
use like this
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
<script>
window.onload = function() {
$("#myinput").blur(myAlert);
};
function myAlert() {
$("#validation_message_email").attr("type","text");
}
</script>
<div class="form-group" id="usernamediv">
<input class="form-control" name="username" id="username"
placeholder="Username" type="text" required=""> </div>
<div class="form-group" id="passworddiv">
<input name="password" class="form-control" id="password" placeholder="Password" type="password" required="">
</div>
<button id="#loginButton">Login</button>
<button id="#forgotpassword">Forgot Password</button>
<script>
$("#forgotpassword").hide();
$("#forgotpassword").click(function(e){
$("#loginButton").hide();
$("#usernamediv").show();
$("#passworddiv").hide();
})
</script>
Check this jsfiddle link, it might help you.
$("#myinput").blur( function(){
myAlert();
});
function myAlert() {
$("#validation_message_email").attr("type", "text");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
How can i remove the property of required to the Second Element "Second Name" ?
Here is my Code :
<form action="#" novalidate>
First Name:
<input type="text" name="first" required>
Second Name :
<input type="text" name="second" required>
<input type="submit">
</form>
You can set required property to false
$("input[name=class]").prop("required", false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Name: <input type="text" name="name" required>
Class: <input type="text" name="class" required>
<input type="submit">
</form>
Using jQuery you can do:
$('input[name=second]').prop('required', false);
Example
Try using .removeAttr().
$('input[name="class"]').removeAttr('required')
Try this:
$('input[type="text"][name="second"]').prop('required', false);
it just removes the required property on the target element which has the name "second".
you can use the
removeAttribute command:
First set ID's for the inputs.
I set it to the same value as the name.
Next removeAttribute
document.getElementById("class").removeAttribute("required");
This should do the trick ;)
Here, have a fiddle:
Fiddle