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;
}
Related
I was wondering if it is possible to submit a form after a certain period of time (e.g. 2 minutes) even if not all the required fields are filled out, as I would like all the data entered by that fixed period of time to be submitted. Currently, although I'm using a timeout function that is javascript-based, it does not allow for the form to be submitted upon timeout as the required fields are not completed. I set all the fields to required as the autofocus function does not seem to work if it is not a required field (i.e. does not go into the next input field automatically upon pressing enter in the current field. Is there a way around this? Thanks so much for any help!
window.setTimeout(() => this.submit(), 120000)
<html>
<main>
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus required></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" autofocus required></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" autofocus required></br>
<br><input type="text" id="response4" name="response4" autocomplete="off" autofocus required></br>
<button type="submit">Submit</button>
</form>
</main>
</html>
Sure, just put this logic in your function. You just remove required attribute from fields.
let form = document.querySelector('form');
let inputs = form.getElementsByTagName('input');
let i;
for (i = 0; i < inputs.length; i++) {
inputs[i].required = false;
}
there are a couple problems with your code:
you should not open and close br tags, you just put a <br> where you want the line break
the autofocus attribute should only be placed on one input, and that input will have the focus when the page loads.
depending on how you are calling your code, you might run in to problems with the this keyword, you might be better calling the form directly.
I changed those things in your code and succeeded with the following code (no need to remove the required attributes, but if they are not really needed just remove them):
window.setTimeout(() => document.forms[0].submit(), 1000)
<html>
<main>
<form>
<br>
<label for="response1">
<b>Animals</b>
</label>
<br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus required>
<br>
<input type="text" id="response2" name="response2" autocomplete="off" required>
<br>
<input type="text" id="response3" name="response3" autocomplete="off" required>
<br>
<input type="text" id="response4" name="response4" autocomplete="off" required>
<button type="submit">Submit</button>
</form>
</main>
</html>
I changed the timeout to one second just to be able to see the effect.
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/
I have a landing page with two forms, only one form visible at a tme. The first form is an age-verification form and if the conditions are met I use jQuery .toggle() to switch to the next form. On page load, for good UX I am using .focus() to put the cursor in the first form field with this line of code: $("input[name='month']").focus();
// Focus cursor on first input field
$("input[name='month']").focus();
var age = 19;
// After calculating age based on user input, toggle the elements
if (age >= 18) {
$('#age-verification').toggle();
$('#subscribe').toggle();
} else {
$('#age-verification').html('<h2>Sorry, you must be at least 18 years old.</h2>');
}
<div id="age-verification">
<h2>Must be 18, please verify age</h2>
<input type="number" name="month" />
<input type="number" name="day" />
<input type="number" name="year" />
<button id="age-gate-submit">Submit</button>
</div>
<form id="subscribe" action="#" method="post">
<input type="text" name="email" />
<input type="text" name="zip" />
<button id ="subscribe" type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
How can I use either .select(), focus() or other method to place the cursor in the first field of the second form <input type="text" name="email" /> after the .toggle() event? I've tried placing a .focus() event direct after the .toggle() which seemed logical but not successful.
You need to first hide the subscribe form:
$('#subscribe').hide();
Working demo: http://jsbin.com/kihepujewi/edit?html,js,output
<div id="user_addr">
<!--- some dynamic content here, which is being loaded from db --->
<div class="add_address" >
<div class="error"></div>
<input type="hidden" id="addr_id" value="0"/>
<input type="text" id="usr_name" class="medium-input" placeholder="Enter Full Name" maxlength="50"/>
<input type="text" id="addr_line1" class="large-input" placeholder="Address Line 1" maxlength="100" />
<input type="text" id="addr_line2" class="large-input" placeholder="Address Line 2" maxlength="100"/>
<input type="text" id="city" class="small-input" placeholder="City Name" maxlength="50"/>
<input type="text" id="state" class="small-input" placeholder="State Name" maxlength="50"/>
<input type="text" id="pincode" class="small-input" placeholder="Pin Code" maxlength="6"/>
<input type="text" id="phone" class="medium-input" placeholder="Mobile Number" maxlength="10"/>
<input type="submit" value="Save" class="save_address"/>
</div>
</div>
I'm trying to reload/refresh div with id usr_addr whenever user click save button.
I'm using
$('.save_address').click(function () {
alert('hi'); <--- doesn't prompt in second call
<!--- saving data to db --->
$('#user_addr').load(location.href.replace('#', '') + ' #user_addr');// refreshing div to get latest saved data
}
But, for the first time when I click Save, it works fine, but div gets nested and in the source code, it becomes
<div id="user_addr">
<div id="user_addr"> <--- nested after function call
....
....
</div>
</div>
And, then save button doesn't work or unable to call js function. Could anyone suggest solution for this issue ?
Some things to fix this :
$(document).on('click','.save_address',function () { // 1. use event delegation to be able to listen to .save_address element, whenever it's loaded via Ajax
var url = location.href.replace('#', '') + '#user_addr';
console.log(url); // just to be sure
$.get(url, function(data){ // 2. perform an Ajax request to fetch your new content, and use a callback to handle the content
var data = $(data).find('#user_addr').html(); // 3. find the new content in the DOM
console.log(data);
$('#user_addr').html(data); // 4. insert it
});
});
Hope this will help :)
NB: I wouldn't use a input[type=submit] as long as there is no form element there, but I would use a button
Just change id="user_addr" to id="user_addr_container' and js to
$('#user_addr_container').load(location.href.replace('#', '') + ' #user_addr');
I'm using the jQuery .serialize function and can't get it to serialize the proper form on submit.
my js code:
function getquerystring(form) {
return $("form").serialize();
}
my forms:
<div class="leave_message_box">
<form name="leave_message_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="leave_message" />
<input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
</form>
</div>
<div class="outside_job_box">
<form name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
I must be doing something wrong in passing the variable. the full code # pastie. The function I have does work, however, its always the last form that gets submitted.
Using this code:
$("form")
will find all the <form> elements in your document.
Given that form is a string containing the name of the form, what you want instead is this:
$("form[name='" + form + "']")
Looking at your supplied code, I have this suggestion. Instead of passing the form name to your function, why not just pass the form itself?
<button onclick="xmlhttpPost('blah', this.form)">
You also don't need to put javascript: in the onclick, onfocus, onwhatever properties.
I would suggest putting an ID attribute on the form and then using that ID as an explicit selector for jQuery:
<div class="outside_job_box">
<form id="outside_job_form" name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
Then you would select and serialize it like this;
var f = $("#outside_job_form").serialize();
Not only making your code more effecient but more readable, in my opinion.
If the sole purpose is to encode simple text into URL format then use encodeURIComponent().